Производительность по умолчанию в Next.js

Next.js выполняет множество оптимизаций в вашем приложении React, поэтому вам не придется

Хуссейн Джирдех
Houssein Djirdeh

Next.js — это продуманный фреймворк React с рядом встроенных оптимизаций производительности. Основная идея фреймворка — обеспечить запуск и максимальную производительность приложений за счет включения этих возможностей по умолчанию.

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

Чему вы научитесь?

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

Существует множество оптимизаций, которые можно добавить к сайтам React в целом, которые также будут работать для приложений, созданных с помощью Next.js. Они не будут рассмотрены, поскольку основное внимание уделяется тому, что конкретно предоставляет Next.js. Чтобы узнать больше об общих оптимизациях React, ознакомьтесь с нашей коллекцией React .

Чем Next.js отличается от React?

React — это библиотека, которая упрощает создание пользовательских интерфейсов с использованием компонентного подхода. Несмотря на свою мощь, React — это, в первую очередь, библиотека пользовательского интерфейса. Многие разработчики включают дополнительные инструменты, такие как сборщик модулей (например, webpack ) и транспилятор (например, Babel ), чтобы иметь полную цепочку инструментов сборки.

В коллекции React мы использовали подход использования Create React App (CRA) для быстрого развертывания приложений React. CRA устраняет трудности с настройкой приложения React, предоставляя полную цепочку инструментов сборки с помощью одной команды.

Хотя в CRA встроено несколько оптимизаций по умолчанию, инструмент нацелен на простую и понятную настройку. Разработчикам предоставляется выбор, чтобы решить, следует ли извлекать и изменять конфигурации самостоятельно.

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

  • Рендеринг на стороне сервера
  • Автоматическое разделение кода
  • Предварительная выборка маршрута
  • Маршрутизация файловой системы
  • Стилизация CSS-в-JS ( styled-jsx )

Настройка

Чтобы создать новое приложение Next.js, выполните следующую команду:

npx create-next-app new-app

Затем перейдите в каталог и запустите сервер разработки:

cd new-app
npm run dev

Следующий пример демонстрирует структуру каталогов нового приложения Next.js.

  • Нажмите «Ремикс для редактирования», чтобы сделать проект редактируемым.
  • Для предварительного просмотра сайта нажмите View App . Затем нажмите Fullscreen полноэкранный .

Обратите внимание, что каталог pages/ создан с одним файлом: index.jsx . Next.js следует подходу маршрутизации файловой системы, где каждая страница в этом каталоге обслуживается как отдельный маршрут. Создание нового файла в этом каталоге, например about.js , автоматически создаст новый маршрут ( /about ).

Компоненты также можно создавать и использовать, как и любое другое приложение React. Каталог components/ уже создан с одним компонентом, nav.js , который уже импортирован в index.js . По умолчанию каждый импорт, используемый в Next.js , извлекается только при загрузке этой страницы, что обеспечивает преимущества автоматического разделения кода .

Более того, каждая начальная загрузка страницы в Next.js визуализируется на стороне сервера . Если вы откроете панель Network в DevTools, вы увидите, что начальный запрос документа возвращает полностью визуализированную на сервере страницу.

На вкладке «Предварительный просмотр» панели «Сеть» показано, что Next.js возвращает визуально завершенный HTML-код при запросе страницы.
На вкладке «Предварительный просмотр» панели «Сеть» показано, что Next.js возвращает визуально завершенный HTML-код при запросе страницы.

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

Что дальше?

Каламбур задуман 😛

Каждое второе руководство в этой подборке будет подробно рассматривать определенную функцию Next.js: