如何在 Next JS > 13 中从客户端组件刷新重定向页面

Question

我有在页面中调用的客户端组件。该组件上有一个按钮，单击按钮，它会发出 POST 请求，然后重定向页面。为此，我使用了

useRouter()

中的

next/navigation

。一切都很好，但我需要刷新重定向页面，因为未获取最新响应。

有什么解决办法吗？谢谢。

/主页.tsx

    import { getA } from "@/action";
    import React from "react";
    
    export default function A() {
        // this func make fetch request
        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 = () => {
            // this makes POST request
            saveX(req);
            router.push("/abc");
        }
            
        return (
            <div>
                <Button onClick={create}>
                   Create
                </Button>
            </div>
        );
    }

/abc 页.tsx

    import { getX } from "@/action";
    import React from "react";
    
    export default function ABC() {
        // this func make fetch request
        const response= getX();
        return (
            <section>
                <div className='container'>
                    <ComponentY elements={response}/>
                </div>
            </section>  
        );
    }

当点击

Create Button

时，

save

操作完成并重定向

/abc

页面但是，我需要刷新

abc

页面，但事实并非如此。

下一个 Js 版本：19.4.13

更新

可能的解决方案之一：调用

prefetch()

函数。

    const create = () => {
        // this makes POST request
        saveX(req);
        router.prefetch("/abc");
        router.push("/abc");
    }

Answer 1

这很可能与缓存重新验证问题有关，并且缓存有多层。

---

首先，页面 /123 是一个服务器组件，所有服务器组件默认都会缓存其

fetch

调用。因此，如果调用相同的 URL 和参数，

getX()

将得到相同的结果。您可以强制 Next.js 重新验证为其应用标签名称的特定缓存：fetch

然后从修改数据的函数中调用

function getX(){
...
const res = fetch(url, {next: {tags: ['x'] } });
...
};
    

：

revalidateTag

这样，页面 

/123

的下一次渲染路线将呈现新数据。 其次，有一个客户端 React Router Cache，它只记住导航和预取的路由。它存储基于缓存时间，通常为 30 秒，您可以使用

function saveX(req) {
...
revalidateTag('x');
};

或调用

revalidateTag

的服务器操作强制重新验证它。Next 的缓存系统很复杂，您可以查看

文档页面

了解更多详细信息。