如何在Nextjs13上使用revalidatePath？

Question

我正在研究nextJs13，我不明白revalidatePath是如何工作的。

我不明白如何使用 revalidatePath，它是一个函数吗？或者是 GET 端点？

我有两个不同的页面，当我尝试修改第一页时，我需要此修改在第二页上可见。但是当我更改页面时，我可以看到修改。

我也尝试过使用无缓存，但我不能。有人可以帮助我吗？

  const editProfileUser = async (payload) => {

try {
  const editProfileUser = await putAutheticatedAPI({
    payload,
    endpoint: SETTINGS_PROFILE_USER,
    token: session.user.access_token,
  })
  


  revalidatePath('user/profile')

  return editProfileUser
} catch (e) {
  setError(true)
}

}

我收到此错误：

static generation store missing in revalidateTag user/profile

Answer 1

这是一个老问题，但您需要从服务器操作中调用

revalidatePath

。

我为您提供了一个使用 API 路由和服务器操作的代码示例。

这是我的

onSubmit

组件的

form

处理程序：

// NextJS form component
  async function onSubmit(values: ConfigFormData) {
    try {
      // stuff here
      await redirectTo("/configurations");
    } catch (err) {
      // stuff here
    }
  }

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

import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";

export async function redirectTo(path: string) {
  if (!path.startsWith("/")) {
    return { message: "Invalid path" };
  }

  revalidatePath(path);
  redirect(path);
}

所以，就我而言，

/configurations

是一个静态渲染的页面。使用 API 路由提交表单后，我在

onSubmit

处理程序中调用服务器操作。

revalidatePath

在服务器上运行，并且

redirect

已更新为

/configurations

。

我可以完全摆脱 API 路由并在服务器操作中完成所有操作，但这需要进行重大重构，而我目前不愿意这样做。