Client-side rendering is a way of building web pages where the server sends a minimal HTML document and a JavaScript bundle, and the browser then fetches data and builds the visible page. Single-page apps built with React, Vue or Angular often work this way by default. For SEO, the risk is that crawlers which do not run JavaScript, or run it later, see an empty or partial page.
How client-side rendering works
The first HTML response contains little more than a root element and script tags. The browser downloads the scripts, runs them, calls APIs for data, and inserts the content into the page. Navigation between pages often happens in the browser too, using the History API instead of new server requests.
<!doctype html>
<html>
<head><title>Loading...</title></head>
<body>
<div id="root"></div>
<script src="/assets/app.js"></script>
</body>
</html>What it means for search and AI crawlers
Google can render JavaScript, but rendering happens in a second step after crawling and depends on the scripts loading and running without errors. Titles, canonicals or noindex tags set by JavaScript may be read later than you expect, and content behind clicks or failed API calls is not seen at all.
Many other crawlers, including several AI crawlers, are reported to fetch HTML without running JavaScript, though vendors do not always document this. For them, a client-rendered page may look empty. Serving the important content in the initial HTML removes that uncertainty.
When client-side rendering is fine
Logged-in app screens, dashboards and settings pages do not need to rank, so client-side rendering suits them. Problems arise when marketing pages, docs or blog posts are built the same way because they share a codebase with the app. The usual fix is to render public pages on the server or at build time and keep CSR for the product itself.
Example
A docs site that looked empty to crawlers
Graphwick, an API monitoring tool, builds its docs as a React single-page app. URL Inspection's rendered HTML shows the content, but a plain HTML fetch returns only an empty div, and several AI assistants cannot quote the docs. Moving the docs to static site generation puts the full text in the first response without changing how the pages look.
Common mistakes
Setting the canonical or noindex with JavaScript only
Put indexing signals in the server HTML. If the raw HTML says noindex, Google may never render the page to see a script removing it.
Using click handlers instead of links
Crawlers follow a elements with href attributes. Navigation built on buttons or onClick handlers can leave pages undiscovered.
Questions
No. It is not a penalty. The risk is practical: content may be indexed late, partially or not at all if rendering fails, and crawlers that skip JavaScript see less.
Compare View Source (the raw HTML) with the rendered HTML shown in Search Console's URL Inspection tool. Anything that only appears in the rendered version depends on JavaScript.
