Next.js 支持的渲染方式和使用场景

Next.js 支持 4 大类渲染方式，根据页面用途和数据特性，开发者可以灵活按页面配置。以下是 Next.js 全部支持的渲染方式及其特点、使用场景：

---

✅ Next.js 支持的渲染方式一览

渲染方式	全称	是否预渲染	HTML 生成时机	数据更新	SEO 友好	适用场景
SSG	Static Site Generation	✅ 是	构建时静态生成	❌ 不更新	✅ 是	博客、产品页、文档等静态内容
ISR	Incremental Static Regeneration	✅ 是	构建时静态生成 + 定时后台更新	✅ 定时更新	✅ 是	内容定期变化，如新闻列表、文章页
SSR	Server-Side Rendering	✅ 是	每次请求动态生成	✅ 实时	✅ 是	个性化内容、登录后页面、后台系统
CSR	Client-Side Rendering	❌ 否	客户端首次加载后执行 JS 渲染	✅ 实时	❌ 差	实时数据页面、SPA 风格页面

---

🧩 每种渲染方式在 Next.js 中如何启用？

1️⃣ SSG – 静态生成（默认行为）

// app/blog/page.tsx
export default async function Page() {
  const res = await fetch('https://api.example.com/posts', {
    cache: 'force-cache', // ✅ 强制缓存（默认构建时执行）
  })
  const data = await res.json()
  return <BlogList data={data} />
}

---

2️⃣ ISR – 增量静态生成

// 每 60 秒后台再生一个新的 HTML 页面
export default async function Page() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 60 }, // ✅ 触发 ISR
  })
  const data = await res.json()
  return <BlogList data={data} />
}

---

3️⃣ SSR – 服务端渲染（默认 fetch 即 SSR）

export default async function Page() {
  const res = await fetch('https://api.example.com/posts') // ❗️默认是 SSR
  const data = await res.json()
  return <BlogList data={data} />
}

要 SSR，不要加 cache 或 revalidate，也不要用 export const dynamic = 'force-static' 。

---

4️⃣ CSR – 客户端渲染

'use client'; // ❗️启用浏览器端组件
import { useEffect, useState } from 'react'

export default function Page() {
  const [data, setData] = useState(null)
  useEffect(() => {
    fetch('/api/posts').then(res => res.json()).then(setData)
  }, [])
  return <BlogList data={data} />
}

CSR 页面 不会被预渲染，完全依赖浏览器加载后运行 JavaScript。

---

🎯 使用建议总结

页面类型	推荐渲染方式
静态页面（如博客首页）	✅ SSG / ISR
个性化页面（如用户中心）	✅ SSR
实时刷新页面（如仪表盘）	✅ CSR / SSR
不常改的营销页	✅ SSG

---

🧠 小知识（App Router 下的动态策略）

你还可以通过 export const dynamic = 'force-dynamic' 或 'force-static' 控制行为：

export const dynamic = 'force-static' // 强制使用 SSG
export const dynamic = 'force-dynamic' // 强制使用 SSR