Next.js 12 новых функций
Чрезвычайно популярная веб-инфраструктура Next.js недавно провела Next.js Conf 2021 и объявила о множестве потрясающих новых функций.
Мы рассмотрим некоторые из них в этом посте, особенно те, которые меня действительно взволновали.
Компоненты сервера React
Мы все (вероятно) слышали о рендеринге на стороне сервера (SSR), когда сервер может передавать полностью обработанные HTML-страницы веб-клиенту. В Next.js это уже есть, и я думаю, нам всем нравится, что мы можем его использовать. Что ж, команде Next.js этого было недостаточно.
Они сделали еще один шаг вперед и представили поддержку компонентов на стороне сервера. Объявлено командой React в декабре 2020 года, компоненты на стороне сервера предлагают аналогичные функции рендеринга на стороне сервера, за исключением того, что весь контент отображается на стороне сервера (включая любые JS-файлы). ) и отправляется клиенту используя потоковую передачу на стороне сервера. Не нужно ждать, пока загрузятся объемные пакеты, меньше Javascript в клиенте и лучшая жизнь для всех.
Столь же крутые серверные компоненты в Next.js сидят, как вы уже догадались, на стороне сервера. Подразумевается, что они имеют доступ к функциям API прямо здесь и сейчас. Это также означает, что такие функции, как getStaticProps, больше не понадобятся — ура, для копирования кода!
Вы можете узнать больше о концепции серверных компонентов здесь.
Переход на компилятор Rust, построенный на SWC
Next.js 12 представляет новый компилятор, созданный с помощью Rust, использующий преимущества нативной компиляции (это означает, что он запускается и компилируется на одном языке).
Люди в Vercel заявляют, что новый компилятор может значительно повысить производительность: ~ в 3 раза быстрее локальное обновление и ~ в 5 раз быстрее сборка для производства.
Что мне лично нравится в новом компиляторе, так это то, что он выдает время обновления в консоли, указывая значение каждого изменения между обновлениями.
ПО промежуточного слоя
Промежуточное ПО позволяет разработчикам выполнять действия на основе входящих запросов. Хотите ввести авторизацию прямолинейно? Без проблем! Просто добавьте необходимое промежуточное ПО для аутентификации в свой проект, и все готово.
Промежуточное ПО можно добавить в проект Next.js 12 в виде файла _middleware.ts в каталоге страниц.
Существует бесчисленное множество возможностей того, чего можно достичь с помощью промежуточного программного обеспечения. Хотите провести A/B-тестирование? Используйте промежуточное ПО для направления входящего трафика на разные страницы. Хотите удалить параметры запроса из входящих запросов? Легко!
Что делает новую промежуточную функциональность еще круче, так это то, что она может работать в Edge Network Vercel, предоставляя такие функции, как автоматическое глобальное отключение, кэширование и сжатие ответов.
Next.js 12 представляет еще несколько замечательных функций — вы можете прочитать о них на сайте Next здесь.
Надеюсь, вам понравилось читать этот пост, и я надеюсь, что вы нашли в нем какую-то пользу. До следующего раза, удачного программирования!
Готовы начать работу с NextJS или перейти на него? Silverstag Consulting специализируется на разработке программного обеспечения на заказ с использованием React и NextJS. Наша команда специалистов NextJS поможет вашему проекту запуститься и поддерживать его там.
