为 SEO 选择与优化页面渲染策略（SSG/SSR/ISR/…

当需要为页面选择或优化渲染方式，以保证搜索引擎和 AI 爬虫能抓取到内容时使用。

适用场景

解决思路

1. 遵循黄金法则：页面数据和 metadata 必须在页面加载时、无需执行 JavaScript 即可获得，才能获得最佳 SEO。
2. 按内容类型选择渲染方式：SSG 在构建时生成 HTML，最适合博客、文档、营销页等不常变动的内容；SSR 在请求时生成 HTML，适合新闻、产品页等动态或个性化内容；ISR 在构建时静态生成并可按周期重新验证，适合百万级页面且需定期更新的大型站点；CSR 由浏览器在 JS 加载后渲染，仅适合仪表盘、账户页等无需 SEO 的场景；动态渲染作为兜底方案，对爬虫返回预渲染 HTML、对用户返回 SPA。
3. SSG 实现：使用 Next.js 的 getStaticProps、Astro 或 Gatsby。
4. SSR 实现：使用 Next.js 的 getServerSideProps 或 Remix；注意服务器负载更高、TTFB 比 SSG 慢。
5. ISR 实现：在 Next.js 的 getStaticProps 中使用 revalidate。
6. 动态渲染实现：检测爬虫 user-agent，将其路由到预渲染服务（如 Prerender.io）或无头渲染；Google 允许此做法，但预渲染内容必须与用户体验一致。
7. 了解爬虫行为：Googlebot 会渲染 JS（Chrome 渲染，可能有数天队列），Bingbot 同样会渲染 JS；AI 爬虫（GPTBot、ClaudeBot、PerplexityBot）不执行 JS，因此关键内容（文章、meta、导航）必须出现在初始 HTML 中。
8. 注意 AI 爬虫约占 Googlebot 抓取量的 28%，需针对其优化（参见 site-crawlability 与 generative-engine-optimization）。
9. 组件级要求：Google 不会模拟用户点击（标签页、轮播图、加载更多），通过 AJAX 或交互加载的内容无法被索引。
10. Tabs/Accordion：所有标签内容在加载时就在 DOM 中，服务端渲染，使用 <details>/<summary> 或 CSS 显示/隐藏。
11. Carousel：所有幻灯片在初始 HTML 中，服务端渲染，CSS/JS 仅用于显示/隐藏。
12. Hero：标题、CTA、LCP 图片必须在 HTML 中，不能仅靠 JS 渲染。
13. Navigation：所有导航链接在首次绘制时即存在，关键链接不能用 JS 注入菜单。
14. 总体建议：对所有关键内容使用 SSR/SSG 服务端渲染，JS 仅用于交互（显示/隐藏、动画）；点击后才加载的内容不会被索引。
15. 按内容类型决策：博客/文档/营销页用 SSG 或 ISR；产品/新闻/动态内容用 SSR；仪表盘/账户页用 CSR；遗留 SPA 用动态渲染作为迁移到 SSR/SSG 前的过渡。
16. 输出时给出：当前设置（SSG、SSR、CSR 或混合）、按页面类型的建议、组件检查（标签页、轮播、导航内容是否在初始 HTML 中）以及参考链接。

适用边界 · 注意事项

• 当页面无需搜索可见性时（如仪表盘、账户页、内部工具），不必使用 SSG/SSR，CSR 即可。
• 当站点已完全采用 SSR/SSG 时，无需使用动态渲染这一兜底方案。
• 当问题属于抓取障碍而非渲染方式时，应改用 site-crawlability 技能。