Client-Side Rendering (CSR)
A rendering method where the browser downloads a minimal HTML page and uses JavaScript to render the rest of the content.
Detailed Explanation
CSR is common in Single Page Applications (SPAs). The server sends a nearly empty HTML file and a bundle of JavaScript. The browser then executes that script to build the UI and fetch data. While CSR provides a very smooth, app-like experience once loaded, it can suffer from slower initial load times and more complex SEO requirements compared to SSR.
Quick Summary
Client-side rendering ships a tiny HTML shell plus a JavaScript bundle that builds the UI in the browser. It maximises post-load interactivity but pays an upfront cost in time-to-content and search-engine visibility.
Key Takeaways
- The initial HTML is nearly empty, the user sees a blank screen until JavaScript downloads and executes.
- Once running, navigation can be instant because the browser never makes a full page reload.
- CSR is the natural fit for app-like experiences (dashboards, editors) where users stay engaged for minutes.
- Bundle size directly determines time-to-interactive, every kilobyte costs perceived performance.
- Search engines can index CSR pages, but reliably only when content does not depend on user interaction.
When to use it
- Internal admin tools and SaaS dashboards behind a login wall where SEO is irrelevant.
- Highly interactive apps (drawing tools, code editors, games) that need rich state on the client.
- Apps already invested in a SPA framework and serving a stable set of authenticated users.
- Sites where backend rendering capacity is constrained and static hosting plus client logic is cheaper.
Common Mistakes
- Using CSR for public marketing pages and then losing search traffic because crawlers see an empty shell.
- Shipping a 1MB+ JavaScript bundle on a mobile-first site, blowing up LCP and INP.
- Forgetting loading states, a blank page during the JS download feels broken to first-time visitors.
- Ignoring code-splitting and serving every route's JS up front instead of lazy-loading on demand.
Client-Side Rendering (CSR), Frequently Asked
When should I choose CSR over SSR?
Choose CSR when SEO is not a factor (auth-walled apps), user sessions are long, and interactivity dominates. Choose SSR or SSG when the first impression and search visibility matter more than client-side dynamism.
Does CSR work offline?
Only with a service worker that caches both the shell and the data layer. CSR by itself still needs a network round-trip for the JS bundle and any API calls it makes.
Are Google crawlers good at indexing CSR pages?
Google has improved significantly, but indexing is delayed (the page enters a render queue) and other crawlers (Bing, social previews, AI bots) are much weaker. SSR or pre-rendering remains the safe default for public content.