为什么每次更改路线时App.js中的getInitialProps都会运行？

Question

我正在App.js内的getInitialProps内部进行提取请求。然后将获取的数据作为道具传递给ContextProvider组件。

目的是在应用程序首次加载时使API一次调用，以便应用程序的其余部分可以访问数据。 getInitialProps的行为与初始页面加载时的预期行为相同，并且获取请求在服务器上运行。但是，每次应用程序中的路由发生更改时，App.js中getInitialProps中的获取请求都会在客户端上再次运行。这将导致路由更改挂起，直到获取请求完成为止。

为什么每次更改路线时App.js中的getInitialProps都会运行？是否有更好的方法（通过SSR）将获取的数据传递给应用程序？

如果您想仔细看看，这里是文件的链接：Github Repository - App.js

import React from 'react';
import App, { Container } from 'next/app';
import ContextProvider from '~/provider/ContextProvider';
import fetch from 'isomorphic-unfetch';

import Layout from '~/components/layouts/default';

export default class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    // Get Data
    const availabilityData = await fetch('https://cms.dbox.com/wp-json/wp/v2/hsp_availability');

    // More get requests

    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { availabilityData, pageProps };
  }


  render() {
    const { Component, pageProps } = this.props;

    return (
      <Container>
        <ContextProvider {...this.props}>
          <Layout>
            <Component {...pageProps} />
          </Layout>
        </ContextProvider>
      </Container>
    );
  }
}