前置概念

CSR & SSR & SSG & ISR

CSR

CSR 即 Client Side Rendering，客户端渲染。

优点：

页面切换快。
减轻服务器压力，降低带宽消耗。
前后端分离，开发效率高。

缺点：

首屏加载慢。
SEO 差。
对低端设备支持差。

常见技术方案：

React + React Router
Vue + Vue Router
……

SSR

SSR 即 Server Side Rendering，服务端渲染。

优点：

首屏加载快。
SEO 好。
对低端设备支持好。

缺点：

页面切换慢。
服务器压力大，带宽消耗高。
前后端耦合，开发效率低。

常见技术方案：

Next.js（React）
Nuxt.js（Vue）
……

SSG

SSG 即 Static Site Generation，静态站点生成。

优点：

首屏加载快。
SEO 好。
服务器压力小，带宽消耗低。

缺点：

生成静态页面比较耗时。
无法实时更新，不适合动态内容。

常见技术方案：

VitePress
……

ISR

ISR 即 Incremental Static Regeneration，增量静态再生。

可以简单理解为：SSR + SSG

基于静态生成（SSG）的策略，允许服务器在运行时按规则（间隔或按需）重新生成静态页面，从而在保留静态性能的同时支持内容及时更新。
再生过程发生在服务器端；
客户端只负责常规的水合，不承担 ISR 的再生工作。

常见实现包括设置 getStaticProps 的 revalidate、动态路由的 fallback，以及按需 revalidate 的 API。

详细说明

在 Server Component 中用 fetch 的 revalidate（按秒缓存 + 后台再生）

// app/posts/[id]/page.js (或 .tsx)
export default async function PostPage({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`, {
    next: { revalidate: 60 }, // 缓存 60s，过期后首次请求触发后台重建
  })

  if (!res.ok) throw new Error('fetch failed')
  const post = await res.json()

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  )
}

文件级别的 revalidate（同样适用于整个页面）

// app/posts/page.js
export const revalidate = 60 // 整个页面每 60 秒可重新生成一次

export default async function PostsPage() {
  const res = await fetch('https://api.example.com/posts')
  const posts = await res.json()
  return (
    <ul>
      {posts.map((p) => (
        <li key={p.id}>{p.title}</li>
      ))}
    </ul>
  )
}

按需立即使某路径/标签再生（Webhooks / CMS 集成）

// app/api/revalidate/route.js
import { NextResponse } from 'next/server'
import { revalidatePath, revalidateTag } from 'next/cache'

export async function POST(req) {
  const body = await req.json()
  // 验证 secret，避免被滥用
  if (body.secret !== process.env.MY_REVALIDATE_SECRET) {
    return NextResponse.json({ message: 'Invalid token' }, { status: 401 })
  }

  try {
    if (body.path) {
      revalidatePath(body.path) // 立即重新生成指定路径（例如 '/posts/123'）
    }
    if (body.tag) {
      revalidateTag(body.tag) // 重新生成与该 tag 相关的缓存
    }
    return NextResponse.json({ revalidated: true })
  } catch (err) {
    return NextResponse.json({ error: err.message }, { status: 500 })
  }
}

RCC & RSC

React 组件分为两种类型：

RSC：React Server Component，即 “服务端组件”
- 所有组件默认均为 RSC。
RCC：React Client Component：即 “客户端组件”
- RCC 用于处理交互性的场景，需手动声明，在文件顶部添加 'use client' 即可。

RCC 下只能嵌套使用 RCC，但是可以通过 client 组件来引入 RSC。
RSC 下可以嵌套使用 RSC 和 RCC。

前置概念 ​

CSR & SSR & SSG & ISR ​

CSR ​

SSR ​

SSG ​

ISR ​

RCC & RSC ​

前置概念

CSR & SSR & SSG & ISR

CSR

SSR

SSG

ISR

RCC & RSC