Fix client-side hydration of SSR in React 18
ClosedPublic
Actions

Authored by ashoat on Dec 20 2022, 7:14 PM.

Details

Reviewers

atul

Commits

rCOMMbf68ec30977e: Fix client-side hydration of SSR in React 18

Summary

See context in ENG-2504.

One serious issue remains here: the PersistGate makes initial client-side render not match SSR, which results in double-rendering the page on web. Not sure why this wasn't an issue before. It unfortunately affects prod just like dev, so this diff on its own won't fix things.

Test Plan

Render web and landing in both prod and dev

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

ashoat created this revision.Dec 20 2022, 7:14 PM

Herald added a subscriber: tomek. · View Herald TranscriptDec 20 2022, 7:14 PM

Harbormaster completed remote builds in B14606: Diff 19926.Dec 20 2022, 7:28 PM

ashoat requested review of this revision.Dec 20 2022, 7:28 PM

ashoat added inline comments.Dec 20 2022, 7:30 PM

landing/package.json
36 ↗	(On Diff #19926)	Bumped due to `react-refresh-webpack-plugin`: https://github.com/pmmmwh/react-refresh-webpack-plugin/
web/package.json
39 ↗	(On Diff #19926)	Bumped due to `react-refresh-webpack-plugin`: https://github.com/pmmmwh/react-refresh-webpack-plugin/
web/root.js
41–46 ↗	(On Diff #19926)	Contents of `hot.js` got moved into here. No need for that component anymore

Looks good, should we also remove the --hot flag from web/package.json and landing/package.json:

? (Not sure if it's still required for fast refresh)

This revision is now accepted and ready to land.Dec 20 2022, 9:03 PM

Getting the following when I navigate to http://localhost/commlanding/keyservers:

Getting the following when I navigate to http://localhost/commlanding/investors:

Same for /siwe as well which is what I need

also looks like there are additional changes to yarn.lock not captured in this diff when I run yarn cleaninstall

(Worth noting that I can close the RedBox and continue to where I need to be, so I'm effectively unblocked... it's just not a great experience)

Curiously, I get the error in the browser console, but I don't get a RedBox. Guessing it's an issue that's always existed... it appears that SSR for any landing endpoint returns the home page. Will resolve that in a later diff.