Next.js: Explanation of Custom Server and `popstate` Usage - Safari Back Button and Objects

Created on 3 Apr 2018 · 8Comments · Source: vercel/next.js

Noticied that in Safari (11.1), using the back/forward buttons with a custom express server fails to pass plain type objects via getInitialProps. This is causing errors due to running methods on undefined objects when users on Safari navigate using the back/forward buttons.

[x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Objects passed from server routes through gitInitialProps should persist even when using back/forward buttons in the browser.

Current Behavior

Objects passed from server routes through gitInitialProps are not persisting when using back/forward buttons in the browser.

Steps to Reproduce (for bugs)

See this repo I created, it includes steps: https://github.com/jhoffmcd/next-test-custom-server#test-2

Context

I have a client site where a data object being passed by the server is not available on back/forward action, thus creating an error page for users. (Other types seem fine, arrays, strings, etc)
Could be related to: https://github.com/zeit/next.js/issues/2360
If custom popstate handling is a must to ensure persistant SSR, can this be added to the custom-server-express example or documented more clearly somewhere?

Your Environment

| Tech | Version |
|---------|---------|
| next | 5.0.1 |
| node | 8.9.4 |
| OS | osx 10.13.4 |
| browser | safari 11.1 |
| express | 4.14.0 |
| react | 16.3.0 |

needs investigation

Source

jhoffmcd

👍12

Most helpful comment

I found for v5 a dirty workaorund. If you use the back button in Safari is the req undefined, but only on rerender.

js class Index extends React.Component { static async getInitialProps({asPath, res, req, query}) { if (typeof req === 'undefined') { return __NEXT_DATA__.props; } } }

Aziz-JH on 18 May 2018

👍9 ❤6 🎉5

All 8 comments

Any updates on this?

joeyhops on 17 May 2018

Might be worth retesting this with v6 now thats its out. I'll try and do that and see if this is still valid.

jhoffmcd on 17 May 2018

I found for v5 a dirty workaorund. If you use the back button in Safari is the req undefined, but only on rerender.

js class Index extends React.Component { static async getInitialProps({asPath, res, req, query}) { if (typeof req === 'undefined') { return __NEXT_DATA__.props; } } }

Aziz-JH on 18 May 2018

👍9 ❤6 🎉5

Ah I did a similar workaround, although I believe __NEXT_DATA__ is a use at your own risk type thing, aka internal spec that may change.

jhoffmcd on 18 May 2018

Same problem here. but only in Safari browsers. works fine in Chrome