如何通过缓存加速你的 Next.js 应用

Source: Dev.to

（请提供您希望翻译的正文内容，我将为您翻译成简体中文并保留原始的格式、Markdown 语法以及技术术语。）

什么是缓存？

缓存基本上是指记住已经获取或计算过的数据，这样就不必再次执行相同的操作。

• 与其每次用户访问页面时都调用 API 或查询数据库，你的应用可以临时存储这些数据，并在需要更新之前重复使用它们。
• 可以把它想象成大脑记住了你的家庭地址。每次填写表单时都不需要再查找。同样的概念也适用于你的应用。

缓存可以发生在哪里？

在 React 和 Next.js 中，缓存可以发生在不同层级：

如果明智地使用，每一层都能让你的应用更快。

为什么使用缓存？

• 使页面加载更快 为用户。
• 降低服务器成本 并减少 API 使用。
• 让你的应用感觉更流畅 并更具响应性。
• 通过缩短页面加载时间提升 SEO 和核心网页指标。

Next.js 缓存特性

1. fetch() 与内置缓存控制

// Example: cache for 1 hour
const data = await fetch('https://api.example.com/posts', {
  next: { revalidate: 3600 }   // seconds
});

• revalidate 告诉 Next.js 在指定的秒数后 重新获取 数据。
• 非常适合不经常变化的数据（博客文章、商品列表、静态内容）。

如果你始终需要最新数据：

const data = await fetch('/api/always-fresh', {
  cache: 'no-store'   // never cache
});

2. 缓存组件（'use cache' 指令）

// Sidebar component – cached
async function Sidebar() {
  'use cache';
  const categories = await fetch('/api/categories');
  return (
    <>
      {/* Sidebar content here */}
    </>
  );
}

• 在服务器组件内部使用 'use cache' 可以只缓存 该部分 UI。
• 适用于侧边栏、导航或任何很少变化的界面。

3. 路由 / 页面片段缓存（SSG 与 ISR）

// pages/blog/[slug].tsx
export const revalidate = 3600; // 1 hour

• Next.js 会在构建时 预渲染 页面，并在指定间隔后在后台 重新验证。
• 非常适合博客文章、商品页面等——在保持静态速度的同时提供动态新鲜度。

React‑Side 缓存技术

1. 记忆化（useMemo 与 useCallback）

import { useMemo } from 'react';

const sortedList = useMemo(() => {
  return data.sort((a, b) => a.name.localeCompare(b.name));
}, [data]);   // 仅在 `data` 变化时重新计算

• 防止昂贵的计算（如排序）在每次渲染时都执行。

2. 带内置缓存的数据获取库

SWR 示例

import useSWR from 'swr';

const fetcher = (url: string) => fetch(url).then(res => res.json());

export default function Profile() {
  const { data, error } = useSWR('/api/user', fetcher, {
    refreshInterval: 60000 // 每分钟重新验证一次
  });

  if (error) return <div>Error loading</div>;
  if (!data)   return <div>Loading...</div>;

  return <div>Hello {data.name}</div>;
}

• SWR 缓存响应，在后续渲染时立即返回，并在后台 重新验证。
• React Query 的工作方式相同——任选其一，根据你的风格选择即可。

我的简易缓存检查清单

1. 识别 不经常变化的数据。
2. 保持 用户特定 或 时间敏感 数据为动态。
3. 仅在能提升性能的地方进行缓存。
4. 为每个缓存条目 设置重新验证时间 或过期时间。
5. 测试并监控 结果（例如 Lighthouse、服务器日志）。

缓存 不是 把所有东西都缓存，而是缓存正确的东西。

常见缓存错误

黄金法则：在速度和新鲜度之间取得平衡。

真实场景的平衡（我的示例）

• 侧边栏分类 & 精选文章 – 使用 'use cache' 进行缓存。
• 文章列表 – 使用 fetch(..., { next: { revalidate: 600 } }) 获取（每 10 分钟重新验证一次）。
• 用户专属区域（评论、通知） – 始终保持动态（不缓存）。

这样即可在 不牺牲准确性 的前提下实现站点快速响应。

TL;DR

• 缓存 = 记住数据，这样你就不必重复工作。
• 使用 Next.js 的 fetch 选项、Cache Components 和 ISR 实现 服务器端 缓存。
• 使用 React 的 useMemo、useCallback，以及 SWR 或 React Query 等库实现 客户端 缓存。
• 缓存 静态内容，保持 动态内容 新鲜，并始终设定重新验证策略。

缓存是让你的应用感觉瞬间响应的最简便方法之一。

祝编码愉快！ 🚀

让你的 React 或 Next.js 应用感受闪电般的速度

你不必重构整个系统就能看到效果——只需从小处入手。缓存那些不经常变化的部分，进行测试，然后逐步扩展。

随着 Next.js 的快速演进，路由缓存、fetch 级别缓存和缓存组件等功能让性能优化比以往更简单。

如果你聪明地使用缓存，你的应用不仅加载更快，还能以更少的资源处理更多用户。

---

感谢阅读。如果你想看到更多类似内容，请查看我的其他博客，我会分享关于 React、Next.js 和 网页性能 的实用见解。