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

Question

场景

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

问题

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

问题

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

Answer 1

运行以下代码

pages/index.js

import Router from 'next/router';

function Index({ isServer }) {
  console.log('render', new Date());

  return (
    <div>
      <h1>Home page. Is it on server? - {isServer ? 'Yes' : 'No'}</h1>

      <button type="button" onClick={() => Router.push('/')}>
        Reload me
      </button>
    </div>
  );
}

Index.getInitialProps = async ({ req }) => {
  return { isServer: !!req };
};

export default Index;

我可以看到即使在单击 "Reload me" 之后它 console.log 也只在服务器上呈现一次。我也可以看到 isServer 在 "reload" 之后也等于 false。

您如何准确地重新加载页面，以便您看到它是在服务器端呈现的？

PS

截图如下：

Answer 2

假设，用户在

http://www.example.com/profile

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

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

记住，你必须像这样导入路由器对象import Router from "next/router";

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

Answer 3

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

这对我有用：

import Router from 'next/router'

Router.reload(window.location.pathname);

Answer 4

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

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

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

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

Trigger client-side reload in next.js

node.js

next.js

场景

问题

问题