Next.js - понимание getInitialProps - PullRequest
Новая
       44

Next.js - понимание getInitialProps

1 голос
/ 17 мая 2019

У меня есть приложение, которое использует 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;

1 Ответ

0 голосов
/ 17 мая 2019

Ответ НЕТ

Если вы используете Apollo с Next JS, вам не нужно будет использовать getInitialProps на каждой странице, чтобы получить некоторые исходные данные, чтобы получить некоторые исходные данные, отображаемые на стороне сервера. Следующей конфигурации для getInitialProps достаточно, чтобы все компоненты выполнили свои соответствующие запросы, если в них есть <Query> компонентов 

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 };
  }

Моя проблема и то, почему я не видел никакого рендеринга на стороне сервера, заключается в том, что Heroku или Now не будут выполнять SSR с открытым URL-адресом, т.е. my-app.heroku.com. Чтобы решить эту проблему, я купил и применил пользовательский URL в Heroku, и это сработало. Наряду с пользовательским URL, у меня была следующая конфигурация в моей конфигурации Apollo 

  const request = (operation) => {
    operation.setContext({
      fetchOptions: {
        credentials: 'include'
      },
      headers: { cookie: headers.cookie }
    });
  };

Это полностью решило проблему, и теперь у меня есть SSR без необходимости вручную устанавливать getInitialProps на каждой странице

Надеюсь, это кому-нибудь поможет

...