Client-Side Rendering (CSR)

Client-side rendering is the pattern where the server ships a near-empty HTML shell and the browser's JavaScript renders the actual page content after load. Single-page applications built with vanilla React, Vue without a server framework, or older Angular setups default to CSR. The first byte arrives quickly but the user sees nothing until the JavaScript bundle downloads, executes, fetches data, and writes the DOM. For users on slow networks or older devices, the experience can be poor. For scraping, CSR pages are the hard case. A plain HTTP fetch returns the empty shell with no content. Extraction requires running the JavaScript in a headless browser, waiting for network activity to settle, and then reading the rendered DOM. Cost goes up 10–100x and reliability goes down because of timing-dependent rendering. The same problem applies to AI Overview and AI search systems: many pure-CSR sites are effectively invisible to AI crawlers that do not execute JavaScript. For AI builders, the takeaway is that CSR is the wrong default for any content you want indexed or cited by AI. Modern frameworks (Next.js with App Router, Astro, SolidStart) make SSR or static export the simple path; reaching for pure CSR should require a positive justification. If you have an existing CSR app, prerendering tools (Prerender.io, Rendertron, the Vite SSG plugin) can produce SSR output for crawler-targeted routes.