缓存和重新验证

编程语言

515

缓存和重新验证

缓存

缓存是通过存储数据来减少对服务器请求数量的过程。Next.js 提供了一个内置的数据缓存功能，用于单独的数据请求，您可以对缓存行为进行精细控制。

fetch 请求

在 Next.js 15 中，fetch 请求默认不进行缓存。

要缓存单个 fetch 请求，您可以使用 cache: 'force-cache' 选项：


fetch('https://...', { cache: 'force-cache' })

数据获取库和 ORM

要缓存对数据库或 ORM 的特定请求，您可以使用 unstable_cache API：


import { getUser } from './data';
import { unstable_cache } from 'next/cache';

const getCachedUser = unstable_cache(async (id) => getUser(id), ['my-app-user']);

export default async function Component({ userID }) {
    const user = await getCachedUser(userID);
    return user;
}

数据重新验证

重新验证是清除数据缓存并重新获取最新数据的过程。当您的数据发生更改并希望在保持静态渲染速度的同时显示最新信息时，这非常有用。

缓存的数据可以通过两种方式重新验证：

基于时间的重新验证：在一定时间间隔后自动重新验证数据。这对于不经常变化且数据新鲜度要求不高的数据非常有用。
按需重新验证：基于某个事件（例如表单提交）手动重新验证数据。按需重新验证可以使用基于标签或路径的方法来一次性重新验证一组数据。这在希望尽快显示最新数据时非常有用（例如，当您的无头 CMS 的内容更新时）。

基于时间的重新验证

要在指定的时间间隔内重新验证数据，您可以使用 fetch 的 next.revalidate 选项来设置资源的缓存时长（以秒为单位）。


fetch('https://...', { next: { revalidate: 3600 } }) // 最多每小时重新验证一次

或者，要重新验证路由段中的所有请求，您可以使用路由段配置选项。


// layout.js 或 page.js
export const revalidate = 3600; // 最多每小时重新验证一次

了解基于时间的重新验证如何工作

注意事项：

如果您在一个静态渲染的路由中有多个 fetch 请求，并且每个请求的重新验证频率不同。最短的时间将用于所有请求。

对于动态渲染的路由，每个 fetch 请求将独立重新验证。

为了节省服务器资源，我们建议尽可能设置较长的重新验证时间。例如，1 小时而不是 1 秒。如果您需要实时数据，请考虑切换到动态渲染或客户端数据获取。

按需重新验证

可以使用 revalidatePath 和 revalidateTag API 按需重新验证数据。

在 Server Actions 或路由处理器中使用 revalidatePath 来重新验证特定路由的数据：


import { revalidatePath } from 'next/cache';

export async function createPost() {
    // 更改数据
    revalidatePath('/posts');
}

使用 revalidateTag 重新验证跨路由的 fetch 请求。

使用 fetch 时，您可以选择为缓存条目添加一个或多个标签。
然后，您可以调用 revalidateTag 来重新验证所有与该标签相关的条目。

例如，以下 fetch 请求添加了缓存标签 collection：


// app/page.tsx
export default async function Page() {
    const res = await fetch('https://...', { next: { tags: ['collection'] } });
    const data = await res.json();
    // ...
}

然后，您可以通过调用 revalidateTag 来重新验证此带有 collection 标签的 fetch 调用：


// @/app/actions.ts
'use server';

import { revalidateTag } from 'next/cache';

export async function action() {
    revalidateTag('collection');
}

了解按需重新验证如何工作。

错误处理和重新验证

如果在尝试重新验证数据时抛出错误，则会继续从缓存中提供最后成功生成的数据。在下次请求时，Next.js 将重试重新验证数据。

EchoEcho官方

无论前方如何，请不要后悔与我相遇。

1377

发布数

439

关注者

2222702

累计阅读

缓存和重新验证 3个月前

缓存