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

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

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

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

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

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

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

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

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

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

• Страница является динамическим маршрутом.
• Страница имеет значения запроса в URL.
• Перенаправления настроены в вашем next.config.js так как они могут иметь параметры, которые необходимо разобрать и предоставить в 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, эта оптимизация будет отключена на страницах без статической генерации.
• Если у вас есть настраиваемый Document с getInitialProps, убедитесь, что вы проверили, определён ли ctx.req, прежде чем предполагать, что страница рендерится на сервере. ctx.req будет undefined для страниц, которые предварительно рендерились.
• Избегайте использования значения asPath в next/router в дереве рендеринга до тех пор, пока поле маршрутизатора isReady не будет true. Статически оптимизированные страницы знают asPath только на клиенте, а не на сервере, поэтому использование его в качестве свойства может привести к ошибкам несовпадения. Пример active-class-name демонстрирует один способ использования asPath в качестве свойства.