如果页面建设重点考虑 SEO 友好性、代码简洁度和页面性能，渲染方式不能只看某一个指标。SSR、SSG、CSR、ISR 和混合渲染各有优劣，适合的场景也不同。
简单来说：内容型页面更适合 SSR/SSG，交互型应用可以使用 CSR，既要 SEO 又要交互体验的页面适合混合渲染或渐进增强。 选型时要结合页面类型、更新频率、交互复杂度、团队维护成本和性能目标来判断。
一、常见页面渲染方式
| 渲染方式 | 主要特点 | SEO 友好性 | 性能特点 | 适合场景 |
|---|---|---|---|---|
| CSR 客户端渲染 | 浏览器加载 JS 后生成内容 | 较弱 | 首屏可能慢 | 后台系统、强交互应用 |
| SSR 服务端渲染 | 服务端返回完整 HTML | 较好 | 首屏快，但服务端压力高 | 内容页、详情页、动态页面 |
| SSG 静态生成 | 构建时生成 HTML | 很好 | 访问速度快 | 博客、文档、营销页 |
| ISR 增量静态生成 | 静态页按需更新 | 很好 | 兼顾速度和更新 | 内容量大且持续更新的网站 |
| 混合渲染 | 首屏 HTML + 客户端交互 | 较好 | 兼顾首屏和交互 | 既要 SEO 又要复杂交互的页面 |
没有一种渲染方式适合所有页面。真正合理的做法，是按页面类型组合使用。
二、从 SEO 角度怎么选
SEO 最关心的是搜索引擎能否快速看到主要内容、标题、链接和结构化信息。
对于需要搜索收录的页面，建议优先保证：
- 首屏主要内容在 HTML 中可见。
- title、description、canonical 等基础标签完整。
- 内链可以被搜索引擎抓取。
- 页面状态码正确。
- 移动端可访问。
- 不依赖复杂 JS 才能看到核心正文。
因此，文章页、产品页、分类页、专题页、文档页通常更适合 SSR、SSG 或 ISR。纯 CSR 如果处理不好，容易出现搜索引擎抓取内容不完整、首屏空白、内链不可见等问题。
三、从性能角度怎么选
页面性能不仅看首屏速度，还要看交互延迟、资源体积和运行成本。
1. SSG 性能通常最好
SSG 页面可以直接从 CDN 返回静态 HTML，速度快、稳定性好、服务器压力低。适合内容稳定的页面。
2. SSR 首屏友好但有服务端成本
SSR 可以让用户和搜索引擎更快看到完整内容，但每次请求都需要服务端渲染，访问量大时要考虑缓存、降级和服务端压力。
3. CSR 适合强交互但首屏要控制
CSR 适合后台系统、配置页面、复杂工具类应用，但如果用于内容页，需要控制 JS 体积并做好骨架屏、预渲染或动态渲染方案。
4. 混合渲染适合综合场景
首屏内容用 SSR/SSG 输出，交互部分由客户端接管，是很多现代网站常用的方案。
四、从代码简洁度和维护成本看
代码简洁不只是文件少，还包括架构清晰、职责明确、构建流程可控、排查问题方便。
一般来说：
- 简单内容站用 SSG 更清晰。
- 高频更新内容用 SSR 或 ISR 更合适。
- 强交互应用用 CSR 维护更直接。
- 内容和交互混合页面可采用 SSR/SSG + 局部 hydration。
如果为了追求“全能”而把所有页面都做成复杂混合架构，反而会增加维护成本。
五、推荐选型策略
1. 文章、资讯、博客、文档页
优先选择 SSG 或 ISR。如果内容更新频繁，可以使用 ISR 或定时重新生成。
优势：
- SEO 友好。
- 首屏速度快。
- CDN 缓存效果好。
- 运维压力低。
2. 商品页、服务页、落地页
可以选择 SSR、SSG 或 ISR。若价格、库存、活动状态频繁变化，可以使用 SSR 或静态页加动态接口。
3. 后台管理系统和工具应用
可以选择 CSR。此类页面通常不需要搜索引擎收录，更关注交互效率、权限控制和开发效率。
4. 复杂营销页或产品官网
适合混合渲染。核心内容和 SEO 信息由服务端或静态 HTML 输出，动画、表单、筛选、登录状态等由客户端处理。
六、实践建议
如果你同时关注 SEO、代码简洁和性能，可以按以下原则设计：
- 可收录内容优先在 HTML 中输出。
- 不让核心正文依赖客户端 JS 才出现。
- 静态内容优先 SSG/CDN。
- 高频动态内容使用 SSR 或 ISR。
- 强交互模块局部 hydration。
- 控制前端 JS 包体积。
- 图片、字体和第三方脚本延迟加载。
- 配置 canonical、结构化数据和站点地图。
- 用 Lighthouse 和真实用户数据持续验证性能。
七、常见误区
1. 认为 CSR 一定不能做 SEO
CSR 不是绝对不能做 SEO，但需要额外处理预渲染、动态渲染、服务端输出或搜索引擎可抓取性。否则风险更高。
2. 认为 SSR 一定性能最好
SSR 首屏内容友好，但服务端渲染也有成本。如果没有缓存和性能优化，高并发下可能变慢。
3. 所有页面都使用同一种渲染方式
不同页面目标不同。内容页、列表页、后台页、工具页不必强行使用同一方案。
4. 只看技术先进，不看业务需求
渲染方式应该服务业务。SEO 页面优先可索引和性能，应用页面优先交互和状态管理。
总结
重点考虑 SEO 友好性、代码简洁度和页面性能时，推荐按页面类型选择渲染方式：内容页优先 SSG/ISR，动态详情页可用 SSR，强交互应用适合 CSR，复杂页面适合混合渲染。
最稳妥的原则是：让搜索引擎和用户尽快看到核心内容，把复杂交互留给客户端，把静态资源交给 CDN，把动态更新控制在必要范围内。这样既能保证 SEO，也能兼顾性能和维护成本。
