CSR: When the Browser Builds the Page
Client-side rendering (CSR) builds page content in the browser with JavaScript, which complicates crawling and first paint unless handled carefully.
Client-Side Rendering (CSR) is rendering pages in the browser with JavaScript.
What It Is
Client-side rendering, or CSR, builds the page in the browser using JavaScript after the initial shell arrives.
The server sends a minimal document and the app fills in the rest.
It is common in single-page applications.
Why It Matters
- It powers rich, app-like interfaces.
- It scales easily because the server does less.
- It can feel instant once loaded.
- But content stays invisible until scripts run.
- Crawlers handle it far better than before, yet it still risks gaps.
How to Do It
- Render critical content as early as possible.
- Make sure crawlers and users get the same content.
- Use prerendering for your most important pages.
- Keep the JavaScript payload lean.
- Test each route with scripts disabled.
- Add fallback HTML where it matters.
What to Avoid
- Waiting on slow APIs before showing anything.
- Rendering the app inside opaque frames.
- Serving different content to crawlers.
- Ignoring the blank-first-paint experience.
- Assuming Google will figure everything out.
Common Mistakes
- Blocking rendering on a huge bundle.
- Routes that exist only after JavaScript runs.
- No fallback for disabled JavaScript.
- Sessions where clicks vanish.
- Forgetting the slow network experience.
Before: a travel site shows a spinner until a script loads.
After: the team prerenders the top pages and trims the bundle.
The result: content appears faster and crawlers see it.
The lesson: client rendering is fine, but the content cannot be an afterthought.
Quick Tip
If you build with CSR, treat the empty shell as a risk and give search the content it needs before the scripts finish.
Frequently Asked Questions
CSR, in Short
CSR builds the page where the user sits.
Keep the content close to the first paint.
Prerender what matters and the approach can still rank.