Next.js 13+中如何从客户端组件刷新重定向后的页面

问题情况 #

在页面里引入了客户端组件，组件内的按钮点击后先发送POST请求，再通过next/navigation的useRouter()跳转到/abc页面。流程能正常执行，但跳转后的页面无法自动获取最新数据，必须手动刷新才能显示更新内容。使用的Next.js版本为13.4.19。

相关代码示例 #

/home page.tsx #

import { getA } from "@/action";
import React from "react";

export default function A() {
  // 发起获取请求
  const response = getA();
  return (
    <section>
      <div className="container">
        <ComponentX elements={response} />
      </div>
    </section>
  );
}

ComponentX.tsx（客户端组件） #

"use client";
import { Button } from "@nextui-org/react";
import { useRouter } from "next/navigation";
import { saveX } from "@/action";

export default function ComponentX() {
  const router = useRouter();
  const create = () => {
    // 发起POST请求
    saveX(req);
    router.push("/abc");
  };

  return (
    <div>
      <Button onClick={create}>Create</Button>
    </div>
  );
}

/abc page.tsx #

import { getX } from "@/action";
import React from "react";

export default function ABC() {
  // 发起获取请求
  const response = getX();
  return (
    <section>
      <div className="container">
        <ComponentY elements={response} />
      </div>
    </section>
  );
}

问题根源 #

1. saveX是异步操作，但原代码未等待请求完成就执行跳转，可能POST请求还未写入新数据就跳转到目标页面；
2. Next.js客户端导航会缓存页面内容，跳转时直接读取缓存，而非重新发起请求获取最新数据。

解决方案 #

1. 等待POST请求完成再跳转（基础修复） #

将create改为异步函数，确保POST请求处理完毕后再执行跳转：

const create = async () => {
  await saveX(req); // 等待POST请求完成
  router.push("/abc");
};

2. 预加载刷新缓存 #

如果仍存在缓存问题，在跳转前预加载目标页面的最新数据，覆盖缓存内容：

const create = async () => {
  await saveX(req);
  router.prefetch("/abc"); // 预加载最新数据
  router.push("/abc");
};

3. 给目标页面禁用缓存 #

方法A：修改数据获取函数的缓存策略

如果getX内部使用fetch，添加cache: "no-store"强制每次请求获取最新数据：

// @/action中的getX函数
export async function getX() {
  const res = await fetch("/api/x-data", {
    cache: "no-store" // 禁用缓存，每次请求都拿最新数据
  });
  return res.json();
}

方法B：页面添加revalidate属性

在/abc页面组件顶部设置revalidate: 0，强制每次请求都重新验证数据：

export const revalidate = 0; // 禁用缓存

export default function ABC() {
  const response = getX();
  return (
    <section>
      <div className="container">
        <ComponentY elements={response} />
      </div>
    </section>
  );
}

内容的提问来源于stack exchange，提问作者Veysel Öz