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

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。

React Server Component

Server Side Rendering

generateStaticParams