编辑“︁Next.js缓存策略”︁

= Next.js缓存策略 =

'''Next.js缓存策略'''是提升应用性能与SEO表现的核心技术之一，通过合理配置缓存机制，可显著减少服务器负载、加快页面加载速度并优化用户体验。本章将系统讲解Next.js中的缓存类型、实现方式及实际应用场景。

== 缓存概述 ==
缓存（Caching）是一种将频繁访问的数据或资源存储在临时存储区域（如内存、CDN或浏览器）的技术。在Next.js中，缓存主要作用于以下场景：
* '''静态生成（SSG）'''：预渲染页面的缓存
* '''服务器端渲染（SSR）'''：动态内容的缓存控制
* '''客户端导航'''：路由间的数据缓存
* '''图片/资源优化'''：通过内置组件自动缓存

== 缓存类型 ==
Next.js支持多层级缓存策略：

=== 1. 全页面缓存 ===
适用于SSG生成的页面，通过`revalidate`参数实现增量静态再生（ISR）：
<syntaxhighlight lang="javascript">
// pages/blog/[slug].js
export async function getStaticProps({ params }) {
  return {
    props: { post: await getPost(params.slug) },
    revalidate: 60 // 每60秒重新生成页面
  }
}
</syntaxhighlight>

=== 2. 数据缓存 ===
通过`getStaticProps`或API路由实现数据缓存：
<syntaxhighlight lang="javascript">
// 使用SWR库实现客户端数据缓存
import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)
  // 自动缓存数据并支持重新验证
}
</syntaxhighlight>

=== 3. 路由缓存 ===
Next.js自动缓存预取的路由（通过`next/link`组件）：
<syntaxhighlight lang="javascript">
<Link href="/about" prefetch={true}>
  <a>About</a> // 预加载目标页面资源
</Link>
</syntaxhighlight>

== 缓存控制机制 ==
Next.js提供多种缓存控制方式：

=== Cache-Control Headers ===
在API路由中设置响应头：
<syntaxhighlight lang="javascript">
// pages/api/data.js
export default function handler(req, res) {
  res.setHeader('Cache-Control', 's-maxage=3600, stale-while-revalidate')
  res.json({ data: 'cached for 1 hour' })
}
</syntaxhighlight>

=== 运行时配置 ===
通过`next.config.js`修改默认缓存行为：
<syntaxhighlight lang="javascript">
module.exports = {
  experimental: {
    staleTimes: {
      dynamic: 60, // 动态页面保持60秒新鲜
      static: 300  // 静态页面保持300秒新鲜
    }
  }
}
</syntaxhighlight>

== 缓存策略优化 ==

=== 缓存失效模式 ===
<mermaid>
graph LR
  A[用户请求] --> B{缓存存在?}
  B -->|是| C[返回缓存]
  B -->|否| D[生成新内容]
  D --> E[更新缓存]
</mermaid>

=== 混合缓存策略 ===
结合SSG、SSR和ISR的典型配置：
<syntaxhighlight lang="javascript">
// 页面级混合缓存
export async function getStaticProps() {
  return {
    props: { /* ... */ },
    revalidate: 10, // ISR每10秒验证
    unstable_includeFiles: ['public/data.json'] // 包含依赖文件
  }
}
</syntaxhighlight>

== 实际案例 ==

=== 电商产品页面 ===
'''场景'''：商品详情页需要快速加载但数据可能变更
'''解决方案'''：
<syntaxhighlight lang="javascript">
export async function getStaticPaths() {
  return {
    paths: getAllProductIds(),
    fallback: 'blocking' // 未预生成的页面按需构建并缓存
  }
}

export async function getStaticProps({ params }) {
  return {
    props: { product: await fetchProduct(params.id) },
    revalidate: 3600 // 每小时重新验证
  }
}
</syntaxhighlight>

=== 实时仪表盘 ===
'''场景'''：需要频繁更新但部分数据可缓存
'''解决方案'''：
<syntaxhighlight lang="javascript">
// 组件级数据获取
function Metrics() {
  const { data } = useSWR('/api/metrics', {
    refreshInterval: 5000,
    dedupingInterval: 2000 // 防抖2秒内重复请求
  })
  return <div>{data}</div>
}
</syntaxhighlight>

== 高级技巧 ==

=== 缓存分区 ===
通过自定义缓存键实现细粒度控制：
<syntaxhighlight lang="javascript">
function useUserData(userId) {
  return useSWR(`/api/user/${userId}`, {
    revalidateOnFocus: false,
    shouldRetryOnError: false
  })
}
</syntaxhighlight>

=== 性能指标 ===
缓存命中率计算公式：
<math>
Hit\ Ratio = \frac{Cache\ Hits}{Total\ Requests}
</math>

== 常见问题 ==

* '''Q: 如何强制清除缓存？'''
  A: 生产环境中可通过重新部署或调用API路由清除缓存

* '''Q: 开发模式为何看不到缓存效果？'''
  A: Next.js开发模式默认禁用缓存，需在production环境测试

* '''Q: 缓存会导致SEO内容过时吗？'''
  A: 合理设置`revalidate`周期可保证内容新鲜度

== 最佳实践 ==
1. 静态内容使用长期缓存（如设置`Cache-Control: public,max-age=31536000,immutable`）
2. 动态内容采用短周期验证（ISR的`revalidate`）
3. 关键路径预取资源（`next/link`的`prefetch`）
4. 监控缓存命中率与失效频率

通过合理配置Next.js缓存策略，可使应用在保持内容新鲜度的同时获得接近静态网站的加载速度。建议结合具体业务需求测试不同缓存参数的优化效果。

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js SEO与性能优化]]