fix: post page hydration #3880
fix: post page hydration #3880
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
| useEffect(() => { | ||
| if (localBootData) { | ||
| return localBootData; | ||
| setCachedBootData(localBootData); | ||
|
|
||
| return; | ||
| } |
There was a problem hiding this comment.
So yeah, this adds another re-render top level to boot but it allows us to avoid hydration issues due to user being differenet.
Let's look at the simple example in JSX:
const Component = ({ user }) => {
return user ? 'a' : 'b'
}What happens now:
- server side user is
undefinedso we renderb - client side user gets loaded inside useMemo default value function from local storage
- client side renders
abecause user is defined (from local storage) - hydration error because
bdoes not matcha - react has to re-render everything client side (affects performance)
What happens with this change of adding a top level re-render
- server side user is
undefinedso we renderb - client side user is still
undefined,useEffectrun only after first client side render - hydration passes
bmatchesb useEffectexecutes, user is no longerundefined- app re-renders
- react only re-paints to DOM elements related to
userchange
So even though top level optimization makes sense, it actually adds more work in the end.
| @@ -182,7 +182,7 @@ PostPage.layoutProps = { | |||
| export default PostPage; | |||
|
|
|||
| export async function getStaticPaths(): Promise<GetStaticPathsResult> { | |||
| return { paths: [], fallback: true }; | |||
| return { paths: [], fallback: 'blocking' }; | |||
There was a problem hiding this comment.
This will make sure we see hydration issues in development, only caveat is that first ever request in production will now stale for the amount of time it takes to fetch data from our API, and now it would show empty screen.
| @@ -46,4 +46,17 @@ const useViewSize = (size: ViewSize): boolean => { | |||
| return reversedEvaluatedSizes.includes(size) ? !check : check; | |||
| }, [check, size]); | |||
| }; | |||
|
|
|||
| export const useViewSizeClient = (size: ViewSize): boolean => { | |||
There was a problem hiding this comment.
Introduced this to not break current implementations but basically due to same explanation like in https://github.com/dailydotdev/apps/pull/3880/files#r1858486018, having useState default value different in SSR and client side causes hydration issues.
Changes
Events
Did you introduce any new tracking events?
Experiment
Did you introduce any new experiments?
Manual Testing
Caution
Please make sure existing components are not breaking/affected by this PR
Preview domain
https://fix-post-page-hydration.preview.app.daily.dev