前端框架中的服务端渲染（SSR）与静态站点生成（SSG）对比详解

一、问题描述
服务端渲染（SSR）和静态站点生成（SSG）是现代前端框架中两种主要的渲染方式，用于解决传统客户端渲染（CSR）带来的首屏加载慢、SEO不友好等问题。理解它们的核心差异、适用场景和实现原理，对于选择合适的技术方案至关重要。

二、核心概念解析

1. 客户端渲染（CSR）的局限性

   • 过程：服务器返回空HTML模板 → 浏览器下载JS → 执行JS渲染页面
   • 问题：首屏白屏时间长、搜索引擎难以抓取动态内容

2. 服务端渲染（SSR）定义

   • 过程：服务器实时执行JS生成完整HTML → 直接返回给浏览器
   • 特点：每次请求动态渲染，适合内容频繁更新的页面（如新闻页）

3. 静态站点生成（SSG）定义

   • 过程：构建时预生成所有HTML → 直接部署到CDN
   • 特点：一次性生成静态文件，适合内容稳定的页面（如博客、文档）

三、技术实现对比

1. 渲染时机差异

   • SSR：请求时渲染（Runtime）

     // 示例：Express中间件处理SSR
     app.get('/page', (req, res) => {
       const html = ReactDOMServer.renderToString(<App data={fetchData()} />)
       res.send(html)
     })
     

   • SSG：构建时渲染（Build-time）

     // 示例：Next.js静态生成
     export async function getStaticProps() {
       const data = await fetchData()
       return { props: { data } } // 构建时预取数据
     }
     

2. 数据获取方式

   • SSR：通过服务器端获取实时数据（如数据库查询）
   • SSG：构建时通过API或本地文件获取数据，生成静态快照

3. 部署架构差异

   • SSR需要Node.js服务器持续运行，需考虑服务器负载和缓存策略
   • SSG可托管到CDN，无需服务器计算，直接响应静态文件

四、性能与SEO对比分析

1. 首屏加载性能

   • SSG优势：CDN边缘节点直接返回HTML，无服务器计算开销
   • SSR瓶颈：服务器渲染时间 + 网络传输时间

2. 内容更新频率

   • SSR：适合实时数据（如用户仪表盘）
   • SSG：适合低频更新内容（需重新构建部署）

3. 混合渲染策略

   • 增量静态再生（ISR）：Next.js等框架允许部分页面定时重新生成
   • 边缘计算渲染：将SSR逻辑部署到CDN边缘节点（如Cloudflare Workers）

五、实际应用场景选择

1. 选择SSR的场景

   • 用户个性化强的内容（如社交网络动态）
   • 需实时交互的页面（如后台管理系统）

2. 选择SSG的场景

   • 营销页面、博客文档等内容稳定站点
   • 对性能要求极高的页面（如电商商品页）

3. 混合方案示例

   • 电商首页用SSG保证加载速度，用户中心用SSR保证实时性
   • 通过流式渲染（Streaming SSR）优化SSR的TTFB时间

六、进阶优化策略

1. SSR性能优化

   • 组件级缓存（如Vue的Server Cache）
   • 异步组件拆分减少首屏JS体积

2. SSG动态化扩展

   • 客户端动态注入（如评论框）
   • 按需预渲染（Prerender.io等工具）

通过理解SSR与SSG的核心差异，开发者可根据业务场景灵活选择渲染方案，甚至组合使用以达到最优的性能与用户体验平衡。