Предварительный рендеринг (Pre-rendering)
Прежде чем мы поговорим о получении данных, давайте обсудим одну из самых важных концепций в Next.js: Предварительный рендеринг.
По умолчанию Next.js выполняет предварительный рендеринг каждой страницы. Это означает, что Next.js генерирует HTML для каждой страницы заранее, вместо того чтобы делать это полностью на стороне клиента с помощью JavaScript. Предварительный рендеринг может улучшить производительность и SEO.
Каждый сгенерированный HTML связан с минимальным количеством JavaScript-кода, необходимым для работы страницы. Когда страница загружается в браузере, её JavaScript-код выполняется и делает страницу полностью интерактивной. (Этот процесс называется гидратацией.)
Проверка предварительного рендеринга
Вы можете проверить, что предварительный рендеринг работает, выполнив следующие шаги:
- Отключите JavaScript в вашем браузере. (Инструкция для Chrome).
- Попробуйте открыть эту страницу (финальный результат этого руководства).
Вы должны увидеть, что ваше приложение отображается без JavaScript. Это происходит потому, что Next.js предварительно отрендерил приложение в статический HTML, позволяя вам видеть интерфейс без выполнения JavaScript.
Примечание: Вы также можете попробовать эти шаги на
localhost, но CSS не будет загружаться, если вы отключите JavaScript.
Если ваше приложение — это простое React.js приложение (без Next.js), предварительный рендеринг отсутствует, поэтому вы не сможете увидеть приложение при отключенном JavaScript. Например:
- Включите JavaScript в браузере и откройте эту страницу. Это простое React.js приложение, созданное с помощью Create React App.
- Теперь отключите JavaScript и снова откройте ту же страницу.
- Вы больше не увидите приложение — вместо этого появится сообщение "You need to enable JavaScript to run this app." Это происходит потому, что приложение не было предварительно отрендерено в статический HTML.
Сравнение: с предварительным рендерингом и без
Вот краткое графическое сравнение:
Далее давайте поговорим о двух формах предварительного рендеринга в Next.js.