Next.js - 理解 getInitialProps

Question

我有一个使用 next.js 和 Apollo/Graphql 的应用程序，我正在尝试完全了解getInitialProps生命周期挂钩的工作原理。getInitialProps在我的理解中，生命周期用于设置一些初始道具，这些道具将在应用程序首次加载时呈现服务器端，可以使用从数据库中预取数据以帮助 SEO 或只是为了提高页面加载时间。我的问题是这样的：每次我有一个query组件在我的应用程序中获取组件中的一些数据时，我是否必须使用getInitialProps以确保数据将在服务器端呈现？我的理解也是getInitialProps它只适用于页面索引组件（以及在 中_app.js），这意味着组件树中较低的任何组件都无法访问此生命周期，并且需要从上往下获取一些初始道具在页面级别，然后让它们向下传递组件树。（如果有人能证实这个假设会很棒）这是我的代码：_app.js（在/pages文件夹中）import App, { Container } from 'next/app';import { ApolloProvider } from 'react-apollo';class AppComponent extends App {  static async getInitialProps({ Component, ctx }) {    let pageProps = {};    if (Component.getInitialProps) {      pageProps = await Component.getInitialProps(ctx)    }    // this exposes the query to the user    pageProps.query = ctx.query;    return { pageProps };  }  render() {    const { Component, apollo, pageProps } = this.props;    return (      <Container>        <ApolloProvider client={apollo}>           <Component client={client} {...pageProps} />                       </ApolloProvider>      </Container>    );  }}export default AppComponent;Index.js（在/pages/users文件夹中）import React, { PureComponent } from 'react';import { Query } from 'react-apollo';import gql from 'graphql-tag';const USERS_QUERY = gql`  query USERS_QUERY {    users {      id      firstName    }   }`;class Index extends PureComponent {  render() {    return (      <Query query={USERS_QUERY}>        {({data}) => {          return data.map(user => <div>{user.firstName}</div>);        }}      </Query>    );  }}export default Index;