vercel-optimize - content-site

内容站点文档、博客、知识库、以静态页面为主的营销相关内容。创作可能是无头 CMS 驱动或仓库内 markdown。典型计费形态Edge Requests 主导每次页面浏览都是一次边缘请求静态资源更是如此。Image Optimization 通常是第 2 大行项目。Function Duration 往往较低——大多数页面应该是静态或 ISR。优先级模式预渲染一切可以预渲染的内容。博客索引、单篇文章、文档页面、分类页面。App Router 使用generateStaticParamsPages 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 横幅