Lesson 6 of 6
SSR
Make the first server picture and first browser picture match exactly.
Render the same first tree
Server rendering makes HTML before the browser can use window, localStorage, or media queries. React then connects to that HTML in the browser. If the first browser tree is different, React has to repair a mismatch and your UI can jump.
// Good: the same initial value on server and client
<Dialog defaultOpen={false}>...</Dialog>Read browser-only information after mount
If a saved browser preference should open a panel, read it in an effect after hydration. Start with a stable default first. Then update controlled state once the browser is available.
const [open, setOpen] = useState(false);
useEffect(() => setOpen(localStorage.getItem("help") === "open"), []);
<Popover open={open} onToggle={setOpen}>...</Popover>Keep component order stable
Field and overlay parts make matching IDs so labels, descriptions, triggers, and content can find each other. React can make those IDs match on server and client when the component tree has the same order. Avoid conditionally inserting a different first child only in the browser.
// Keep this shape on server and client
<TextField><Label>Name</Label><Input name="name" /></TextField>