在next.js中通过routechange保留一些数据

Question

所以基本上我们在自定义pages/_app.jsx中有一个初始提取，它首先获取页眉/页脚的网站设置和导航。 这个数据我只想获取一次，但每次路由更改客户端都会获取。 无论如何在应用程序容器中初始提取后仍然保留一些数据？

这是我的代码：

import React from 'react'
import App, { Container } from 'next/app'
import Header from '../components/Header';
import Footer from '../components/Footer';

class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {}

    const res = await fetch(`http://localhost:3000/navigation`)
    const nav = await res.json();

    const ss = await fetch(`http://localhost:3000/site-settings`);
    const settings = await ss.json();

    var culture = "en-us";
    var root = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
      if (pageProps && pageProps.pageContext) {
        culture = pageProps.pageContext.culture || "en-us";
        root = nav.message.find(nav => !nav.parentPage && nav.culture === culture);
      }
    }

    return { 
      pageProps, 
      navigation: nav.message,
      settings,
      culture,
      root
    }
  }

问题是我的_app.jsx的getInitialProps正在每条路由上运行，从而不必要地获取客户端已有的数据。

Answer 1

这里有三个不同的问题：首先，在_app执行提取将保证每个页面的执行，因为它用于初始化每个页面。 那不是你想要的。 相反，这应该发生在适当的页面中。

其次，这不应该在getInitialProps发生，因为这会延迟页面的加载。 如果是这样的话，请继续这样做 - 但最好尽快渲染页面，然后填写空白，而不是显示空白屏幕。

第三，也是最重要的，您需要加载所需的信息，并在所有页面之间共享的某种应用程序状态下进行管理。 这可以在redux ，React Context或您自己的解决方案中完成，如果其他解决方案对您的项目感觉有点过分，则可以存储收到的信息。 这样你就可以在获取之前检查它是否拥有它，并且只获取一次。