关于 rendering-strategies
为技术 SEO 提供渲染策略选择与优化指导，面向需要提升搜索引擎和 AI 爬虫可见性的网站团队。内容涵盖页面渲染方式、爬虫行为及组件初始 HTML 检查。
主要功能
- 01比较 SSG、SSR、ISR 与 CSR
- 02按页面类型选择渲染方式
- 03说明搜索与 AI 爬虫行为
- 04检查组件初始 HTML 内容
- 05提供当前设置与建议的输出格式
适用场景
- 01为博客和文档选择渲染方案
- 02评估动态页面的 SEO 处理方式
- 03检查标签页和导航是否可被爬取
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/rendering-strategies确认已加载。
详细介绍
SEO 技术：渲染策略
指导如何选择和优化渲染策略，以提升搜索引擎和 AI 爬虫的可见性。黄金法则：为获得最佳 SEO 效果，页面数据和元数据必须在页面加载时即可获取，无需执行 JavaScript。
调用时机：首次使用时，如果有帮助，请先用 1–2 句话介绍此技能涵盖的内容及其重要性，然后提供主要输出。后续使用时，或用户要求跳过时，直接提供主要输出。
范围（技术 SEO）
- 静态与动态：SSG、SSR、ISR、CSR；各自的适用场景
- 爬虫行为：Googlebot 会渲染 JS（但有延迟）；AI 爬虫不会
- 组件级别：初始 HTML 中的内容；标签页、轮播图、导航
- 动态渲染：无法实现完整 SSR/SSG 时，为机器人预渲染
渲染方式
| 方式 | HTML 生成时间 | SEO | 最适用于 |
|---|---|---|---|
| SSG（静态站点生成） | 构建时 | ✅ 最佳 | 博客、文档、营销页面；内容很少变化 |
| SSR（服务端渲染） | 请求时 | ✅ 良好 | 新闻、产品页面；动态、个性化内容 |
| ISR（增量静态再生成） | 构建 + 重新验证 | ✅ 良好 | 大型站点；静态内容定期更新 |
| CSR（客户端渲染） | 浏览器中（JS 执行后） | ❌ 较差 | 仪表板、账户页面；无需 SEO |
| 动态渲染 | 按需为机器人生成 | ✅ 备用方案 | SPA；为爬虫预渲染，为用户提供 SPA |
SSG（静态站点生成）
在构建时生成 HTML；每次请求返回相同的 HTML。最适合 SEO：爬虫可立即收到完整 HTML；性能最佳。
- 适用场景：博客、文档、营销页面、变化不频繁的内容
- 框架：Next.js
getStaticProps、Astro、Gatsby
SSR（服务端渲染）
每次请求时生成 HTML。适合 SEO：爬虫可收到完整 HTML；支持动态、个性化内容。
- 适用场景：新闻、产品页面、特定用户的内容
- 权衡：服务器负载更高；TTFB 慢于 SSG
- 框架：Next.js
getServerSideProps、Remix
ISR（增量静态再生成）
构建时生成静态页面；页面可在一段时间后重新验证。适合 SEO：兼具静态性能与内容新鲜度。
- 适用场景：大型站点（数百万个页面）；内容定期更新
- 框架：Next.js
getStaticProps中的revalidate
CSR（客户端渲染）
服务器发送最精简的 HTML 外壳；JS 加载后，内容才在浏览器中渲染。不适合 SEO：爬虫可能看到空内容；索引延迟或失败。
- 适用场景：仪表板、账户页面、内部工具——无需搜索可见性
- 避免用于：公开内容、营销页面、博客
动态渲染
向爬虫提供预渲染的 HTML；向用户提供 SPA。在无法实现完整 SSR/SSG 时作为备用方案（例如，迁移旧版 SPA）。
- 方式：检测爬虫的用户代理；将请求路由到预渲染服务（例如 Prerender.io）或无头渲染
- 适用场景：JavaScript 密集型站点；迁移期间；使用 CSR 的产品/文档
- 注意：Google 允许此做法；预渲染内容应与用户体验一致
爬虫行为
| 爬虫 | 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。
组件级：初始 HTML 中的内容
Google 不会模拟用户点击（标签页、轮播、“加载更多”）。通过 AJAX 或交互加载的内容无法被发现。
| 组件 | 要求 | 实现方式 |
|---|---|---|
| 标签页 / 手风琴 | 加载时所有标签页内容都在 DOM 中 | 服务端渲染；使用 <details>/<summary> 或 CSS 显示/隐藏 |
| 轮播 | 初始 HTML 中包含所有幻灯片 | 服务端渲染；仅使用 CSS/JS 控制显示/隐藏 |
| 主视觉区 | HTML 中包含标题、CTA、LCP 图片 | 不要仅通过 JS 渲染 |
| 导航 | 首次绘制时包含所有导航链接 | 不要通过 JS 注入关键链接菜单 |
建议：对所有关键内容进行服务端渲染（SSR/SSG）；JS 仅用于交互（显示/隐藏、动画）。点击后加载的内容不会被编入索引。
决策指南
| 内容类型 | 渲染方式 | 原因 |
|---|---|---|
| 博客、文档、营销内容 | SSG 或 ISR | SEO 效果最佳；速度快；静态 |
| 产品、新闻、动态内容 | SSR | 内容新鲜；适合爬虫 |
| 仪表板、账户 | CSR | 无需 SEO；需要身份验证 |
| 旧版 SPA | 动态渲染 | 迁移到 SSR/SSG 前的过渡方案 |
输出格式
- 当前设置：SSG、SSR、CSR 或混合
- 建议：按页面类型提供
- 组件检查：标签页、轮播、导航——内容是否在初始 HTML 中？
- 参考资料：Next.js 渲染、Vercel SSR 与 SSG 对比
相关技能
- site-crawlability：AI 爬虫优化；关键内容使用 SSR；URL 管理
- generative-engine-optimization：GEO；AI 爬虫不会执行 JS
- core-web-vitals：LCP；首屏内容使用 SSR/SSG；客户端渲染会影响 LCP
- mobile-friendly：移动优先索引；内容一致性
- tab-accordion：加载时内容位于 DOM 中；服务端渲染标签页
- carousel：内容位于初始 HTML 中；服务端渲染幻灯片
- hero-generator：主视觉区位于初始 HTML 中；避免仅通过 JS 渲染
- navigation-menu-generator：导航在首次绘制时呈现；不要仅通过 JS 渲染菜单