CSR, SSR, SSG & Hydration
Client-side rendering sends JavaScript that constructs the UI in the browser. Server-side rendering produces HTML on the server so the browser can receive meaningful markup earlier. Static generation produces HTML ahead of time for suitable content.
Hydration connects server-rendered markup to client-side React behavior. The server output and the initial client render must agree closely; mismatches can create warnings or incorrect UI.
Choose rendering strategies based on data freshness, personalization, SEO requirements, infrastructure, and interaction needs rather than treating one strategy as universally superior.
Rendering Strategies
Key Takeaways
- CSR, SSR, and SSG solve different constraints.
- Hydration requires compatible server and client output.
- Rendering strategy is an architectural decision.