在 next.js 中触发客户端重新加载

Question

设想

索引页使用“getInitialProps”加载数据。然后我们创建一个可以创建新数据的对话框。创建新数据后，应重新加载当前页面。

问题

我们Router.replace('/')用来重新加载页面。但它会触发服务器端渲染。

题

我们需要的是客户端重新加载。应该在浏览器中调用“getInitialProps”函数。那么，如何进行客户端重载呢？

Answer 1

更好的选择是使用router.replace(router.asPath)

替换不会创建新的历史记录项，因此“后退”按钮按预期工作

本文解释了详细信息 https://www.joshwcomeau.com/nextjs/refreshing-server-side-props/

import { useRouter } from "next/navigation";

export default function Component(){
  const router = useRouter();

  router.replace(router.asPath);
}

Answer 2

自 NextJs 13 发布以来，新的路由器对象具有该refresh()方法，该方法允许您仅在客户端刷新（重新获取）数据，而无需重新加载整个页面。

它可以像下面这样使用：

import { useRouter } from "next/navigation";

export default function Component(){
  const router = useRouter();

  //this will reload the page without doing SSR
  router.refresh();
}

请记住，这是 NextJs 13 的功能，目前处于测试阶段。

在这里查看测试版文档

感谢 fireship 展示了该功能
https://www.youtube.com/watch?v=__mSgDEOyv8

Answer 3

假设用户在

http://www.example.com/profile

用户已编辑个人资料，并且由于某种原因，您需要重新加载同一页面。

如果您的情况与此类似，您可以使用Router.reload();

请记住，您必须像这样导入 Router 对象import Router from "next/router";

欲了解更多信息：https://nextjs.org/docs/api-reference/next/router#routerreload

Answer 4

没有看到我真正想要的答案，

这对我有用：

import Router from 'next/router'

Router.reload(window.location.pathname);

Answer 5

window.location.reload()如果您想在 nextjs 版本 13 中在客户端刷新，请使用。