前端页面渲染方式：CSR、SSR、SSG-编程实验室

前端页面渲染方式的核心对比：CSR、SSR、SSG（2025-2026 视角）

现代前端（尤其是 React/Next.js、Vue/Nuxt、Angular 等框架）最常用的三种渲染策略如下表所示，已经成为选择技术栈时必须明确回答的问题。

渲染方式	全称	HTML 内容生成时机	数据获取时机	首次加载速度（TTFB → FCP）	SEO 友好度	服务器压力	交互响应速度（hydration 后）	典型适用场景	代表框架/实现方式（2025主流）
CSR	Client-Side Rendering	浏览器端（下载 JS 后）	浏览器端（useEffect/fetch）	较慢（白屏时间长）	★☆☆☆☆	很低	优秀（后续交互快）	后台管理系统、管理面板、强交互 SPA	Create React App、Vite + React/Vue、纯 SPA
SSR	Server-Side Rendering	每次请求时服务器动态生成	服务器端（getServerSideProps）	较快（有内容 HTML）	★★★★★	高	中等（需 hydration）	需要 SEO + 个性化内容（如电商详情、新闻）	Next.js getServerSideProps、Nuxt SSR 模式
SSG	Static Site Generation	构建时（build/deploy 时）一次性生成	构建时（getStaticProps）	最快（CDN 直出静态文件）	★★★★★	极低	中等（需 hydration）	博客、文档、营销页、内容相对静态的站点	Next.js getStaticProps、Gatsby、Astro、Nuxt generate

一、最直观的流程对比图（文字版）

CSR（客户端渲染）
用户请求 → 返回几乎空的 HTML + 一大堆 JS → 浏览器下载 JS → 执行 JS → fetch API → 渲染页面
→结果：首屏白屏时间长，SEO 差，但后续页面跳转丝滑
SSR（服务端渲染）
用户请求 → 服务器 fetch 数据 → 渲染完整 HTML → 返回给浏览器 → 浏览器显示内容 + 下载 JS → “激活”（hydration）成可交互页面
→结果：首屏快、有内容，SEO 好，但每个请求都要服务器计算
SSG（静态生成）
构建时：fetch 数据 → 渲染成完整 HTML → 输出静态文件 → 部署到 CDN
用户请求 → 直接从 CDN 拿 HTML → 显示内容 + 下载 JS → hydration
→结果：首屏最快、CDN 加速、零服务器计算压力，SEO 极好

二、2025-2026 年真实选型决策表（最常用场景）

你的项目最在意的点	推荐优先级顺序	为什么（2025 视角）
SEO 必须强 + 首屏要快	1. SSG → 2. SSR → 3. CSR	Google 爬虫对 JS 执行能力强，但 SSG/SSR 仍最稳
内容频繁变化 + 个性化	SSR（或 ISR）	电商商品详情、用户仪表盘、实时新闻
内容几乎不变（博客/文档/营销）	SSG（或 ISR）	构建一次，全球 CDN 分发，成本最低
纯管理后台 / 内网系统	CSR	不需要 SEO，追求开发效率和交互流畅
混合需求（大部分静态 + 少量动态）	SSG + ISR 或 Next.js App Router 混合	现代主流解法
服务器资源非常有限	SSG >> CSR > SSR	SSG 几乎不耗服务器
弱网/移动端首屏体验最重要	SSG > SSR > CSR	静态文件 + CDN 最友好

三、现代框架中的实际写法对比（以 Next.js App Router 为例，2025主流）

// 1. CSR（默认就是 CSR，除非你用服务端组件） 'use client'; // ← 标记为客户端组件 import { useEffect, useState } from 'react'; export default function Page() { const [data, setData] = useState(null); useEffect(() => { fetch('/api/data').then(r => r.json()).then(setData); }, []); return <div>{data ? data.title : '加载中...'}</div>; }

// 2. SSR（服务端渲染，每次请求都重新生成） export default async function Page() { const data = await fetch('https://api.example.com/data', { cache: 'no-store' }).then(r => r.json()); return <div>{data.title}</div>; }

// 3. SSG（构建时生成静态页面） export const revalidate = false; // 或不写（默认 SSG） export default async function Page() { const data = await fetch('https://api.example.com/data', { next: { tags: ['static'] } }).then(r => r.json()); return <div>{data.title}</div>; }

// 4. ISR（增量静态再生，SSG 的升级版，Next.js 最推荐混合方案） export const revalidate = 3600; // 每小时重新生成一次（单位：秒） export default async function Page() { const data = await fetch('https://api.example.com/data').then(r => r.json()); return <div>{data.title}</div>; }