SSG 静态站点生成

  • 在build的时候，生成的静态页面
  • 所有的请求，看到的都是同一个页面
  • 生成的静态资源，可以放在 CDN，每次请求都会缓存

Case 1: 不需要请求外部数据

1
2
3
4
5

function About() {
  return <div>About</div>;
}

export default About;

Case 2: 依赖于外部数据 generateStaticParams

Case 3: 依赖于外部数据，且路径是动态的

getStaticPaths

generateStaticParams

SSG VS SSR VS ISR

SSG 是“提前生成静态页面”，SSR 是“每次请求时生成页面”。

模式 构建时 请求时 页面特点
SSG ✅ 生成 HTML ❌ 不再计算 内容稳定、加载快
SSR ❌ ✅ 服务器渲染 内容实时、响应慢
ISR ✅+定时更新 ✅ 可自动刷新 性能与实时性平衡

SSR

SSR 是“每次请求时生成页面”。

Incremental Static Regeneration (ISR) 增量静态再生

ISR 允许开发者在构建时生成静态页面，并在部署后定期或按需更新这些页面，而无需重新构建整个网站。

通过 revalidate 配置实现。

工作原理

  1. 初始构建: 在 next build 期间，Next.js 会预渲染页面并将其作为静态 HTML 文件生成。
  2. 提供缓存页面: 当用户访问该页面时，会立即从缓存中提供静态生成的页面，从而实现极快的加载速度。
  3. 触发重新验证: 如果请求在设定的重新验证时间之后到达，Next.js 会在后台重新生成该页面。在此期间，用户仍然会看到旧的（过期的）缓存页面。
  4. 更新缓存: 一旦页面成功重新生成，Next.js 会用新页面更新缓存。此后的请求将收到更新后的内容。

ISR 的生命周期

  1. 首次访问 (或缓存清空后):
    • 没有缓存。Vercel 在服务器端渲染 (SSR) 页面。
    • 页面生成后，返回给用户，并存入边缘缓存 (Edge Cache)。
    • 这次操作会触发一次 ISR Write (写入缓存)。
  2. 60 秒内的后续访问:
    • 缓存是“新鲜的”(fresh)。
    • Vercel 直接从边缘缓存返回页面，速度极快。
    • 这次操作是 Cache HIT，不计入 ISR Reads 或 Writes。这是最理想的情况。
  3. 60 秒过后的第一次访问:
    • 缓存现在是“过期的”(stale)。
    • 关键点来了：Vercel 立即从缓存中返回这个“过期”的页面给用户，保证了用户的访问速度。
    • 这次 “返回过期页面” 的操作，被计算为一次 ISR Read。
    • 同时，Vercel 在后台悄悄地触发一次页面重新生成。
  4. 后台重新生成:
    • Vercel 再次执行 getStaticProps，获取新数据，生成新页面。
    • 当新页面生成成功后，它会用新页面替换掉缓存中的旧页面。
    • 这次 “替换缓存” 的操作，被计算为一次 ISR Write。
  5. 重新生成期间的其它访问:
    • 如果在后台重新生成（可能需要几秒钟）还未完成时，又有其他用户访问该页面，他们同样会收到那个“过期”的页面。
    • 每一次这样的访问，都会被计算为一次 ISR Read。

RSC（React Server Component）

Server Side Rendering

generateStaticParams

环境变量

私有变量

非 NEXT_PUBLIC_ 的变量只存在于 node.js 环境，在 brower 中读取不到。

公开变量

Build Time(构建时) 和 Runtime(运行时)

Build Time（构建时间）

Build Time 是指在部署前执行 next build 命令时发生的阶段。 在这个阶段，Next.js 会：

主要任务：

  • 编译和打包代码（TypeScript → JavaScript，JSX → JavaScript）
  • 静态分析和优化 生成静态页面（Static Site Generation - SSG） 执行 getStaticProps 和 getStaticPaths 代码分割和 bundle 优化 图片优化和资源处理

特点：

  • 只执行一次（除非重新构建）
  • 可以执行耗时操作，因为不影响用户体验
  • 生成的文件存储在 .next 文件夹中
  • 适合数据预获取和预渲染

Runtime（运行时间）

Runtime 是指应用程序在生产环境中实际运行时的阶段。包括：

主要任务：

  • 处理用户请求
  • 执行服务器端渲染（SSR）
  • 运行 API 路由
  • 执行 getServerSideProps
  • 处理动态路由
  • 中间件执行

特点：

  • 每次用户访问都会执行
  • 需要快速响应，影响用户体验
  • 可以访问请求上下文（cookies、headers 等）
  • 适合个性化内容和实时数据
  • Cloudflare Workers 的 wrangler.toml 中定义的环境变量在 Runtime（运行时） 阶段才能获取到，而不是在 Build Time。