Error: Text content does not match server-rendered HTML in newer NextJS version

[heinthanth]

I've cloned the repo ( demo repo ). Upgraded all dependencies. And the demo no longer works resulting in Content mis-match as below.

The clean ( fresh ) NextJS application also not working.

[heinthanth]

Here's updated versions.

[heinthanth]

Clean demo ( with Next 12 and Wrapper 7 ) also not working.

[uwemneku]

@heinthanth calling wrapper.getInitialPageProps((store) => () => {}) in pages without getSeverSideProps fixed this issue for me

[heinthanth]

Oh ... interesting ... I think we can do that in _app.tsx too. Calling that in every pages seems duplicated.

My use-case is that, I store site settings ( locale, theme ) in cookie and if user request dark theme, dark theme is responded from server side, So that, user won't see flashes, etc.

[heinthanth]

Yeah, I added something like this and it works.

[uwemneku]

@heinthanth This definately looks neater. My only concern is that next js docs gives this waring

This disables the ability to // perform automatic static optimization, causing every page in your app to // be server-side rendered

Although from the How it works documentation for next-redux-wrapper, it does mention that getInitialProps is called in _app.js so maybe this concern is not valid

[bjoluc]

Hi both,

the runtime error is thrown by React v18. When Next.js pre-renders a page, no client cookies are available (the page is rendered for all clients after all). Hence, the default state is included in the server-rendered HTML, whereas the initial client render has access to the client's cookies and thus differs from the server render. There's nothing we can really do about this, except for server-rendering affected pages per-client (using getServerSideProps or getInitialProps). The mismatch error only occurs on the page that is initially loaded though, so I think I'll add a "/" => "/ssr/1" redirect to the demo to circumvent it in the demo project.

Your concern is right @uwemneku, getInitialProps in _app.js disables automatic static optimization so the page is server-rendered for each request individually. I'd consider it only as a last resort...

[heinthanth]

Yeah ... I think I should close this issue now. @bjoluc's answer does make sense.

[github-actions[bot]]

:tada: This issue has been resolved in version 2.2.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: