Pagesmith
Technical SEO

Client-Side Rendering SEO

Google can index client-rendered pages. The risk comes from making important content depend on a separate rendering step.

How Client-Side Rendering Works

Client-side rendering (CSR) is an architecture where the browser, not the server, builds the page content. Here's the typical flow:

1

User Requests Page

Browser sends request to server for yoursite.com/page

2

Server returns an app shell

Server sends minimal HTML with <div id="root"></div> and a JavaScript bundle

3

Browser Downloads JavaScript

Browser downloads, parses, and runs the JavaScript needed for the page

4

Browser builds the content

JavaScript renders the actual page content into the DOM. User sees the page.

The SEO Problem

A crawler receives the app shell first. Google can then render the page, but important content depends on that extra step working. Pre-rendering includes the content in the response from the start.

How Google Handles JavaScript

Google processes JavaScript pages in crawl, render, and index stages. That sequence explains the extra dependency created by CSR.

Crawl

  • Googlebot fetches the raw HTML
  • May receive only an app shell
  • Reads status codes, links, and available HTML
  • Can index links and basic metadata

Render

  • Page enters render queue
  • Runs JavaScript in Google's web rendering service
  • Uses the rendered HTML for indexing
  • Can be affected by errors or blocked resources

Why This Matters

  • Browser-created content cannot be processed until rendering finishes
  • Links created in JavaScript may be discovered later than links in the response
  • Errors and failed requests can leave content out of the rendered HTML

Make access simple for other crawlers

AI search services use their own crawlers, robots rules, and access systems.

Perplexity AI

Allow PerplexityBot and keep key content available in the response.

ChatGPT

Allow OAI-SearchBot and avoid login, WAF, or script barriers around public content.

AI Overviews

Google says the same Search SEO guidance applies to its AI features.

Pre-rendering does not secure a citation. It removes one technical dependency by putting the main content in the response. Relevance, source quality, crawl access, and each service's selection systems still matter.

CSR vs SSG vs SSR: SEO Impact

The main difference is when useful HTML becomes available.

Comparing the three main rendering architectures.

Aspect CSR SSG SSR
Initial HTML Often an app shell Complete Complete
Google Indexing Needs rendering Content available Content available
Crawler dependency JavaScript required HTML available HTML available
Core Web Vitals App dependent Often simpler Implementation dependent
Server Load Low None High
Best For Apps (internal) Marketing, blogs Dynamic content

Common CSR Tools (and Their SEO Risks)

These tools default to client-side rendering unless configured otherwise.

Create React App

Pure CSR, no built-in SSR/SSG. Avoid for any SEO-sensitive content.

CSR only

Vite (React/Vue)

Default templates are CSR. Requires additional setup for SSR.

CSR default

Vue CLI

CSR by default. Nuxt adds SSR/SSG, but requires migration.

CSR default

Angular

CSR by default. Angular Universal adds SSR but adds complexity.

CSR default

Skip CSR Problems Entirely

Pagesmith generates static Astro sites that avoid CSR's SEO limitations by design. The main content is in the initial HTML, so crawlers do not need JavaScript to read it.

  • Static HTML Generation

    The main content is present in the HTML response.

  • AI Search Ready

    Public content does not depend on crawler-side JavaScript.

  • No rendering dependency

    Google can process the main content without first creating it in the browser.

What Crawlers See

<!DOCTYPE html>
<html>
<head>
  <title>Your Page Title</title>
  <meta name="description" content="...">
</head>
<body>
  <!-- All content here from first byte -->
  <h1>Your Headline</h1>
  <p>Your content is immediately visible...</p>
  <section>
    <h2>Section Title</h2>
    <p>More visible content...</p>
  </section>
</body>
</html>

Build SEO-First, Not SEO-Last

Stop fighting CSR's limitations. Generate static sites with AI that work with pre-rendered content and the standard technical SEO foundations.

Client-Side Rendering SEO FAQ

What is client-side rendering (CSR)?

Client-side rendering (CSR) builds page content in the browser after JavaScript loads. Some CSR setups send only a small app shell in the first HTML response. Others include useful content before the client takes over.

Why is client-side rendering bad for SEO?

CSR can cause SEO problems when the main content is missing from the initial HTML. Google can run JavaScript, but the page must go through its rendering stage before that content can be processed. Script errors, blocked resources, and failed API calls can also change the rendered result.

Can Google index client-side rendered pages?

Yes. Google crawls, renders, and indexes JavaScript pages. If content is created in the browser, Google needs the rendering stage to see it. Check the rendered HTML in Search Console and make sure important content, links, metadata, and status codes do not depend on a fragile client-side request.

What's the alternative to client-side rendering?

The main alternatives are static site generation and server-side rendering. Static generation builds HTML before deployment and suits content that changes on publish. Server rendering creates HTML per request and suits personalized or frequently changing pages.

How do AI search systems handle client-side rendered sites?

AI search services use different crawlers and access rules. Pre-rendered HTML makes the main content available without relying on crawler-side JavaScript. The page must also be public, allowed in crawl controls, and useful enough to be selected as a source.

Related Technical SEO