Frontend System Design: Rendering Patterns — CSR, SSR, CSR+SSR (Universal), Static Rendering & Prerendering

Rendering Patterns — CSR, SSR, CSR+SSR (Universal), Static Rendering & Prerendering A deep-dive into how , when , and why each rendering strategy exists, the request/response flow for every pattern, and concise code samples. Table of Contents Client Side Rendering (CSR) Server Side Rendering (SSR) Universal / Isomorphic Rendering (CSR + SSR) Static Site Generation (SSG Static Rendering) Prerendering Comparison Matrix Decision Flowchart When to Pick What 1. Client Side Rendering (CSR) What Is It? The server sends a minimal, empty HTML shell plus a JavaScript bundle. The browser downloads, parses, and executes JS to build the DOM, fetch data, and paint pixels — all on the client. How It Works — Step by Step Browser Server / CDN | | | 1. GET /dashboard | |------------------------------------>| | | | 2. Returns bare HTML shell | | (empty <div id="root">) | |<------------------------------------| | | | 3. Browser parses HTML, | | finds <script src="bundle.js"> | | | | 4. GET /bundle.js (+ c