NextJS：如何将数据从一页发送到另一页的getInitialProps函数

Question

我正在尝试将数据从页面B（登录）发送到页面A的（索引） getInitialProps因为我需要页面A的getInitProps的密钥才能实际获取道具...

我目前正在尝试通过向自定义快速路由发送POST请求并使用该路由来呈现Page服务器端来执行getInitialProps。 但是问题是浏览器即使在服务器端构建页面也不会呈现该页面。

来自登录页面的POST请求（发生在客户端）：

const headers = {'Content-type': 'application/json; charset=UTF-8'}
await fetch(`${getRootUrl()}/loadKey`, {method: "POST", body: JSON.stringify({key}), headers})

快速路线：

server.post('/loadKey', (req, res) => {
    // const {key} = req.body
    // console.log(key)
    next({dev}).render('/') //index page
})

密钥已正确记录，在终端中，nextjs表示正在构建索引页面，并且运行了getInitialProps，但浏览器上没有任何反应。 没有重定向。

我尝试使用express.redirect ， express.render ，并且尝试强制客户端重定向，但是对于前两个，当我使用next.render时，会发生相同的事情。 页面被构建，getInitialProps运行，但是浏览器上没有重定向发生。 当我使用Link或Router强制进行重定向时，Index的getInitialProps将不会获得从POST请求传递的密钥。

Answer 1

试试这个

server.post('/loadKey', (req, res) => {
    const {key} = req.body
    // Do whatever you need to do
    const actualPage = '/'
    const queryParams = { key }
    next({dev}).render(req, res, actualPage, queryParams)
})

现在，您应该可以通过道具访问索引页面中的key 。

Answer 2

您的方法仅适用于服务器端呈现的页面（因为您需要使用req ），而不适用于客户端。 即使您一次使用它，尝试导航到该路线时，逻辑也会中断，或者您最终可能会将应用程序的一部分变成SPA，然后在访问此页面时会有所刷新。

从nextjs文档中：

对于初始页面加载，getInitialProps仅在服务器上执行。 仅当通过Link组件或使用路由API导航到其他路由时，才会在客户端上执行getInitialProps。

我过去使用过的一些可能的解决方案：

• 将页面B实施为组件，如果满足某些条件，则从页面A调用它。 页面B没有getInitialProps，但是页面A有，并且您似乎需要了解页面A的getInitialProps才能正确呈现页面B，所以为什么不使用单个页面呢？ 用户不会知道区别。

• 使用Redux等。 您可以将道具的值存储在商店中，该道具在全球都可以使用，甚至可以存储到getInitialProps。 但是要当心！ 在尝试访问第B页上的内容之前，请将其保存到商店。页面的getInitialProps在HoC之前运行。