Автоматическая статическая оптимизация

Next.js автоматически определяет, что страница является статической (может быть предварительно отрендерена), если у неё нет блокирующих требований к данным. Это определяется отсутствием getServerSideProps и getInitialProps на странице.

Эта функция позволяет Next.js создавать гибридные приложения, которые содержат как серверно-рендеренные, так и статически сгенерированные страницы.

Статически сгенерированные страницы остаются интерактивными: Next.js выполняет гидратацию вашего приложения на стороне клиента, чтобы обеспечить полную интерактивность.

Одно из главных преимуществ этой функции — оптимизированные страницы не требуют серверных вычислений и могут мгновенно доставляться конечному пользователю из множества CDN-локаций. Результат — ультрабыстрая загрузка для ваших пользователей.

Как это работает

Если на странице присутствует getServerSideProps или getInitialProps, Next.js переключается на рендеринг страницы по запросу (это означает рендеринг на стороне сервера (SSR)).

Если вышеуказанные условия не выполняются, Next.js автоматически статически оптимизирует вашу страницу, предварительно рендеря её в статический HTML.

Во время предварительного рендеринга объект query роутера будет пустым, так как у нас нет информации о query на этом этапе. После гидратации Next.js запустит обновление вашего приложения, чтобы предоставить параметры маршрута в объекте query.

Случаи, когда query будет обновлён после гидратации, вызывая повторный рендеринг:

• Страница использует динамические маршруты (dynamic routes).
• В URL страницы присутствуют query-параметры.
• В вашем next.config.js настроены перезаписи (rewrites), так как они могут содержать параметры, которые нужно разобрать и предоставить в query.

Чтобы определить, полностью ли обновлён query и готов к использованию, вы можете использовать поле isReady в next/router.

Полезно знать: Параметры, добавленные с помощью динамических маршрутов (dynamic routes) на странице, использующей getStaticProps, всегда будут доступны в объекте query.

Команда next build создаст .html файлы для статически оптимизированных страниц. Например, результат для страницы pages/about.js будет:

.next/server/pages/about.html

А если вы добавите getServerSideProps на страницу, она будет сгенерирована как JavaScript-файл:

.next/server/pages/about.js

Особенности

• Если у вас есть кастомный App с getInitialProps, то эта оптимизация будет отключена для страниц без статической генерации (Static Generation).
• Если у вас есть кастомный Document с getInitialProps, убедитесь, что проверяете наличие ctx.req перед предположением, что страница рендерится на сервере. ctx.req будет undefined для предварительно отрендеренных страниц.
• Избегайте использования значения asPath из next/router в дереве рендеринга, пока поле isReady роутера не станет true. Статически оптимизированные страницы знают asPath только на клиенте, а не на сервере, поэтому его использование в качестве пропа может привести к ошибкам несоответствия. В примере active-class-name показан один из способов использования asPath в качестве пропа.