Next.js 单击按钮时获取数据

Question

我有一个服务器组件，可以获取数据并通过 props 将其传递给子组件。问题是当我刷新页面时，数据没有更新；就好像它仍然被缓存一样。

这就是为什么我想要一个按钮来再次手动获取数据，但我不知道该怎么做，因为数据是从服务器组件传递到子组件的。

因此，数据应该始终从主页获取，但我不能使用客户端组件，原因有两个：

1-因为我想利用服务器组件的优势，将主页设为客户端意味着所有子组件也将是客户端。

2-我从中获取数据的 API 专门要求从后端进行获取，这就是我使用 next.js 从服务器组件获取数据的原因。

我使用 Next.js 14.1.2，函数 getSummoner 来自 .js 文件，该文件执行所有获取和 js 逻辑

这是我的代码：

`从“@/js/getSummoner”导入getSummoner；

const Summoner = async ({ params }) => { const 搜索 = params.search;

让召唤者=等待getSummoner（搜索）;

if（召唤者）{

return (
  <div className="flex flex-col items-center gap-2 mb-2">
    <UpdateButton /> // This button should fetch the data again when clicked

    // Other components that use the summoner data
  </div>
);

} };

导出默认搜索；`

Answer 1

您可以像这样在页面路由中设置

dynamic = 'force-dynamic'

或

revalidate = 0

export const dynamic = 'force-dynamic'

// or

export const revalidate = 0

这将跳过完整路由缓存和数据缓存。这意味着将在每个传入服务器请求时渲染组件并获取数据，请阅读更多内容here