Когда именно происходит "время сборки" Nextjs?

Question

Я читаю часть документации Nextjs по извлечению данных, и мне в голову пришел один вопрос.

Nextjs может получать данные с помощью getStaticProps, getStaticPaths, getInitialProps и getServersideProps, верно?

Но кое-что происходит во время сборки, как я цитирую:

getStaticProps (статическая генерация): получение данных во время сборки

Когда происходит это время сборки?

Это когда мы запускаем npm run build? (Для сборки производственной сборки)

Или когда пользователь обращается к нашему приложению Nextjs? (По каждому запросу)

Надеюсь, кто-то может мне помочь, а может быть, и другим!

Answer 1

Время сборки наступает, когда вы создаете приложение для производства (next build). Время выполнения происходит, когда приложение работает в производственной среде (next start).

getInitialProps(gIP) запускается как на клиенте, так и на сервере во время выполнения для каждого запроса страницы. Наиболее распространенный вариант использования - это получение каких-либо общих данных (например, сеанса cookie, который позволяет клиенту и серверу узнать, переходит ли пользователь на страницу с аутентификацией) до загрузки запрошенной страницы. Это всегда выполняется перед getServerSideProps. Хотя его использование технически не рекомендуется, иногда абсолютно необходимо выполнить некоторую логику как на клиенте, так и на сервере.

getServerSideProps(gSSP) выполняется на сервере только во время выполнения для каждого запроса страницы. Наиболее распространенный вариант использования - получение актуальных данных для конкретной страницы (например, цены на продукт и отображение количества его на складе) из базы данных до загрузки страницы. Это важно, если вы хотите, чтобы страница была оптимизирована для поисковых систем (SEO), когда поисковая система индексирует самые актуальные данные сайта (мы не хотели бы, чтобы наш продукт отображал "В наличии - 100 единиц", когда это фактически снятый с производства продукт!).

getStaticProps(gSProps) запускается только во время сборки (вроде). Это отлично подходит для сайтов, данные и страницы которых обновляются не так часто. Преимущество этого подхода заключается в том, что страница создается статически, поэтому, если пользователь запрашивает страницу при начальной загрузке, он загружает оптимизированную страницу, на которой динамические данные уже встроены в страницу. Наиболее частой причиной использования может быть блог или какой-то большой торговый каталог товаров, которые могут не так часто меняться.

getStaticPaths(gSPaths) запускается только во время сборки (вроде). Он отлично подходит для предварительного рендеринга похожих путей (блог / история /:id), для которых требуются динамические данные, которые будут использоваться во время сборки. При использовании вместе с gSProps он генерирует динамические страницы из базы данных, которые Next может затем статически обслуживать. Наиболее распространенный вариант использования - это блог, в котором много сообщений с одинаковым макетом страницы и схожей структурой URL-адресов, но при этом требуется, чтобы содержимое динамически запекалось на странице при создании приложения.

Почему gSProps и gSPaths "вроде" запускаются только во время сборки? Что ж, Next представил revalidate с участием fallbackпараметры, которые позволяют запускать эти два метода во время выполнения после тайм-аута в секундах. Это полезно, если вы хотите, чтобы ваша страница создавалась статически, но она должна обновляться только каждые n секунд. Положительным моментом является то, что странице не требуется запрашивать динамические данные по запросу, но недостатком является то, что страница может изначально отображать устаревшие данные. Страница также не будет восстановлена ​​до тех пор, пока пользователь не посетит страницу (чтобы запустить повторную проверку), а затем тот же пользователь (или другой пользователь) запросит ту же страницу, чтобы увидеть ее самую последнюю версию. Это означает, что пользователь A потенциально видит устаревшие данные, а пользователь B видит точные данные. Для одних приложений это не проблема, для других - неприемлемо.

И, наконец, есть рендеринг / запросы на стороне клиента (CSR), которые представляют собой ресурсы, запрашиваемые во время выполнения только на клиенте, которые не являются жизненно важными для SEO. Наиболее распространенным вариантом использования будет страница пользовательской панели инструментов, которая имеет отношение только к этому пользователю (и, следовательно, не нуждается в индексировании поисковой системой).

Другое примечание: gIP и gSSP блокируют рендеринг. Это означает, что страница не загрузится, пока их код не будет разрешен. Это неизбежно приводит к отображению пустой страницы перед ее загрузкой. Что также имеет неизбежное последствие более медленного времени отклика страницы (страница запрошена, gIP/gSSP запускает код, который блокирует загрузку страницы, разрешение gIP/gSSP, ресурсы загружаются, страница начинает загружаться там, где Javascript запускается на клиенте, пока выполняется HTML загружается в DOM, Javascript завершает работу, страница регидратируется, а затем становится интерактивной.