编辑“︁Next.js缓存机制”︁

= Next.js缓存机制 =

== 介绍 ==
Next.js 缓存机制是框架内置的优化策略，用于提升应用性能并减少不必要的计算或数据请求。它通过存储渲染结果、静态资源和数据响应来加速页面加载，同时支持动态内容的实时更新。理解缓存机制对于构建高效Next.js应用至关重要，特别是在处理[[静态生成(SSG)|SSG]]、[[服务器端渲染(SSR)|SSR]]和[[客户端渲染(CSR)|CSR]]时。

== 核心缓存类型 ==
Next.js 包含多级缓存系统：

=== 1. 构建时缓存（Build-time Cache） ===
在<code>next build</code>阶段生成：
<syntaxhighlight lang="bash">
# 输出示例
○  /about                             2.5 kB         77.8 kB
●  /blog/[slug]                      2.8 kB         78.1 kB (ISR: 10 seconds)
</syntaxhighlight>
* 静态页面（<code>●</code>标记）会被缓存在CDN
* 支持[[增量静态再生(ISR)|ISR]]的页面会标注重新验证时间

=== 2. 请求时缓存（Request-time Cache） ===
通过<code>fetch</code>API或路由处理器实现：
<syntaxhighlight lang="javascript">
// 数据缓存示例
async function getData() {
  const res = await fetch('https://api.example.com/data', {
    next: { revalidate: 60 } // 每60秒重新验证
  });
  return res.json();
}
</syntaxhighlight>

=== 3. 路由缓存（Router Cache） ===
客户端内存中的临时缓存：
<mermaid>
graph LR
    A[访问 /products] --> B[缓存路由]
    B --> C[快速导航回/products]
    C --> D[瞬时加载]
</mermaid>

== 缓存控制策略 ==

=== 静态生成（SSG） ===
完全静态页面默认永久缓存：
<syntaxhighlight lang="javascript">
export async function getStaticProps() {
  return {
    props: {}, // 无revalidate参数
  };
}
</syntaxhighlight>

=== 增量静态再生（ISR） ===
混合静态+动态缓存：
<syntaxhighlight lang="javascript">
export async function getStaticProps() {
  return {
    props: {},
    revalidate: 30, // 最多每30秒更新一次
  };
}
</syntaxhighlight>

=== 动态渲染（Dynamic Rendering） ===
完全跳过缓存：
<syntaxhighlight lang="javascript">
export const dynamic = 'force-dynamic'; // 禁用所有缓存
</syntaxhighlight>

== 实际案例 ==

=== 电商产品页面 ===
结合ISR和客户端缓存：
<syntaxhighlight lang="javascript">
// pages/products/[id].js
export async function getStaticProps({ params }) {
  const product = await getProductFromDB(params.id);
  return {
    props: { product },
    revalidate: 3600, // 每小时重新生成
  };
}

export async function getStaticPaths() {
  return {
    paths: [],
    fallback: 'blocking', // 动态路径按需生成
  };
}
</syntaxhighlight>

=== 实时仪表盘 ===
短周期缓存+客户端轮询：
<syntaxhighlight lang="javascript">
// 组件内
useEffect(() => {
  const interval = setInterval(() => {
    fetch('/api/metrics', { cache: 'no-store' })
      .then(res => res.json())
      .then(updateMetrics);
  }, 5000);
  return () => clearInterval(interval);
}, []);
</syntaxhighlight>

== 高级配置 ==

=== 自定义缓存键 ===
通过<code>unstable_cache</code> API：
<syntaxhighlight lang="javascript">
import { unstable_cache } from 'next/cache';

const getData = unstable_cache(
  async () => db.query('SELECT * FROM posts'),
  ['all-posts'],
  { revalidate: 60 }
);
</syntaxhighlight>

=== 缓存清除 ===
使用路由处理器：
<syntaxhighlight lang="javascript">
// app/api/revalidate/route.js
export async function POST(request) {
  const { path } = await request.json();
  revalidatePath(path);
  return Response.json({ revalidated: true });
}
</syntaxhighlight>

== 数学原理 ==
缓存效率可通过命中率计算：
<math>
Hit\ Ratio = \frac{Cache\ Hits}{Total\ Requests}
</math>

理想ISR场景下的成本节省：
<math>
Cost\ Saving = \frac{SSR\ Cost - ISR\ Cost}{SSR\ Cost} \times 100\%
</math>

== 最佳实践 ==
* 静态内容使用SSG+长期缓存
* 频繁更新内容采用ISR+短周期验证
* 实时数据结合<code>cache: 'no-store'</code>
* 监控缓存命中率调整策略

== 常见问题 ==

'''Q: 如何强制清除特定路由缓存？'''
A: 使用<code>revalidatePath</code>或<code>revalidateTag</code> API

'''Q: 开发模式缓存行为是否不同？'''
A: 是的，开发模式下默认禁用大多数缓存，可通过<code>next dev --no-cache</code>显式控制

'''Q: 如何验证缓存是否生效？'''
A: 检查响应头中的<code>x-nextjs-cache</code>字段：
<syntaxhighlight lang="http">
HTTP/1.1 200 OK
x-nextjs-cache: HIT
</syntaxhighlight>

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js数据获取]]