How it works
With CSR the first HTML is little more than a script tag and an empty container. The browser downloads the JavaScript bundle, runs it, fetches data from an API and only then draws the page. After that first load, moving between screens is quick, because only data travels, not whole pages.
The costs come at the start: visitors see a blank screen or a spinner until the bundle has loaded, slow phones feel it most, and search engines and link previews may see little content. Google can run JavaScript, but most social media crawlers cannot. CSR is the default for single-page apps built with Vite, and frameworks let individual routes opt into it.
Client-side rendering (CSR) pros and cons
Pros
- Fast, app-like navigation once the app has loaded
- Simple hosting: static files on any CDN
- No server rendering to pay for or maintain
- Clear split between the frontend and the API
Cons
- Blank screen or spinner until the JavaScript loads
- Weak for SEO and link previews without extra work
- Large bundles hurt slow phones and networks
When to use Client-side rendering (CSR)
Pick it when
- Dashboards, admin panels and tools behind a login
- Highly interactive apps such as editors and design tools
Skip it when
- Public pages that must rank in search or share well on social media
- Many visitors arrive on slow phones or networks
Client-side rendering (CSR) vs the alternatives
Related terms
More in Rendering and architecture
Where pages are built