Next.js: A place for rehydration before the first client-side render happens

[ide]

I'm looking to add Redux and Aphrodite support to a Next.js site and need a place to put a little bit of code that rehydrates those libraries with data from __NEXT_DATA__. This rehydration has two requirements: it depends on Redux/Aphrodite and needs to require those packages (so the rehydration code probably has to live in a JS file that's bundled), and it needs to run before the first client-side render.

The only place in the code I can see that meets these requirements is in each page component; as a user I'd have to add import './rehydrate.js' at the top of every single page consistently and would like to not have to do that. Another approach could be to override the Webpack config and have it bundle in another file called _rehydrate.js but this seems like a very common need that Next could take care of. Or maybe I'm overlooking something entirely, it'd be great if there were an easy solution at hand.

[possibilities]

I feel like this is similar to what I was asking for here, no?

https://github.com/zeit/next.js/issues/1409

[arunoda]

I assume the custom document is something you are looking for.

You can get data in getInitialProps of that document and add any script or code.

[ide]

This is in addition to the custom _document.js with getInitialProps -- there's currently no place to handle that data on the client on every page automatically.

[arunoda]

Basically, you can do a better use a wrapper component on every page and do this.
Or you could inject an script before our scripts in the document and run your own logic.

[ide]

I'll try that approach and see how it goes. All of my pages will likely use the same <Layout /> component, which could be a good place to do rehydration.

[ide]

I've been thinking about this more and am coming to the conclusion that a client-side version of _document.js would be really helpful for universal/isomorphic libraries. A client-side _document.js (it doesn't need to be named this or provide all the functionality of _document.js -- maybe _page.js is more appropriate) would allow us to set up a Redux store that's used by all pages, or rehydrate universal libraries like Glamor and Aphrodite.

[silvenon]

I agree, I don't really have a clear idea how to rehydrate before any Glamor code runs. Even though all my pages require the same layout file, they also require other modules which run Glamor. Based on my understanding of modules, I would have to use require everywhere, right? Otherwise how can I control the order of these modules?