一文看懂 Next.js 数据获取与渲染策略：从 SSR 到 ISR 的取舍之道

🚀 【Next.js 深入系列 · 第三篇】一文看懂数据获取与渲染策略：从 SSR 到 ISR 的取舍之道

👨‍💻 作者：kd

📅 更新时间：2025-10

💡 标签：Next.js、SSR、ISR、数据获取、性能优化

💬 前言：为什么"渲染方式"决定了网站的灵魂

如果你正在用 Next.js 开发项目，你一定听过这些名词：
SSR、SSG、ISR、CSR。

它们看似只是技术实现的选择，但在真正的生产环境中，却决定了：

你的首屏速度快不快
页面能不能被搜索引擎收录
用户是否总看到旧数据
构建时间是秒级还是分钟级

这篇文章将带你从原理、代码到选型思路 ，完整看懂 Next.js 的四种渲染策略，并结合最新的 App Router 模式 一步步解析。

🧩 一、Next.js 中的渲染方式总览

在 Next.js 里，所有页面的内容最终都来自「数据获取 + 渲染模式」的组合。

模式	渲染时机	适用场景	SEO 友好	示例
SSR (Server-Side Rendering)	每次请求时渲染	动态内容、实时数据	✅	用户信息页
SSG (Static Site Generation)	构建时渲染	静态内容、文档页	✅	博客文章页
ISR (Incremental Static Regeneration)	静态 + 定期再生	半静态数据	✅	商品详情页
CSR (Client-Side Rendering)	前端请求渲染	纯交互页、用户态	❌	Dashboard、个人中心

你可以简单记为：

"越靠服务器，SEO 越强；越靠客户端，交互越快。"

⚙️ 二、SSR：实时数据与 SEO 的完美结合

SSR（服务端渲染）是 Next.js 的基础能力。

它在每次请求时，在服务器上运行 React 组件并返回 HTML。

旧版（Pages Router）写法：

javascript 复制代码

export async function getServerSideProps() {
  const data = await fetch('https://api.example.com/posts');
  return { props: { data } };
}

新版（App Router）写法：

javascript 复制代码

export default async function Page() {
  const res = await fetch('https://api.example.com/posts', { cache: 'no-store' });
  const data = await res.json();
  return <PostList data={data} />;
}

cache: 'no-store' 即代表每次请求都重新获取数据，相当于 SSR。

✅ 优点：

数据始终最新
SEO 效果好（直接返回完整 HTML）

⚠️ 缺点：

请求延迟较高
高并发下服务器压力大

💡 适用场景：动态资讯页、用户个人中心、权限数据等。

📦 三、SSG：构建时生成的"极速体验"

SSG（静态生成）在构建阶段预渲染所有页面，访问时直接返回 HTML。

旧版写法：

javascript 复制代码

export async function getStaticProps() {
  const posts = await fetchPosts();
  return { props: { posts } };
}

新版写法（App Router）：

javascript 复制代码

export const dynamic = 'force-static';

export default async function Page() {
  const posts = await getData();
  return <PostList posts={posts} />;
}

✅ 优点：

加载速度极快（CDN 缓存命中率高）
几乎零后端负担

⚠️ 缺点：

数据更新需重新构建
不适合高频变动内容

💡 适用场景：博客、文档、营销页。

⏱ 四、ISR：让静态页面"自动刷新"

ISR（增量静态再生成）是 SSG 的升级版。

它允许页面静态化后定期自动刷新数据，而不需整站重构。

示例：

javascript 复制代码

export default async function Page() {
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 60 }, // 60秒后再生成一次
  });
  const products = await res.json();
  return <ProductList products={products} />;
}

✅ 优点：

静态速度 + 动态数据的平衡
后台自动再生，无需人工触发

⚠️ 缺点：

存在数据延迟（缓存更新周期内）
首次访问时可能触发"冷启动"

💡 适用场景：商品详情、排行榜、活动页等半动态页面。

🧠 五、CSR：让交互更自由

CSR（客户端渲染）则是传统 React 模式。

Next.js 也允许在组件中通过 useEffect 自行请求数据。

scss 复制代码

'use client';

export default function Page() {
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch('/api/data').then(r => r.json()).then(setData);
  }, []);
  return <List data={data} />;
}

✅ 优点：

响应快，交互流畅
用户态数据灵活

⚠️ 缺点：

首屏白屏时间长
SEO 效果差

💡 适用场景：用户中心、后台管理系统、纯交互模块。

🧩 六、App Router 中的新数据策略

Next.js 13+ 的 App Router 彻底重构了数据获取模型。

你可以在 组件级别 直接使用 fetch()，无需繁琐的 getStaticProps 或 getServerSideProps。

配置	含义	对应模式
`cache: 'no-store'`	每次请求都获取	SSR
`next: { revalidate: N }`	N 秒后再生成	ISR
默认	构建时缓存	SSG

更棒的是：

你可以在同一页面中混合使用多种策略。

比如：

ini 复制代码

const user = await fetch('/api/user', { cache: 'no-store' });
const posts = await fetch('/api/posts', { next: { revalidate: 120 } });

即：

用户信息用 SSR（实时）
帖子列表用 ISR（缓存）

这种"混合渲染"是 App Router 带来的最大生产力提升。

⚡ 七、性能对比与选型建议

模式	构建时间	首屏速度	实时性	推荐使用
SSR	中等	较快	✅ 实时	实时动态页
SSG	较慢	⚡ 极速	❌ 静态	文档、博客
ISR	较快	⚡ 极速	♻️ 可控延迟	半动态页
CSR	快	一般	✅ 实时	后台、用户态

🧭 选型建议：

若页面依赖 SEO → SSR / SSG / ISR
若用户数据频繁变动 → SSR / CSR
若性能优先 → ISR
若内容长期稳定 → SSG

🔍 八、实战技巧：让渲染更高效

结合 Edge Runtime 提速 SSR
ini 复制代码
```
export const runtime = 'edge';
```
将 SSR 移到边缘节点，显著降低 TTFB。
缓存 API 响应

使用 next: { revalidate } 控制刷新频率，减少 API 压力。
分片渲染（Streaming）

利用 React Server Components 实现更快的首屏展示。
监控与优化

使用 reportWebVitals 或 Vercel Analytics 量化渲染延迟。

🧾 九、总结：策略是性能的核心

Next.js 的渲染模式看似复杂，但归根结底是一场「性能与实时性的平衡游戏 」。

理解它们的本质，你才能根据业务灵活取舍。

模式	核心优势	一句话总结
SSR	动态数据、SEO 友好	实时渲染，代价是服务器压力
SSG	构建时生成、加载快	一次生成，极速体验
ISR	静态 + 再生、折中方案	缓存自动更新的最佳平衡点
CSR	前端控制、灵活交互	SEO 弱但用户体验强

💡 一句话总结：
Next.js 的数据策略不是"选择题"，而是"组合题"。

✨ 结语：Next.js 的设计哲学

Next.js 的目标不是让你写更复杂的逻辑，而是让前端拥有后端的控制力 。

理解它的渲染策略，你才能真正构建出既快又稳的现代 Web 应用。

📚 延伸阅读