Improper sequence of getInitialProps

[kirill-konshin]

I have Redux and async actions in getInitialProps, but it will also produce same results w/o redux too.

If getInitialProps function is used for both page and custom _document.js, then the sequence is:

1. Page - getInitialProps
2. Page - getInitialProps dispatches an action
3. store state is now { page: 'ok', doc: 'init' }
4. MyDocument - getInitialProps
5. Page - renders with `{ page: 'ok', doc: 'init' } that's the problem, render happens before _document's getInitialProps call
6. MyDocument - getInitialProps dispatches an action
7. store is now { page: 'ok', doc: 'ok' }
8. MyDocument - renders with { page: 'ok', doc: 'ok' }

So it seems, that MyDocument.getInitialProps is executed on page render, but I think, that such custom lifecycle methods should be called in sequence, before render, let's say, Page then Doc, so that on render everything is consistent.

Master branch of https://github.com/kirill-konshin/next-redux-wrapper contains the example.

[arunoda]

MyDocument.getInitialProps is used to generate the HTML structure and it should not be a part of your app. It's only running in the server.

[impronunciable]

Exactly, try using an HoC instead of overriding the Document

[kirill-konshin]

But that's what is recommended in readme ;) https://github.com/zeit/next.js#custom-document

How HoC will help to fix the sequence?

I understand that document is only needed on the backend but still, consistent execution flow is important, even if it's one-time thing...

[impronunciable]

I'd say one of the advantages is that with redux what you want to pass from server to client is the initial store data post server-side rendering. getInitialProps (at a page level) is an idiomatic way in next to pass this initial data. You don't want to modify the document being sent (like when you need to paste a chunk of initial css or the amp example where the whole document needs to be modified.

I'm not saying overriding _document won't work, but we offer a solution for passing data from the server to the client that is aligned with the framework flow and philosophy

If you add an HoC into your pages then you go with the pages flow and don't worry about the data flow on the Document

[kirill-konshin]

All true, of course it can be done via function composition only at page level inside getInitialProps, or as a HoC at page level as well, but since both _document and pages support getInitialProps it seems reasonable to make sure they both work sequentially and in a correct order.

[arunoda]

Closing this since we already have a solution.

Custom Document must use for changing the initial markup code. It should not used for anything related to your app.