时间戳

首页 > 解决方案 > 通过 next.js 中的 routechange 持久化一些数据

javascript - 通过 next.js 中的 routechange 持久化一些数据

问题描述

所以基本上我们在我们的自定义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
    }
  }

问题是我的 getInitialProps_app.jsx正在每条路由上运行，发出不必要的请求来获取客户端已经拥有的数据。

标签： javascriptreactjsnext.js

解决方案

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

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

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

推荐阅读