页面无需按请求变化时，用静态渲染/SSG 在构建期预生成…

适用于 About、博客、商品列表等不随请求变化的页面，在构建时预渲染为静态 HTML 并通过 CDN 提供。

适用场景

解决思路

1. 使用 `getStaticProps`（Pages Router）或 async components（App Router）在构建时获取数据。
2. 使用 `getStaticPaths` / `generateStaticParams` 预渲染动态路由。
3. 对需要周期性更新的页面考虑 Incremental Static Regeneration (ISR)。
4. 部署到 CDN 以利用边缘缓存性能。
5. 构建站点时（例如运行 `next build`）将页面预渲染为 HTML 文件，例如 `about.html` 可通过 `/about` 访问。
6. 对列表页（所有条目）：在页面组件中导出 `getStaticProps()`；该函数在构建服务器上构建时运行以获取数据，返回 `props`；页面组件在构建时接收 `products` prop。
7. `getStaticProps` 不会包含在客户端 JS bundle 中，因此可以直接从数据库获取数据。
8. 对详情页（每个条目）：结合动态路由使用 `getStaticPaths()`；获取 products，映射为 `{ params: { id: product.id } }`；返回 `{ paths, fallback: false }`，`fallback: false` 表示没有正确 id 的页面会 404。
9. 在详情页的 `getStaticProps({ params })` 中使用 `params.id` 获取单个产品数据并作为 `props` 传给页面组件。
10. 将生成的静态 HTML 文件放在服务器或 CDN 上，客户端请求时获取；静态文件也可被缓存以提升韧性。
11. 保持客户端 JS 最小化，使静态页面在收到响应后尽快可交互。
12. 内容变化后重新构建并重新部署 SSG 站点，避免展示过期内容。
13. 选择性能好的托管平台，最好部署到多个 CDN 以利用边缘缓存。

适用边界 · 注意事项

• 高度动态、个性化的内容（例如用户仪表盘、实时 feed），这些内容会按请求变化。
• 数据集太大，导致构建时间不切实际且没有使用 ISR。
• 需要认证后才能显示、无法在构建时预渲染的内容。