{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreigczsnrvj7ukuutidcjrslgncvbk3m2ujcoxx5uup4rtbv5u2ue7q",
    "uri": "at://did:plc:5sgu76a53rz3n6unbykmovqy/app.bsky.feed.post/3mlpohuuocsc2"
  },
  "description": "Client-Side Rendering (CSR) is the pattern where the server returns a minimal HTML shell and bundle of JavaScript, and the browser fetches data and builds the entire UI client-side. Single-page applications (SPAs) built with React, Vue, or Angular without an SSR framework default to CSR.\n\n\nStrengths\n\n * Rich interactivity. The whole app runs in the browser; transitions and state changes are instant after the initial load.\n * Simpler deployment. Static files on a CDN; no Node or backend rendering",
  "path": "/engineering-glossary/csr-client-side-rendering/",
  "publishedAt": "2026-05-08T00:00:00.000Z",
  "site": "https://sahilkapoor.com",
  "tags": [
    "SSR",
    "React",
    "Vue",
    "Angular",
    "Vite"
  ],
  "textContent": "**Client-Side Rendering (CSR)** is the pattern where the server returns a minimal HTML shell and bundle of JavaScript, and the browser fetches data and builds the entire UI client-side. Single-page applications (SPAs) built with React, Vue, or Angular without an SSR framework default to CSR.\n\n## Strengths\n\n  * **Rich interactivity.** The whole app runs in the browser; transitions and state changes are instant after the initial load.\n  * **Simpler deployment.** Static files on a CDN; no Node or backend rendering needed.\n  * **Clear separation.** Front-end and back-end are independent; the API does data, the SPA does UI.\n\n\n\n## Weaknesses\n\n  * **Slow first paint.** Users wait for JavaScript to download and execute before seeing content.\n  * **SEO friction.** Crawlers run JavaScript, but slowly and inconsistently; metadata and OG tags are often blank in initial HTML.\n  * **Heavy client work.** Mobile and low-end devices pay the cost.\n\n\n\n## When CSR is the right choice\n\n  * Internal tools and dashboards behind authentication where SEO does not matter\n  * Heavily interactive applications (editors, design tools, IDEs)\n  * Cases where the user is logged in and personalisation requires client-side state anyway\n\n\n\n🔗\n\n**Related Terms**\nSSR, React, Vue, Angular, Vite.",
  "title": "Client-Side Rendering (CSR)",
  "updatedAt": "2026-05-13T19:14:08.171Z"
}