Pagesmith.ai
Web Architecture

CSR vs SSG:
The Rendering Strategy Guide

Your choice of rendering strategy determines whether search engines can read your site, how fast it loads, and whether AI assistants can cite your content. Here's what you need to know.

When someone visits your website, how does the browser know what to display? The answer depends on your rendering strategy—and this choice has massive implications for SEO, performance, and AI search visibility.

Most AI website builders generate Client-Side Rendered (CSR) applications. This works fine for apps behind a login. But for marketing websites that depend on search traffic, it's a critical mistake.

The Two Approaches Visualized

Client-Side Rendering

1
Browser requests page
2
Server sends empty HTML + JS bundle
3
Browser downloads JavaScript
4
JavaScript executes and builds DOM
5
Content finally appears
Result: Crawlers see empty HTML. Users see loading spinners. Performance suffers.

Static Site Generation

1
Browser requests page
2
CDN serves complete HTML
3
Content appears immediately
Result: Crawlers see full content. Users see instant pages. Rankings improve.

What Search Engines Actually See

Search engine crawlers and AI assistants don't browse like humans. They read the raw HTML response. Here's the critical difference:

CSR Site - view-source
<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <div id="root"></div>
  <script src="/bundle.js"></script>
</body>
</html>

Googlebot sees: Empty page, no content

SSG Site - view-source
<!DOCTYPE html>
<html>
<head>
  <title>Pricing - My Website</title>
  <meta name="description" content="...">
</head>
<body>
  <nav>...</nav>
  <main>
    <h1>Simple Pricing</h1>
    <p>Start free, upgrade when ready</p>
    <div class="pricing-table">...</div>
  </main>
</body>
</html>

Googlebot sees: Complete content, ready to index

SEO Impact: The Data

Google's documentation confirms they can render JavaScript—but with important caveats:

Two-Wave Indexing

Google uses a two-phase approach: first crawl (HTML only) and second crawl (JavaScript rendered). The second phase happens in a separate render queue with no guaranteed timing—it can take hours, days, or weeks.

Render Budget

Google allocates limited render resources per site. Large CSR sites may not get fully rendered. Pages in Search Console showing "Discovered - currently not indexed" often suffer from render budget exhaustion.

JavaScript Errors

Any JavaScript error during rendering can prevent content from being indexed. Errors that work fine in browsers may fail in Googlebot's older Chrome version (typically months behind current release).

Performance: Core Web Vitals

Core Web Vitals are now a Google ranking factor. Here's how rendering strategy affects them:

Metric CSR (Client-Side) SSG (Static)
LCP Largest Contentful Paint 2.5s - 4.0s+ Waits for JS + API < 1.0s HTML ready on arrival
FID First Input Delay 100-300ms Main thread blocked < 50ms Minimal JS to execute
CLS Cumulative Layout Shift 0.1 - 0.25+ Content pops in < 0.05 Layout defined in HTML
TTFB Time to First Byte Fast But empty content Fast Full content from CDN

AI Search: The Hidden Crisis

Beyond Google, AI assistants like ChatGPT, Perplexity, and Claude are becoming major discovery channels. These systems face the same problem—but worse:

AI Crawlers Don't Execute JavaScript

Most AI web browsing tools read raw HTML without JavaScript execution. ChatGPT's browse feature, Perplexity's crawler, and other AI systems see CSR sites as completely empty. If AI can't read your site, it can't recommend your product.

0%

CSR content visible to ChatGPT browse

0%

CSR content visible to Perplexity

100%

SSG content visible to AI crawlers

When to Use Each Approach

CSR Makes Sense For:

  • Apps behind authentication (SEO irrelevant)
  • Internal dashboards and tools
  • Complex interactive applications
  • Prototypes and MVPs (non-production)
  • Real-time collaborative tools

SSG Makes Sense For:

  • Marketing websites
  • Landing pages
  • Blogs and content sites
  • Documentation
  • Any site where SEO matters
  • Any site where AI discovery matters
SSG-First by Design

How Pagesmith Solves This

Pagesmith generates static Astro sites that deliver pre-rendered HTML by default:

  • SSG by Default: Every page pre-rendered at build time. No JavaScript required to see content.
  • Islands Architecture: Interactive components hydrate on demand. Static content stays static.
  • SSR When Needed: Need dynamic content? Enable server-side rendering for specific pages.
  • SEO Built In: Sitemap, meta tags, Schema.org, OG images—all automatic.

Frequently Asked Questions

What is Client-Side Rendering (CSR)?
Client-Side Rendering (CSR) is a web rendering approach where the browser downloads a minimal HTML shell and JavaScript bundle, then builds the page content in the browser. The server sends little to no pre-rendered HTML—the page is constructed entirely by JavaScript after the initial load.
What is Static Site Generation (SSG)?
Static Site Generation (SSG) is a rendering approach where all HTML pages are pre-built at build time. When a user requests a page, the server delivers a complete HTML document immediately. No JavaScript is required to display the content—it's ready to render on arrival.
Which is better for SEO: CSR or SSG?
SSG is significantly better for SEO. Search engine crawlers see complete HTML content immediately with SSG, while CSR requires JavaScript execution to see content. Google's crawler can render JavaScript but often delays or deprioritizes CSR pages, leading to indexing issues and lower rankings.
Can Google index client-side rendered pages?
Yes, Google can render JavaScript and index CSR pages, but with significant caveats: rendering happens in a separate queue that can delay indexing by hours, days, or weeks; JavaScript errors can prevent content from being seen; and render budget limits how much Google will process. For time-sensitive or high-volume content, this delay is problematic.
What is the performance difference between CSR and SSG?
SSG typically delivers faster Largest Contentful Paint (LCP) because content is immediately available in the HTML response. CSR requires downloading, parsing, and executing JavaScript before content appears—adding significant delay. SSG sites often achieve sub-second LCP while CSR sites commonly exceed 2-3 seconds.

Related Topics