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

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

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

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

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

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

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

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

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

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

• Начало работы с Next.js
• Next.js против Gatsby против приложения create-react-app
• Как установить Next.js
• Связывание двух страниц в Next.js с помощью Link
• Динамический контент в Next.js с роутером
• Передача данных в компонент Next.js с помощью getInitialProps
• Стилизация компонентов Next.js с помощью CSS
• Предварительная загрузка содержимого в Next.js
• Использование роутера для обнаружения активной ссылки в Next.js
• Просмотрите источник, чтобы подтвердить, что SSR работает в Next.js
• Next.js: заполните тег заголовка настраиваемыми тегами
• Развертывание приложения Next.js прямо сейчас
• Next.js: запускать код только на стороне сервера или на стороне клиента в Next.js
• Развертывание приложения Next.js в рабочей среде
• Как анализировать пакеты приложений Next.js
• Ленивая загрузка модулей в Next.js
• Добавление компонента-оболочки в приложение Next.js
• Значки, добавленные Next.js в ваше приложение
• Пакеты приложений Next.js
• Как использовать маршрутизатор Next.js
• Как использовать маршруты API Next.js
• Как получить файлы cookie на стороне сервера в приложении Next.js
• Как изменить порт приложения Next.js