• 简体中文

      • 渲染模式总览

      Modern.js 支持多种渲染模式，不同的渲染模式适用于不同的场景。选择合适的渲染模式可以显著提升应用的性能和用户体验。

      渲染模式速览

      渲染模式特点适用场景
      CSR在浏览器端执行 JavaScript 渲染页面交互性强、对 SEO 要求不高的应用
      SSR在服务端预先渲染完整 HTML 页面对首屏性能和 SEO 要求高的网站
      Streaming SSR边渲染边返回，更快显示初始 UI需要更快首屏感知速度的应用（SSR 默认模式）
      RSC组件在服务端渲染，减少客户端 JS 体积；数据与组件逻辑高内聚，减少状态传递追求极致性能、需要减少客户端代码的项目
      SSG构建时生成静态页面，可被 CDN 缓存内容相对静态的网站，如博客、文档站点

      性能对比

      渲染技术核心优势主要瓶颈
      SSR服务端预渲染，有利于 SEO需等待所有数据加载完成才能响应
      Streaming SSR边渲染边返回，更快首屏JS 体积仍然较大
      Streaming SSR + RSC减少客户端 JS 体积-

      如何选择

      快速决策

      • 内容静态 + 需要 SEO → SSG
      • 需要 SEO + 首屏性能 → Streaming SSR（默认）
      • 追求极致性能 → Streaming SSR + RSC
      • CSR 项目渐进优化 → CSR + RSC
      • 高度交互 + 无需 SEO → CSR

      组合使用

      Modern.js 支持多种渲染模式组合使用：

      • Streaming SSR + RSC：流式渲染 + 减少客户端代码
      • SSG + SSR：部分页面静态，部分页面动态
      • CSR + RSC：客户端渲染 + 部分 Server Component

      相关文档