rendering-strategies

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

SEO Technical: Rendering Strategies

SEO技术：渲染策略

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.

用于指导为提升搜索引擎和AI爬虫可见性的渲染策略选择与优化。黄金法则：为实现最优SEO效果，页面数据和元数据必须在无需执行JavaScript的情况下，页面加载时即可获取。

调用规则：首次使用时，如果有帮助，可以先用1-2句话介绍本技能覆盖的内容及其重要性，再提供核心输出。后续使用或用户要求跳过说明时，直接输出核心内容即可。

Scope (Technical SEO)

适用范围（技术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

静态vs动态：SSG、SSR、ISR、CSR的适用场景
爬虫行为：Googlebot会渲染JS（存在延迟）；AI爬虫不会执行JS
组件层面：初始HTML中的内容；标签页、轮播图、导航栏
动态渲染：在无法实现完整SSR/SSG时为爬虫提供预渲染内容

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

方法	HTML生成时机	SEO效果	适用场景
SSG（静态站点生成）	构建阶段	✅ 最优	博客、文档、营销页面；内容更新频率低
SSR（服务端渲染）	请求触发时	✅ 良好	新闻、产品页面；动态、个性化内容
ISR（增量静态再生）	构建+重新验证时	✅ 良好	大型站点；需要定期更新的静态内容
CSR（客户端渲染）	浏览器端（JS加载后）	❌ 较差	仪表盘、账户页面；无需SEO的场景
动态渲染	按需为爬虫生成	✅ 备选方案	SPA；为爬虫提供预渲染内容，为普通用户提供SPA

SSG (Static Site Generation)

SSG（静态站点生成）

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

HTML在构建阶段生成，所有请求返回的HTML都相同。SEO效果最优：爬虫可立即获取完整HTML，性能最佳。

适用场景：博客、文档、营销页面、更新频率低的内容
支持框架：Next.js
```
getStaticProps
```
、Astro、Gatsby

SSR (Server-Side Rendering)

SSR（服务端渲染）

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

HTML在每次请求时生成。SEO效果良好：爬虫可获取完整HTML，支持动态、个性化内容。

适用场景：新闻、产品页面、用户专属内容
缺点：服务器负载更高；TTFB比SSG慢
支持框架：Next.js
```
getServerSideProps
```
、Remix

ISR (Incremental Static Regeneration)

ISR（增量静态再生）

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
```

构建时生成静态页面，页面可在一段时间后重新验证更新。SEO效果良好：兼具静态页面性能和内容新鲜度。

适用场景：大型站点（百万级页面）；内容定期更新的场景
支持框架：Next.js
```
getStaticProps
```
中的
```
revalidate
```
配置

CSR (Client-Side Rendering)

CSR（客户端渲染）

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

服务端返回最小HTML壳，内容在JS加载完成后在浏览器端渲染。不适用于SEO：爬虫可能获取到空内容，导致索引延迟或失败。

适用场景：仪表盘、账户页面、内部工具——无需搜索曝光的页面
避免用于：公开内容、营销页面、博客

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

向爬虫返回预渲染的HTML，向普通用户返回SPA。是无法实现完整SSR/SSG时的备选方案（例如遗留SPA迁移阶段）。

实现方式：检测爬虫用户代理；将请求路由到预渲染服务（例如Prerender.io）或无头渲染服务
适用场景：重度依赖JavaScript的站点；迁移过渡期；使用CSR的产品/文档站点
注意事项：Google允许该方案；预渲染内容需与用户实际体验一致

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.

爬虫类型	JavaScript支持	初始HTML内容权重
Googlebot	渲染JS（基于Chrome）；可能存在数天的队列延迟	权重最高；优先使用SSR/SSG
AI爬虫（GPTBot、ClaudeBot、PerplexityBot）	不执行JS	必须包含——CSR内容对其不可见
Bingbot	渲染JS	与Googlebot规则一致

AI爬虫：占Googlebot爬取量的28%左右。核心内容（文章、元数据、导航）必须包含在初始HTML中。AI爬虫优化可参考site-crawlability技能；GEO优化可参考generative-engine-optimization技能。

Component-Level: Content in Initial HTML

组件层面：初始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 `<details>` / `<summary>` or CSS show/hide
Carousel	All slides in initial HTML	Server-render; CSS/JS for show/hide only
Hero	Headline, CTA, LCP image in HTML	No JS-only rendering
Navigation	All nav links in first paint	No JS-injected menus for critical links

Recommendation: Server-render (SSR/SSG) all critical content; use JS only for interaction (show/hide, animation). Content loaded on click = not indexed.

Google不会模拟用户点击（标签页、轮播图、「加载更多」）。通过AJAX或用户交互加载的内容无法被爬虫发现。

组件	要求	实现方式
标签页/手风琴组件	所有标签内容在加载时已存在于DOM中	服务端渲染；使用 `<details>` / `<summary>` 标签或CSS控制显隐
轮播图	所有轮播内容在初始HTML中	服务端渲染；仅用CSS/JS控制显隐
Hero区	标题、CTA、LCP图片包含在HTML中	不要仅用JS渲染
导航栏	所有导航链接在首屏渲染时已存在	核心链接不要使用JS注入的菜单

建议：所有核心内容使用服务端渲染（SSR/SSG）；JS仅用于交互（显隐、动画）。点击后才加载的内容不会被索引。

Decision Guide

决策指南

Content type	Rendering	Reason
Blog, docs, marketing	SSG or ISR	Best SEO; fast; static
Product, news, dynamic	SSR	Fresh content; crawler-ready
Dashboard, account	CSR	No SEO; auth required
Legacy SPA	Dynamic rendering	Bridge until SSR/SSG migration

内容类型	渲染方案	原因
博客、文档、营销页面	SSG或ISR	SEO效果最好；加载快；静态内容
产品页、新闻、动态内容	SSR	内容新鲜；爬虫友好
仪表盘、账户页面	CSR	无需SEO；需要鉴权
遗留SPA	动态渲染	迁移到SSR/SSG前的过渡方案

Output Format

输出格式

Current setup: SSG, SSR, CSR, or hybrid
Recommendation: By page type
Component checks: Tabs, carousel, nav—content in initial HTML?
References: Next.js Rendering, Vercel SSR vs SSG

当前配置：SSG、SSR、CSR或混合方案
优化建议：按页面类型区分
组件检查：标签页、轮播图、导航——内容是否存在于初始HTML中？
参考资料：Next.js渲染指南、Vercel SSR vs SSG对比