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

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

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

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

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

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

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

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

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

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

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

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

Полезно знать: Параметры, добавленные с помощью динамических маршрутов на странице, использующей 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 в качестве пропа.