Chapter 8: Server-Side Rendering
Core Idea
Radix Primitives render fine under SSR/static rendering (Next.js, Remix, Gatsby), with one caveat: pre-React-18 apps rely on client hydration to generate the ids used in ARIA attributes.
Key Concepts
- SSR vs. static rendering: SSR renders HTML per-request on the server; static rendering pre-renders at build time — Radix supports both equally.
- Id hydration gotcha: on React <18, the ids Radix generates for
aria-* attribute wiring aren't available until client-side hydration completes, so screen-reader users' effective "time to interactive" tracks JS bundle download/parse time.
Key Takeaways
- On React 18+, this gotcha doesn't apply — ids can be generated server-side, removing the hydration dependency for ARIA correctness.
- If you're stuck on React <18 and serve assistive-technology users on slow connections, treat JS bundle size/load time as an accessibility metric, not just a performance one.
- No special Radix configuration is needed for SSR frameworks — it works with Next.js/Remix/Gatsby out of the box.
Connects To
- Accessibility: the ARIA-id mechanism affected by this hydration timing.