- 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 Googlebot
- AI crawlers
- ~28% of Googlebot's crawl volume. Critical content (articles, meta, nav) must be in initial HTML. See site-crawlability for AI crawler optimization; generative-engine-optimization for GEO. Component-Level: Content in Initial HTML Google does not simulate user clicks (tabs, carousels, "Load more"). Content loaded via AJAX or on interaction is not discoverable. Component Requirement Implementation Tabs / Accordion All tab content in DOM at load Server-render; use
/