Значки, добавленные Next.js в ваше приложение

Узнайте, что означают значки, созданные Next.js в режиме разработки.

Когда вы работаете с приложением Next.js, видите ли вы этот маленький значок в правом нижнем углу страницы, который выглядит как молния?

Если вы наведете на нее курсор, появится надпись «Prerendered page»:

Этот значок, которыйвиден только в режиме разработкиконечно, сообщает вам, что страница подходит для автоматической статической оптимизации, что в основном означает, что она не зависит от данных, которые необходимо получить во время вызова, и ее можно предварительно обработать и построить как статический HTML-файл во время сборки (когда мы пробегnpm run build).

Далее можно определить это по отсутствиюgetInitialProps()прикрепленный к компоненту страницы.

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

Еще один полезный значок, который может появиться рядом с ним или вместо него на страницах без предварительного отрисовки, - это небольшой анимированный треугольник:

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

Это действительно хороший способ сразу определить, было ли приложение уже скомпилировано, и вы можете протестировать его часть, над которой работаете.

Скачать мою бесплатнуюСправочник Next.js


Больше следующих руководств: