Too eager HYDRATION renders SSG pointless.
hevar opened this issue · comments
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.
Library dispatches during first render, synchronously. So when your components are rendered, the redux state has to be already proper.
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.
Try it yourself in https://githubbox.com/hevar/ssr-persist-redux-nextjs - just navigate from the main page to the "bulbasaur SSR" link
I'm also running into this issue.
A temporary workaround I am using (not for RTK query), is checking that a variable that should be defined from __NEXT_REDUX_WRAPPER_HYDRATE__ action, is defined before dispatching an action in a useEffect.
// user is defined after __NEXT_REDUX_WRAPPER_HYDRATE__
const user = useAppSelector(selectUser);
useEffect(() => {
if (user) {
dispatch(action());
}
}, [user, dispatch]);
@kirill-konshin this is starting to cause problems.
Do you think it might be a possible fix to synchronously dispatch the hydrate action during first render?
At that point, the store is not available to React yet, so nothing can be subscribed to it and it would not cause any rerendering issues on React side.
Let me see what I can do. First render has sync hydration, maybe following also can become sync. I will double check.
Thanks a ton!
If you need someone to run some thoughts by, you can just ping me on twitter or Discord (phryneas#4779)
I'm also facing similar issue.
The key problem is that useEffect of parent component always triggers after child ones. So in my case I have page with SSR. On first client render there is sync trigger of hydration, children in useEffect change some part of state, then goes hydration from parent useEffect and erases all changes. #495 is also caused by async hydration. I think we can safely switch to using only sync variant. @kirill-konshin please take a look at #497
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.
Try it yourself in https://githubbox.com/hevar/ssr-persist-redux-nextjs - just navigate from the main page to the "bulbasaur SSR" link
This is causing issues for me. Would be amazing if it gets fixed