Rendering Strategies

# SEO Technical: Rendering Strategies

Guides rendering strategy selection and optimization for search engine and AI crawler visibility. **Golden rule**: Page data and metadata must be available on page load without JavaScript execution for optimal SEO.

**When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## Scope (Technical SEO)

- **Static vs dynamic**: SSG, SSR, ISR, CSR; when to use each
- **Crawler behavior**: Googlebot renders JS (with delays); AI crawlers do not
- **Component-level**: Content in initial HTML; tabs, carousels, nav
- **Dynamic rendering**: Prerender for bots when full SSR/SSG is not feasible

## Rendering Methods

| Method | When HTML generated | SEO | Best for |
|--------|---------------------|-----|----------|
| **SSG** (Static Site Generation) | Build time | ✅ Best | Blog, docs, marketing pages; content rarely changes |
| **SSR** (Server-Side Rendering) | Request time | ✅ Good | News, product pages; dynamic, personalized content |
| **ISR** (Incremental Static Regeneration) | Build + revalidate | ✅ Good | Large sites; static with periodic updates |
| **CSR** (Client-Side Rendering) | Browser (after JS) | ❌ Poor | Dashboards, account pages; no SEO needed |
| **Dynamic rendering** | On-demand for bots | ✅ Fallback | SPAs; prerender for crawlers, SPA for users |

### SSG (Static Site Generation)

HTML generated at build time; same HTML for every request. **Best for SEO**: crawlers receive full HTML immediately; optimal performance.

- **Use when**: Blog, docs, marketing pages, content that doesn't change frequently
- **Framework**: Next.js `getStaticProps`, Astro, Gatsby

### SSR (Server-Side Rendering)

HTML generated on each request. **Good for SEO**: crawlers receive complete HTML; supports dynamic, personalized content.

- **Use when**: News, product pages, user-specific content
- **Tradeoff**: Higher server load; slower TTFB than SSG
- **Framework**: Next.js `getServerSideProps`, Remix

### ISR (Incremental Static Regeneration)

Static at build; pages can revalidate after a period. **Good for SEO**: combines static performance with freshness.

- **Use when**: Large sites (millions of pages); content updates periodically
- **Framework**: Next.js `revalidate` in `getStaticProps`

### CSR (Client-Side Rendering)

Server sends minimal HTML shell; content renders in browser after JS loads. **Not for SEO**: crawlers may see empty content; indexing delays or failures.

- **Use when**: Dashboards, account pages, internal tools—no search visibility needed
- **Avoid for**: Public content, marketing pages, blog

### Dynamic Rendering

Serve prerendered HTML to crawlers; serve SPA to users. **Fallback** when full SSR/SSG is not feasible (e.g. legacy SPA migration).

- **How**: Detect crawler user-agent; route to prerender service (e.g. Prerender.io) or headless render
- **When**: JavaScript-heavy sites; migration period; product/docs with CSR
- **Note**: Google permits this; prerendered content should match user experience

## Crawler Behavior

| Crawler | JavaScript | Content in initial HTML |
|---------|------------|-------------------------|
| **Googlebot** | Renders JS (Chrome); may have multi-day queue | Full weight; SSR/SSG preferred |
| **AI crawlers** (GPTBot, ClaudeBot, PerplexityBot) | Do **not** execute JS | **Required**—CSR content invisible |
| **Bingbot** | Renders JS | Same as Googl