Что такое getInitialProps в Next. js - PullRequest
Новая
       64

Что такое getInitialProps в Next. js

2 голосов
/ 26 января 2020

Я думаю, что это глупый вопрос, но, поверьте мне, я новичок в Next. js, и я пытаюсь полностью понять, как работает хук жизненного цикла getInitialProps. Я сделал несколько запросов, но до сих пор не могу эффективно его использовать. Я понял, что getInitialProps используется для получения данных на сервере, но я все еще не понимаю, как мы можем сделать это на сервере, если у нас уже есть http lib, подобный axios et c. Может ли кто-нибудь, пожалуйста, помогите ответить на мой вопрос. Зачем нам нужно getInitialProp в Next. js?

1 Ответ

2 голосов
/ 26 января 2020

Вы можете использовать топор ios или что-либо еще для выполнения ваших http-вызовов, важная вещь - , где вы делаете http-вызов на сервере? или в браузере пользователя?

Если вы поместите код выборки на хук жизненного цикла componentDidMount(), он всегда будет работать в браузере, если вы введете его в getInitialProps(), он будет запустите на сервере.

[Вышеприведенное утверждение действительно только тогда, когда вы пытаетесь открыть страницу в первый раз, после этого все будет происходить в браузере независимо от того, куда вы положили код извлечения, Подробнее здесь ]

Сравнение

Что дальше js делает, это то, что оно запускает ваше приложение React на сервере перед передачей в браузер пользователя. При этом он возвращает полностью обработанный HTML с полностью загруженным содержимым.

При обычном приложении React:

  1. Ваш браузер запрашивает индекс . html
  2. Приложение React загружается в ваш браузер и вызывает componentDidMount()
  3. Данные извлекаются и соответственно изменяется состояние
  4. React отображает извлеченное содержимое на вашем browser

With Next. js:

  1. Ваш браузер запрашивает индекс. html
  2. Next js захватывает ваше приложение React и вызывает getInitialProps
  3. Данные извлекаются, и реквизиты передаются вашему компоненту
  4. React отображает извлеченное содержимое для Next. js
  5. Далее js отправляет обработанные HTML в ваш браузер
...