Web 渲染方案

CSR / SSR / SSG / ISR

基础渲染

CSR

Client-Side Rendering

在浏览器中使用 JavaScript 动态渲染内容，提供高度交互性的用户体验。

性能:首屏较慢，交互快速

SEO:SEO 不友好

缓存:浏览器缓存

SSR

Server-Side Rendering

在服务器端为每个请求动态生成 HTML，确保内容的实时性和 SEO 优化。

性能:首屏快速，服务器负载高

SEO:SEO 友好

缓存:CDN + 服务器缓存

SSG

Static Site Generation

在构建时预生成静态 HTML 文件，提供最佳的性能和 CDN 缓存效果。

性能:极快加载，构建时间长

SEO:SEO 优秀

缓存:CDN 长期缓存

ISR

Incremental Static Regeneration

结合静态生成和动态更新，在后台增量更新内容，平衡性能与新鲜度。

性能:快速加载，按需更新

SEO:SEO 友好

缓存:智能缓存策略

混合渲染

+

PPR (Partial Prerendering)

静态生成 (SSG) + 服务端渲染 (SSR)

静态组件预生成, 动态数据服务端渲染。适用于电商详情、用户中心。

点击上方卡片深入了解各种渲染策略的技术实现和最佳实践