question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Too eager HYDRATION renders SSG pointless.

See original GitHub issue

Describe the bug

The __NEXT_REDUX_WRAPPER_HYDRATE__ action executes after the page has been rendered, not before. So as a result, a query is already started before.

This seems to happen only if you navigate on that page - if you refresh on that page, hydration happens first and then the page renders.

To Reproduce

In this repo I’ve made a very basic app which uses SSG/SSR with RTK Query and redux-persist: https://github.com/hevar/ssr-persist-redux-nextjs

Where you can view it occouring.

Expected behavior

I expect an initial render with SSG then a hydration with revalidated data.

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

5reactions
phryneascommented, Oct 7, 2022

We are seeing that working fine on initial page load (e.g. when refreshing), but not with rehydration after navigation to a SSR page, where the components render first and then the rehydration happens.

image

Try it yourself in https://githubbox.com/hevar/ssr-persist-redux-nextjs - just navigate from the main page to the “bulbasaur SSR” link

1reaction
kirill-konshincommented, Nov 1, 2022

I’ve created a PR #498 (in addition to previously mentioned #497) where I am proposing a fix. Please have a look. Comments are welcome.

Read more comments on GitHub >

github_iconTop Results From Across the Web

The Perils of Rehydration - Josh W Comeau
A surprisingly-common misconception can lead to big rendering issues that are difficult to debug. This deep-dive tutorial examines how React ...
Read more >
Build Your Own SSR/SSG From Scratch with Vite and React
Build your own server side rendering with Vite, React and Typescript. ... quite useless - without water, it won't work, just like our...
Read more >
next-redux-wrapper - Bountysource
Too eager HYDRATION renders SSG pointless. $ 0 ... Next wrapper HYDRATE not waiting the dispatch until success or fail, when the dispatch...
Read more >
Identifying and treating dehydration, heat exhaustion and heat ...
Dehydration is a very common issue for athletes who are exerting themselves ... process is rendered less effective in humid environments.
Read more >
react-hydration-error - Next.js
When css-in-js libraries are not set up for pre-rendering (SSR/SSG) it will often lead to a hydration mismatch. In general this means the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found