📜 Server-side rendering local dates without FOUC - @frontsideair Problem to solve: render time in current user TZ without hydration mismatch Suggests interesting alternative to suppressHydrationWarning prop: modify HTML time just before React hydrates https://t.co/9WZ2Y4rRup
5
1
35
Replies
@frontsideair Note it's not the first time we see this practice of updating DOM before hydration @OliverJAsh shared similar trick for optimizing responsive design hydration Delete useless nodes instead of update them https://t.co/cwp8arGSsV artsy/fresnel lib v7.0 encapsulates this pattern
1
0
3
@sebastienlorber @frontsideair Is it really server-rendered though? 🤔 If the server somehow had access to the client TZ and rendered the formatDate correctly in one go, yes (and there wouldn't be hydration errors). But here it renders UTC (or whatever the server TZ is) on server, then final TZ on client.
2
0
1
@fortysevenfx @frontsideair Yes it renders UTC on the server, but it is updated to user TZ before user can see the UTC date?
1
0
1
@sebastienlorber @frontsideair It's a bummer there still isn't a first-class way to do this. I do this in the PackageInstall component in MDXTS so it preserves the user's package manager preference without FOUC, but requires a bunch of hoops:
1
0
3
@sebastienlorber @frontsideair Man I gotta get my SSR’d A/B testing blog post out. It’s this on steroids.
0
0
4
