通过 next.js 中的 routechange 持久化一些数据答案

【问题标题】：Persist some data through routechange in next.js通过 next.js 中的 routechange 持久化一些数据
【发布时间】：2019-08-26 01:41:42
【问题描述】：

所以基本上我们在自定义pages/_app.jsx 中有一个初始获取，它首先获取页眉/页脚的站点设置和导航。我希望只获取一次此数据，但是它会在每个 routechange 客户端获取。无论如何，在应用容器中初始提取后是否需要保留一些数据？

这是我的代码：

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 正在每条路由上运行，发出不必要的请求以获取客户端已有的数据。

【问题讨论】：

取而代之的是在_document 中获取数据
@joelgullander 我面临着类似的问题。您能分享一下您遵循的策略吗？

标签： javascript reactjs next.js

【解决方案1】：

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

其次，这不应该发生在getInitialProps，因为这会延迟页面的加载。如果这是有意为之，请继续执行此操作 - 但最好尽快呈现页面，然后再填补空白，而不是显示空白屏幕。

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

【讨论】：