На прошлой неделе мы познакомились с Next 13, который получил неоднозначные отзывы публики.
Я не буду подробно останавливаться на этих обзорах в этой статье, но давайте посмотрим, что нам представили.


Изменение маршрута

Первое изменение, которое мы видим, — это способ обработки маршрутизации.
Раньше нам требовалось создать pages Компонент для маршрутизации. Однако все внутри app папка теперь становится маршрутом.

Самое интересное, что мы не собираемся обновлять все сразу, так как pages структура будет продолжать работать.
Мы можем мигрировать в app слой, как мы идем.


Макеты

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

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

Помимо этих двух файлов, мы получаем несколько других отличных специальных файлов, которые мы можем использовать:

  • layout.js: определяет общий макет для нескольких страниц внутри этой папки.
  • page.js: конкретный пользовательский интерфейс для страницы, определяемый как имя папки.
  • loading.js: необязательный файл для создания компонента загрузки для этой конкретной части приложения.
  • template.js: Необязательный файл, аналогичный макету, но при навигации монтируется новый компонент, а состояние не передается. Его можно использовать, когда вам нужна анимация входа/выхода на странице.
  • head.js: Дополнительный файл можно использовать для определения <head> для этого подраздела файлов.

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


Серверные компоненты

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

Все ваши компоненты внутри app каталог являются серверными компонентами. При загрузке маршрута будет загружена среда выполнения Next и React, которая кэшируется и имеет предсказуемый размер. Среда выполнения не будет увеличиваться в размере и загружается асинхронно. Он позволяет загружать ваш HTML-код с сервера, а затем улучшать его с помощью клиента.

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

Подробнее об этих компонентах позже.


Потоковое

Мы получим потоковое решение, если возьмем два вышеупомянутых элемента.

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

Эта мощная концепция позволяет нам обеспечить лучший пользовательский опыт.


Получение данных

С введением этих компонентов на стороне сервера мы также получаем новый и мощный способ извлечения данных из частей.

Базовый пример компонента, извлекающего данные из некоторого API.

// app/page.js
async function getData() {
  const res = await fetch('https://api.example.com/...');
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
  return res.json();
}

// This is an async Server Component
export default async function Page() {
  const data = await getData();

  return <main>{/* ... */}</main>;
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Они расширили собственный API выборки до React/Next, поэтому все они использовали один гибкий способ выборки данных.
Все преимущества предыдущих реализаций сводятся к одному.


Турбопак

Мы также видим новую альтернативу Webpack под названием Turbopack. Он разрабатывается и поддерживается первоначальным создателем Webpack.

Пока что их цифры не врут, так как выглядит супер впечатляюще:

  • В 700 раз быстрее, чем Webpack
  • В 10 раз быстрее, чем Vite
  • В 4 раза более быстрый холодный запуск по сравнению с веб-пакетом

Особенно холодный пуск. Я очень хочу попробовать otu, так как это было моим самым большим препятствием с Webpack.

Turbopack написан на Rust, который зарекомендовал себя как сверхбыстрый язык для других инструментов, поэтому на него возлагаются большие надежды.


Новые плагины

Есть также довольно много новых/обновленных плагинов, в которые мы не будем вдаваться слишком подробно, но вот они:

  • next/image: Next 13 включает новый компонент изображения, который содержит множество обновлений, меньше JavaScript, его проще настроить и он работает быстрее.
  • next/font: Совершенно новая система шрифтов, которую можно использовать для загрузки оптимизированных версий шрифтов.
  • next/link: По сути, улучшенный опыт разработчика за счет меньшего количества настроек.


ОИ-изображения

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


Вывод

Next 13 наполнен множеством новых и улучшенных вещей. Стремление попробовать, как они улучшили скорость всего.

И очень хочется увидеть, как все это работает в рабочих приложениях.
Так что следите за следующими статьями.

Подводя итог: какое дополнение в Next 13 вам больше всего понравилось?


Спасибо за чтение, и давайте общаться!

Спасибо за чтение моего блога. Не стесняйтесь подписаться на мою рассылку по электронной почте и подключиться к Фейсбук или же Твиттер