React 静态站点生成

要解决的核心问题

很多团队在构建文档、博客或营销类内容型站点时，容易陷入「SPA 万能」的误区：直接用客户端渲染，导致首屏依赖 JS 才能显示内容，SEO 爬虫难以抓取有效信息；或是错把 SSG 当 SPA 用，运行时才发起数据请求，彻底失去静态化的优势。同时，构建产物的托管、资源优化等细节也常因缺乏明确标准被忽略。

技能的核心能力与工作逻辑

这个技能以「内容型优先静态化，交互型用 SPA」为原则，分三层解决问题：

1. 渲染策略选型：根据业务场景给出明确建议——文档/博客选 SSG（构建期生成 HTML，兼顾 SEO 与首屏性能）；强交互后台选 SPA/CSR（无需 SEO，关注交互体验）；混合场景用 ISR/SSR（部分动态内容按需渲染）。
2. 落地步骤标准化：

- 框架选择：优先 Next.js（App Router 静态导出）或 Astro（嵌入 React 组件）；
- 数据获取：在构建期完成数据拉取，避免运行时请求阻塞首屏；
- 路由预生成：用 getStaticPaths 提前生成所有静态路由对应的 HTML；
- 资源托管：静态资源走 CDN，构建产物直接托管至静态服务器。

1. 质量检查与避坑：提供落地检查清单——验证构建后生成 .html 文件、首屏无需 JS 即可见内容、配置预渲染的 meta/OG 标签、添加 sitemap/robots；同时指出常见陷阱，如客户端取数丢失 SEO、构建期请求过多拖慢发布（建议增量构建/缓存）、忽视图片优化（建议用 next/image）。

适用边界与注意点

技能输出为前端工程参考，不替代团队架构评审。具体选型需结合团队技术栈与业务场景：比如高频更新的内容站可补充增量静态再生（ISR）策略，而纯静态托管需求优先选择 Astro 等轻量化框架。