内容站点
文档、博客、知识库、以静态页面为主的营销相关内容。创作可能是无头 CMS 驱动或仓库内 markdown。
典型计费形态
Edge Requests 主导（每次页面浏览都是一次边缘请求；静态资源更是如此）。Image Optimization 通常是第 2 大行项目。Function Duration 往往较低——大多数页面应该是静态或 ISR。
优先级模式
- 预渲染一切可以预渲染的内容。博客索引、单篇文章、文档页面、分类页面。App Router 使用
generateStaticParams，Pages Router 使用getStaticPaths。任何 CMS 驱动的内容都应通过 webhook 重新验证运行，而不是在每次请求时运行。 - 带合理节奏的 ISR。需要较新内容但不需要实时准确性的页面使用 ISR。文档以
revalidate: 3600（每小时）为好的起点；博客索引页用60s。 - 每个图像资源使用
next/image。Hero 图像、作者照片、文章内联图像、OG 图像。即使仅缩略图的站点也受益于格式协商（WebP/AVIF）。 - 自托管字体使用
next/font。消除 FOIT/FOUT，消除第三方请求，防止 CLS。 - 悬停预取。
next/link默认这样做。对于其它框架，考虑在可见链接集上使用基于 intersection-observer 的预取。
常见陷阱
- 博客索引上的
force-dynamic。几乎从不必要。索引可以 ISR 或完全静态。 - 每次请求渲染 Markdown。如果您在请求时解析 MDX，您是在为应该是静态资产的东西支付函数持续时间成本。构建时 MDX → 静态 HTML。
- 每次请求重建搜索。由每次按键查询 CMS 的函数支撑的站点搜索。移到搜索索引（Algolia、Pagefind、构建时生成）并从 CDN 提供。
- CMS 预览路由泄漏到生产流量。
/preview/[slug]路由实际上是一条额外的渲染路径；有时被误从生产调用。审计引用来源。
交叉引用
https://nextjs.org/docs/app/api-reference/functions/generate-static-params— 用于预渲染https://vercel.com/docs/incremental-static-regeneration— 用于 ISR 修复https://nextjs.org/docs/app/api-reference/components/image— 图像优化https://nextjs.org/docs/app/api-reference/components/font— 自托管字体vercel-react-best-practices:bundle-defer-third-party— 延迟分析/ Cookie 横幅
