# Client-side rendering

Category: [Rendering & JavaScript](https://seo-geo-glossary.com/en/glossary/category/rendering-javascript/) › [Rendering methods](https://seo-geo-glossary.com/en/glossary/category/rendering-javascript/rendering-methods/) · Also known as: CSR

**Client-side rendering (CSR)** is a technique in which JavaScript builds the HTML of a page in the browser. The abbreviation CSR has other meanings. This entry covers the web technique. CSR is opposed to server-side rendering (SSR), where the server generates the HTML, and both can be combined in one application (MDN).

## How does client-side rendering work?
A pure CSR app returns a minimal HTML document with an empty root element and a script, and the script creates the content through DOM manipulation. After the first load, route changes usually fetch only data. Single-page apps built with React, Vue or Svelte can also render on the server (MDN).

## What does it mean for SEO?
Google processes JavaScript sites in three phases: crawling, rendering and indexing. Pages with a 200 status code are queued for rendering unless a robots meta tag or header says not to index them. A headless Chromium then renders the page, and Google uses the rendered HTML for indexing. Google does not render JavaScript on pages or from files blocked by robots.txt. Google also writes that server-side or pre-rendering is still a great idea, since not all bots can run JavaScript. Some third-party articles claim that Google ranks CSR pages lower, a claim Google's documentation does not make.

To avoid soft 404 errors in client-side routing, Google suggests a JavaScript redirect to a URL that returns a 404, or `noindex` on error pages.

## Example
```html
<body>
  <div id="root">
  <script src="bundle.js"></script>
</body>
```

The raw HTML has no headings, text or links. They exist only in the rendered HTML, which the URL Inspection tool in Search Console can show.

## FAQ
**Is Next.js server-side or client-side rendered?**
It supports both. Its documentation describes fetching data on the client for CSR next to its server rendering methods.

## Rendering approaches compared

| Approach | Where and when is the HTML built? | Content in the delivered HTML? | Google's position |
|---|---|---|---|
| Client-side rendering (CSR) | in the browser with JavaScript; data fetching, templating and routing run on the client | no, only after JavaScript has run | Google renders pages with a 200 status in a separate step after crawling and still recommends server-side or pre-rendering because not all bots can run JavaScript |
| Server-side rendering (SSR) | on the server, for each request | yes | recommended by Google as a solution (instead of dynamic rendering) |
| Static site generation (SSG, static rendering) | at build time; usually one HTML file per URL ahead of time | yes | recommended by Google as a solution (instead of dynamic rendering) |
| Incremental static regeneration (ISR) | prerendered at build time; once the revalidation time has passed, the server regenerates the page in the background (framework feature, e.g. Next.js) | yes, from the cache; the older version is served until regeneration finishes | no specific statement from Google |
| Prerendering | at build time; the client-side app is run and its initial state saved as static HTML | yes (initial state) | Google says server-side or pre-rendering is “still a great idea” because it makes sites faster for users and crawlers |
| Dynamic rendering | a rendering server builds HTML only for detected crawlers; users get the client-side rendered version | only in the version served to crawlers | Google calls it a workaround and not a long-term solution; not cloaking as long as users and crawlers see similar content |

Sources: [web.dev: Rendering on the Web](https://web.dev/articles/rendering-on-the-web); [Google Search Central: Understand JavaScript SEO basics (last updated 2026-03-04)](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics); [Google Search Central: Dynamic rendering as a workaround (last updated 2025-12-10)](https://developers.google.com/search/docs/crawling-indexing/javascript/dynamic-rendering); [Next.js Docs: How to implement Incremental Static Regeneration (ISR)](https://nextjs.org/docs/app/guides/incremental-static-regeneration). Last checked: October 8, 2026

*Diagram: Where the HTML is created: CSR, SSR, SSG.* What matters for crawlers is whether the content is already in the first HTML response. Google recommends server-side rendering or prerendering and calls dynamic rendering a workaround, not a long-term solution.

## Not to be confused with

- [Server-side rendering](https://seo-geo-glossary.com/en/glossary/server-side-rendering/index.md): generates the HTML on the server, so headings, text and links are already in the first response.

## Related terms

- [Server-side rendering](https://seo-geo-glossary.com/en/glossary/server-side-rendering/index.md)
- [Rendering](https://seo-geo-glossary.com/en/glossary/rendering/index.md)
- [Dynamic rendering](https://seo-geo-glossary.com/en/glossary/dynamic-rendering/index.md)
- [Single-page application](https://seo-geo-glossary.com/en/glossary/single-page-application/index.md)
- [JavaScript SEO](https://seo-geo-glossary.com/en/glossary/javascript-seo/index.md)
- [Hydration](https://seo-geo-glossary.com/en/glossary/hydration/index.md)
- [Prerendering](https://seo-geo-glossary.com/en/glossary/prerendering/index.md)
- [Rendered HTML](https://seo-geo-glossary.com/en/glossary/rendered-html/index.md)

## Sources

- [Client-side rendering (CSR) – MDN Glossary](https://developer.mozilla.org/en-US/docs/Glossary/CSR)
- [Understand JavaScript SEO basics – Google Search Central](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics)
- [Client-side rendering of HTML and interactivity – web.dev](https://web.dev/articles/client-side-rendering-of-html-and-interactivity)
- [Client-side Rendering (CSR) – Next.js Docs](https://nextjs.org/docs/pages/building-your-application/rendering/client-side-rendering)

---

Last updated: October 8, 2026
URL: https://seo-geo-glossary.com/en/glossary/client-side-rendering/