静态渲染（Static Rendering）
静态渲染是指数据获取、渲染和重新验证在构建时或后台重新验证期间发生在服务器上。当用户访问页面时，提供的是预渲染的 HTML 响应——通常来自 CDN 边缘缓存。页面在请求时不需要等待 API 调用或数据库查询。
核心特征是预渲染：页面内容在用户请求之前就已经生成并缓存。这让最快的响应时间和最低的服务器负载成为可能。
// App Router — 默认静态渲染
export default async function Page() {
const data = await fetch("https://api.example.com/data");
return <div>{/ 渲染内容 /}</div>;
}
// 强制静态 + ISR 重新验证
export const dynamic = “force-static”;
export const revalidate = 3600; // 秒
// Pages Router — SSG + ISR
export async function getStaticProps() {
const res = await fetch(“https://api.example.com/posts”);
return { props: { posts: await res.json() }, revalidate: 3600 };
}静态渲染的优势
SEO 优势：预渲染的 HTML 可被搜索引擎爬虫立即读取，无需 JavaScript 执行。搜索引擎在首次抓取时就能看到完整内容——无需渲染队列，不消耗抓取预算。
加载最快：从 CDN 边缘节点提供的静态 HTML 以最小延迟触达全球用户。每次请求无需服务器端处理。
服务器成本最低：一旦缓存，服务器不再进行按请求的工作。CDN 带宽通常远低于计算成本。即使后端服务暂时不可用，缓存的静态页面仍然可以正常访问。
更好的 Core Web Vitals：预构建的 HTML 消除了服务器响应时间的波动，提供一致的 LCP 和 FCP 分数。这直接支持排名信号和用户体验。
技术实现
在 Next.js App Router 中，所有路由默认都是静态渲染的。可通过 export const dynamic = “force-static” 显式强制静态渲染，并通过 export const revalidate = 3600 控制重新验证间隔。在 Pages Router 中，使用 getStaticProps 和 getStaticPaths 在构建时生成页面，可配合 ISR 重新验证。
适用场景：博客文章、文档网站、营销落地页、产品展示页面，以及任何不随用户或请求变化的内容。
动态渲染（Dynamic Rendering）
动态渲染是指服务器在请求时为每个用户生成 HTML。与静态渲染不同，内容不是预构建的——服务器在用户等待时获取数据、执行业务逻辑并组装响应。
核心特征是按需生成：每次请求都会触发数据获取和渲染，让个性化内容、实时数据和无法在构建时预知的请求特定响应成为可能。
// App Router — 强制动态渲染
export const dynamic = "force-dynamic";
export default async function Dashboard() {
const { cookies } = await import("next/headers");
const session = await getSession(cookies());
const userData = await fetchUserData(session.userId);
return {/ 个性化内容 /};
}
// Pages Router — getServerSideProps
export async function getServerSideProps(context) {
const session = await getSession(context.req);
const userData = await fetchUserData(session.userId);
return { props: { userData } };
}动态渲染的优势
实时数据：显示股票价格、实时体育比分、突发新闻或频繁更新信息流的应用需要按请求渲染才能提供当前信息。
用户特定内容：仪表板、用户资料和认证体验对每个用户显示不同内容。每个请求携带的会话上下文决定渲染内容。
请求时信息：Cookie、URL 搜索参数、地理位置标头和 A/B 测试变体仅在请求时可用。动态渲染可利用这些信息定制响应。
灵活的访问控制：内容可根据请求时确定的用户权限进行门控、编辑或个性化。
技术实现
在 Next.js App Router 中，使用 export const dynamic = 'force-dynamic' 或调用 cookies()、headers() 等动态函数来启用按请求渲染。在 Pages Router 中，使用 getServerSideProps。性能提示：每次请求都需要服务器处理——使用 Streaming 和 Suspense 逐步交付内容，避免慢速数据获取阻塞整个页面。
适用场景：用户仪表板、实时数据展示、电商购物车、认证用户资料，以及需要按用户权限控制的内容。
其他渲染方式
在静态/动态轴线之外，Web 开发生态系统使用多个命名的渲染方法。每种方法都映射到静态-动态光谱的一侧，但带有值得理解的具体实现细节和权衡。
// React CSR — 挂载后渲染内容
function App() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('/api/data')
.then(res => res.json())
.then(setData);
}, []);
if (!data) return Loading...;
return {data.content};
}// Next.js SSR — 每次请求时执行
export async function getServerSideProps(context) {
const data = await fetch("https://api.example.com/data");
return { props: { data: await data.json() } };
}
export default function Page({ data }) {
return {data.content};
}// Next.js SSG — 构建时执行
export async function getStaticProps() {
const data = await fetch("https://api.example.com/data");
return { props: { data: await data.json() } };
}
export default function Page({ data }) {
return {data.content};
}// Next.js ISR — 静态 + 后台刷新
export async function getStaticProps() {
const data = await fetch("https://api.example.com/data");
return { props: { data: await data.json() }, revalidate: 60 };
}
// 通过 API 路由按需重新验证
export default async function handler(req, res) {
await res.revalidate('/path-to-revalidate');
return res.json({ revalidated: true });
}客户端渲染（CSR - Client-Side Rendering）
客户端渲染通过 JavaScript 在浏览器中生成页面内容。服务器返回最小的 HTML 外壳和 JavaScript 包；实际内容在客户端代码执行并从 API 获取数据后出现。
特点：首次加载慢（必须下载并执行 JS 才能看到内容）、SEO 不友好（爬虫可能不执行 JavaScript 或延迟执行）、后续导航流畅（无全页重载）、服务器计算成本最低（仅提供静态文件）。
CSR 适用于 SPA、内部工具、管理面板和 SEO 无关且丰富交互性优先的应用。避免对依赖搜索流量的公开营销或内容页面使用纯 CSR。
服务器端渲染（SSR - Server-Side Rendering）
服务器端渲染为每个请求在服务器上执行完整的渲染周期，生成完整的 HTML 后发送给客户端。SSR 在概念上与动态渲染相同——它是实现按需、按请求 HTML 生成的实现模式。
特点：SEO 友好（首次响应即包含完整 HTML）、首屏加载快（无需等待 JS 执行即可看到内容）、服务器成本较高（每次请求都需要计算）、实时数据（每次请求获取最新数据）。
SSR 用于需要实时数据且需要 SEO 的页面：带实时库存的电商产品页、带付费墙的新闻文章，以及仍需可索引的认证内容。
静态站点生成（SSG - Static Site Generation）
静态站点生成在构建时为所有页面预构建 HTML 文件。这些静态文件部署到 CDN 进行全球分发。SSG 是静态渲染背后的实现模式——它产生静态渲染所服务的预构建输出。
特点：性能最优（预构建文件，每次请求无需服务器处理）、SEO 友好（完整 HTML）、托管成本最低（兼容免费静态托管）、数据更新困难（需要重建才能刷新内容）。
SSG 适用于博客、文档、营销网站以及任何变化不频繁或按已知时间表变化的内容。
增量静态再生（ISR - Incremental Static Regeneration）
增量静态再生是 Next.js 的混合方案，将静态性能与后台数据刷新相结合。页面在构建时预生成，但可按可配置的间隔自动重新生成，无需完整站点重建。按需重新验证也可通过 API 路由触发，实现即时更新。
特点：性能优秀（大多数请求命中缓存的静态页面）、数据保持新鲜（后台重新生成）、SEO 友好（预生成的 HTML）、灵活性高（按页面设置重新验证间隔）。ISR 是如何在不牺牲速度的情况下保持静态内容最新的实践答案。
ISR 适用于定期更新但非实时的内容：新闻网站、产品目录、频繁更新的博客，以及任何每次变更都重建不切实际的网站。
| 渲染方式 | 执行时机 | 数据新鲜度 | 性能 | SEO | 服务器成本 |
|---|---|---|---|---|---|
| 静态渲染（SSG） | 构建时 | 需要重新构建 | 最快 | 最佳 | 最低 |
| 增量静态再生（ISR） | 构建时 + 按需 | 后台自动更新 | 很快 | 最佳 | 低 |
| 动态渲染（SSR） | 请求时 | 实时更新 | 中等 | 良好 | 较高 |
| 客户端渲染（CSR） | 浏览器中 | 实时更新 | 首次较慢 | 较差 | 最低 |
实际应用场景
不同的渲染方式适用于不同的应用场景。以下示例说明了在生产环境中运行良好的实际组合。
静态渲染场景
博客网站：文章内容变化不频繁。对单篇文章使用 SSG，对列出最近文章的索引页使用 ISR。
文档网站：技术文档、API 参考——内容稳定，快速加载和搜索索引是首要任务。
营销落地页：产品页、活动页——优化加载速度和 SEO 直接影响转化。
作品集网站：设计师和开发者的作品展示，内容相对固定，受益于快速、可靠的交付。
动态渲染场景
用户仪表板：订单历史、账户设置、数据分析——每个用户在请求时看到不同的数据。
实时数据展示：股票行情、加密货币价格、实时体育比分——内容必须在每次加载时反映当前状态。
电商购物车和结账：库存水平、定价和促销取决于用户身份、位置和当前会话状态。
社交媒体信息流：个性化时间线、推荐和活动流对每个认证用户都是唯一的。
混合渲染场景
许多现代网站按路由混合渲染策略。电商网站通常对产品列表页使用 ISR，对产品详情页使用静态渲染，对购物车和用户账户使用动态渲染。新闻网站对首页和分类页使用 ISR，对文章页使用静态渲染，对评论组件使用客户端渲染。SaaS 应用对营销页面使用静态渲染，对应用内部使用动态或客户端渲染。
核心原则：将渲染方式匹配到页面的数据变动频率和受众，而非整个项目。单个 Next.js 应用可以同时提供静态博客文章、动态仪表板和客户端渲染的聊天组件。
如何选择适合的渲染方式
选择渲染方式需综合考虑数据更新频率、SEO 需求、性能要求和成本因素，确保选择最适合项目需求的渲染策略。
评估数据更新频率
对很少变化的数据（博客文章、文档），使用静态渲染或 ISR。对实时数据（仪表板、股票价格），使用动态渲染。如果数据按已知时间表更新，具有适当重新验证间隔的 ISR 通常提供最佳平衡。
考虑 SEO 需求
如果搜索可见性很重要，避免纯客户端渲染。静态渲染、SSR 和 ISR 都交付搜索引擎可以立即索引的完整 HTML。CSR 需要 JavaScript 执行，爬虫可能跳过、延迟或部分处理。
评估性能要求
静态渲染提供最快的首字节时间和最一致的 Core Web Vitals，因为内容预构建并边缘缓存。ISR 在缓存页面上的速度几乎一样快。SSR 每次请求都会增加服务器处理延迟——在可能的情况下通过流式传输、边缘函数和 CDN 缓存来缓解。
考虑成本因素
静态渲染计算成本最低——HTML 构建一次，从廉价的 CDN 带宽提供。ISR 增加适度的后台重新生成成本。SSR 每次请求都运行服务器计算，随流量线性扩展。CSR 将渲染卸载到客户端，最小化服务器成本，但牺牲了 SEO 和初始加载性能。
规划混合渲染策略
Next.js 等现代框架支持按路由混合渲染方式。对营销和内容页面使用静态渲染，对认证仪表板使用动态渲染，对交互组件使用客户端渲染。这种按页面的方法让你能够为每个页面针对其特定受众和数据模式进行优化。
结论
渲染策略必须匹配你的技术栈中实际交付给爬虫和用户的内容：初始 HTML 中交付了什么、客户端如何注水、JavaScript 错误时如何优雅降级。
同时用爬虫抽样和 Core Web Vitals 来衡量。快但空的壳仍然会失去排名。慢但完整的页面仍然会失去用户。每个页面的正确渲染方式是能够以最快速度向搜索引擎和真实访客交付完整、可读内容的方式。
以静态渲染作为默认选项——它是最安全、最快、最便宜的选择。仅为真正依赖请求时数据的页面添加动态渲染。使用 ISR 保持静态内容新鲜而不牺牲性能。将纯 CSR 保留给 SEO 无关的认证交互界面。
参考文献
- Next.js 静态与动态渲染 （Next.js，2026年） — Next.js App Router 中静态和动态渲染策略的官方文档。
- Next.js 静态站点生成（SSG） （Next.js，2026年） — Next.js Pages Router 中静态站点生成（SSG）和 ISR 的完整指南。
- Next.js 服务器端渲染（SSR） （Next.js，2026年） — Next.js 中 getServerSideProps 的服务器端渲染（SSR）文档。
- 网站渲染是什么（Strapi） （Strapi，2026年） — 网站渲染方式概述，涵盖 CSR、SSR、SSG、ISR 及最佳实践。