26 октября 2021 года Next js анонсировала версию 12. Это было более впечатляюще, чем анонсы новых MacBook от Apple, которые довольно умопомрачительны, учитывая, что это всего лишь бесплатная среда JavaScript.
Они устанавливают очень высокую планку для того, что ожидается от полнофункционального JavaScript-фреймворка, как теперь он поставляется с компилятором ржавчины вместо JavaScript, что дает вам в 5 раз более быструю сборку.
Хорошо, что вам не нужно знать ржавчину. он просто делает следующий быстрее под капотом, заменяя babel, что важно, потому что большие сложные приложения, как правило, имеют медленное время сборки. давайте посмотрим на все новые функции, следующие 12, и, что более важно, почему вы захотите их использовать.
Рекомендуем прочитать: 5 способов создать React Monorepo
ПО промежуточного слоя
Первая функция, о которой я хочу рассказать, — это промежуточное ПО. Промежуточное ПО не является новой концептуальной структурой, например, экспресс-js использует промежуточное ПО для перехвата HTTP-запроса и обработки его каким-либо образом, прежде чем он попадет к вашему фактическому обработчику маршрута.
С чем-то вроде next js все немного сложнее. С одной стороны, вы хотите, чтобы ваш веб-сайт был действительно быстрым, и лучший способ добиться этого — кэшировать предварительно созданные HTML-страницы в CDN.
Но когда вы это сделаете, вы потеряете возможность сделать свои страницы динамичными.
Таким образом, на другом конце спектра у вас есть рендеринг на стороне сервера, который использует сервер узлов для извлечения данных из базы данных или API при поступлении входящего запроса, но в идеальном мире это медленно и неэффективно, хотя разработчики должны иметь и скорость, и динамический контент одновременно.
И Next действительно лидирует в этом. Vercel У компании Next есть продукт под названием Edge functions. Это бессерверные функции, такие как лямбда-выражения AWS или облачные функции Google, за исключением того, что они развернуты на границе, как CDN, поэтому ваши конечные пользователи получают чрезвычайно быстрое выполнение без холодных запусков. Теперь здесь появляется промежуточное ПО.
В вашем проекте создайте файл с именем _middleware в каталоге страниц, из него вы можете экспортировать функцию, называемую промежуточным программным обеспечением, эта функция предоставит вам доступ к входящему запросу и позволит вам изменить его, и она будет запускаться до того, как будет выполняться рендеринг для каждой страницы в каталог страниц.
Вы также можете ограничить промежуточное ПО подкаталогами, если хотите, чтобы оно работало только на подмножестве страниц. Что замечательно в промежуточном программном обеспечении, так это то, что оно делает ваш код более эффективным.
Поддержка параллельного режима React
Next 12 обеспечивает поддержку параллельного режима React, такого как приостановка. Если вы не знакомы с задержкой, это в основном компонент, который позволяет вам ждать асинхронных данных перед рендерингом своих дочерних элементов, на сегодняшний день он все еще является экспериментальным в React. Но он все еще используется на некоторых веб-сайтах, таких как Facebook.
Однако, если вы попытаетесь использовать его в следующий раз, это приведет к ошибкам, потому что он плохо работает на сервере. В следующие 12 вы можете выбрать экспериментальные одновременные функции. Чтобы эти функции работали с рендерингом на стороне сервера, он также поддерживает ленивый ответ для динамического импорта модулей ES, что может уменьшить размер вашего пакета JavaScript на стороне клиента.
Серверный компонент React
Теперь эта функция может быть той, которая меня больше всего волнует в серверных компонентах React, серверные компоненты позволяют вам изначально отображать HTML из компонентов React на сервере.
Что в нем сумасшедшего, так это то, что он использует потоковую передачу HTTP для постепенной визуализации веб-страницы на сервере, что означает, что если вам нужны данные для одного компонента, а затем для другого компонента после этого, вам не нужно ждать один за другим, он будет отображать первый, затем следующий за этим, который действительно открывает целый новый мир возможностей, когда дело доходит до разработки полнофункциональных веб-приложений.
Для использования серверного компонента в вашем приложении вы можете изменить имя страницы или файла на .server.js, чтобы сообщить платформе, что это серверный компонент, когда этот компонент отображается, он не требует JavaScript на стороне клиента, что означает меньше КБ для конечной цели. пользователя для загрузки.
Кроме того, вы можете получать данные непосредственно внутри компонента, не используя такие функции, как получение статических реквизитов или получение реквизитов на стороне сервера. Это действительно эргономичный способ создания приложения. Вы используете шаблоны реагирования от начала до конца или от сервера к клиенту. Теперь вам понадобится интерактивный JavaScript для клиента, чтобы вы также могли импортировать обычные клиентские компоненты, и они будут отображаться универсально как на сервере, так и на клиенте.
Импорт URL
Есть еще одна интересная функция, о которой вы должны знать, теперь вы можете импортировать модули, используя URL-адреса вместо NPM. Это работает для модулей JavaScript, которые вы импортируете из CDN, но вы также можете использовать удаленные URL-адреса в своем CSS или импортировать изображения непосредственно в ваш JavaScript. код.
Заключение
В целом Next v12 — это настоящий зверь. Вы обязательно должны это попробовать. подождем следующий js 13
Станьте компонуемым: создавайте приложения быстрее, как Lego
Bit – это инструмент с открытым исходным кодом для модульного и совместного создания приложений. Перейдите на компоновку, чтобы поставлять быстрее, более последовательно и легко масштабировать.
Создавайте приложения, страницы, пользовательский опыт и пользовательские интерфейсы как автономные компоненты. Используйте их, чтобы быстрее создавать новые приложения и возможности. Используйте любой фреймворк и инструмент в своем рабочем процессе. Делитесь, повторно используйте и сотрудничайте, чтобы строить вместе.
Помогите своей команде:
→ Совместное использование кода и повторное использование
→ Монорепо
