在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或您自己的解決方案中完成，如果其他解決方案對您的項目感覺有點過分，則可以存儲收到的信息。 這樣你就可以在獲取之前檢查它是否擁有它，並且只獲取一次。