Client-Side Rendering (CSR)

Client-side rendering (CSR) means the browser builds a page’s content using JavaScript, after receiving a mostly empty HTML shell from the server. It can create fast, app-like experiences, but it makes search engines do extra work before they can see the content.

Written by Paul Hoda, SEO consultant since 2005. Last updated 8 November 2026.

How client-side rendering works

With CSR, the server sends a basic HTML file containing little more than a container element and links to JavaScript files. The browser downloads and runs the JavaScript, which fetches data and builds the page in the browser.

Many single page applications built with React, Vue or Angular work this way by default, unless they add server rendering.

How Google handles CSR pages

Googlebot uses an up-to-date version of Chromium, so it can run modern JavaScript. Google describes its process in stages: crawling the HTML, queuing the page for rendering, then indexing the rendered result. Google has said the rendering queue is often fast, but it still adds a step that can fail or be delayed.

Other systems are less capable. Many AI crawlers, social media preview bots and some smaller search engines do not run JavaScript at all. For them, a pure CSR page can look empty.

SEO risks of CSR

  • Missing content: if scripts fail, time out or are blocked by robots.txt, the rendered page may lack text.
  • Hidden links: navigation built with click handlers instead of <a href> links cannot be followed by crawlers.
  • Metadata problems: title tags, canonicals and meta robots tags set only by JavaScript may be missed or conflict with the initial HTML.
  • Slower content display: users wait for JavaScript before seeing anything, which can hurt Core Web Vitals.
  • Soft errors: missing pages may return a 200 status with an error message, creating soft 404s.

How to make CSR sites more SEO-friendly

  1. Where possible, move key pages to server-side rendering or static generation. Most modern frameworks support this.
  2. Use real anchor links with href attributes for all navigation.
  3. Give every view its own URL using the History API, not hash fragments.
  4. Put the title, meta description, canonical and robots tags in the initial HTML where you can.
  5. Return correct HTTP status codes, or add a noindex tag to error views.
  6. Do not block JavaScript, CSS or API endpoints needed for rendering in robots.txt.
  7. Test with the URL Inspection tool and compare the rendered HTML with what users see.

When CSR is fine

CSR is perfectly acceptable for areas that do not need to rank: logged-in dashboards, account pages, checkouts and internal tools. Many sites use a hybrid approach, server rendering public marketing and product pages while keeping the app itself client-side. That gives search engines reliable content without giving up the interactive experience. JavaScript SEO covers the wider set of checks.

Key Takeaways

  • Client-side rendering builds page content in the browser with JavaScript.
  • Google can render JavaScript, but it adds an extra step that can fail or lag.
  • Many AI crawlers and preview bots do not run JavaScript at all.
  • Use real links, unique URLs and correct status codes on CSR sites.
  • Server-render pages that need to rank and keep CSR for app areas.

Related Terms

Want to know where your site stands? Book a free SEO health check, or keep learning in the SEO Encyclopedia.