Overview
This page is the atomic definition. Trade-offs between rendering modes live at nextjs and react.
Definition
Client-Side Rendering (CSR) delivers a nearly empty HTML document from the server, then relies on JavaScript executing in the browser to fetch data and render the page. The browser receives something like <div id="root"></div> and a script tag; React (or Vue, Svelte, etc.) takes over and builds the full DOM via the virtual-dom reconciliation cycle. CSR was the default model for Create React App and single-page applications (SPAs). The advantages are simple deployment (serve static files from any CDN) and snappy client-side navigation after the initial load. The drawbacks are poor web-vitals, especially LCP, because the browser must download, parse, and execute the JavaScript bundle before painting any meaningful content. Search engines can index CSR pages but often miss dynamically injected content. CSR should be reserved for pages behind authentication where SEO is irrelevant, or for sub-sections of a page that are always below the fold.
When it applies
Use CSR for authenticated dashboards, data-heavy tools, and interactive applications where SEO is not required and the user will stay on the page long enough to amortize the initial load cost. Avoid CSR for landing pages, blog posts, or any content that must be indexed.
Example
A React SPA for an internal analytics tool serves one index.html from S3. The browser fetches the 300 KB bundle, calls the API, and renders charts. No SSR is needed because the tool is behind login and never crawled.
Related concepts
- ssr - renders HTML on the server per request; better for SEO and initial paint.
- ssg - pre-renders at build time; best performance for public content.
- hydration - the process of attaching event handlers to server-rendered HTML, conceptually the inverse of pure CSR.
- web-vitals - CSR typically scores poorly on LCP due to render-blocking JavaScript.
- virtual-dom - the in-memory tree CSR uses to compute DOM updates.
Citing this term
See CSR (llmbestpractices.com/glossary/csr).