Client-side rendering (CSR)

What is client-side rendering?

Client-side rendering (CSR) is a way of building web pages where the server sends a minimal HTML shell and JavaScript, and the browser then fetches data and builds the page itself. Single-page applications made with React, Vue or Angular without a server-rendering layer work this way.

CSR makes moving between views feel fast once the app has loaded, because the browser swaps content in place instead of loading a new document. The cost comes on the first load: the browser must download, parse and run the JavaScript, and often call an API, before anything useful appears.

For search, the important point is that the first HTML response holds little or no content. A crawler only sees the page after rendering it, which Google does in a separate step and many other crawlers do not do at all.

Why client-side rendering matters for SEO

Google can index client-rendered pages, but each one depends on rendering working: scripts must load, APIs must respond in time and nothing must error. When it fails, Google indexes a blank or partial page. Links that only exist after rendering are found later than links in the HTML.

Crawlers that do not run JavaScript, including many AI crawlers and link-preview bots, see only the shell. CSR also tends to delay Largest Contentful Paint, because the main content cannot paint until the JavaScript has run.

CSR is a fine choice for logged-in dashboards, account areas and tools that do not need to rank. For public pages that should rank, server-side rendering or static generation is safer.

How to make client-rendered pages indexable

1. Move public, rankable pages to server-side rendering or static generation where your framework allows it.
2. If you must keep CSR, put the title, meta description and canonical in the initial HTML, and render real <a href> links.
3. Give every view its own URL with the History API, and return a 404 status, or add a noindex tag, for routes that do not exist.
4. Do not block JavaScript, CSS or API endpoints in robots.txt.
5. Check the rendered HTML with the URL Inspection tool in Search Console to confirm Google sees the content.

Client-side rendering example

<!doctype html>
<html lang="en">
  <head>
    <title>Example</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="/bundle.js"></script>
  </body>
</html>