Тот самый момент. Поэтому, обо всех нововведениях по порядку.
С каждым годом ошибаться становится лишь приятнее и этот год не стал исключением. И если прошлая презентация прошла с удивлением и восторгом, то от этой уже было просто невозможно оторваться. Спикер за спикером – история за историей и лишь на короткие перерывы их рассказы прерывались музыкальными паузами, но мой открытый от удивления рот в эти паузы закрываться не успевал.
Пожалуй, позволю себе начать статью с цитирования подведения итогов предыдущей:
«При релизе 10 версии казалось, что внедрили уже все, о чем только можно было подумать. Однако vercel вышли за рамки моих мыслей и добавили коллаборацию в реальном времени.
Хусейн закончил свою часть фразой «We love working with great frameworks to help developers make the web faster». Фраза «make the web faster» стала символом этой презентации и коллаборации с google. Уверен, Аврора принесет нам еще много света.»
Кто бы мог подумать, что всего спустя 4 месяца эти мысли повторятся и приумножат свой окрас.
А теперь, к сути конференции. Да, в этот раз было получено не приглашение на релиз новой версии, как было в случае с next 11 (хотя называли его почему-то также конференцией), а именно на конференцию.
«Tomorrow will transform your career» – неплохой заголовок для привлечения внимания. Конечно же, Vercel уже давно не та компания, которая в этом нуждается. У них весьма завидное внимание к деталям, не говоря уже о том, что они привносят в наш мир. Индивидуальные билеты, чаты, залы – все это создает хоть и иллюзию реальной конференции, но с весьма неплохим успехом, мало кто из онлайн-конференций может обеспечить подобное погружение.
Вступительная часть
А теперь вернемся к конференции, а конкретно к 26 октября 19:00 МСК, именно в этот момент началась конференция и нас встретил уже хорошо нам знакомый после предыдущих релизов CEO Vercel – Гильермо Рауч (Guillermo Rauch). В этот раз кофе был допит до начала конференции и, получив достаточно энергии для ��писания столь масштабного релиза, Гильермо начал свое повествование. Фраза «Сделаем веб быстрее» стала не просто символом прошлого релиза, она стала самой сутью next и Гильермо вновь нам это напомнил. Приятно, когда подобные вещи являются не просто словами и идеями, а подтверждаются делами и релизами, о которых нам и напоминают – оптимизация бандлов, inline шрифтов, critical css, специальные компоненты со встроенными оптимизациями. Функционал, который не просто ускоряет приложения, но и не требует никаких дополнительных усилий. А если вы забыли использовать компоненты, там где они могут быть полезны, такие как Image вместо классического img, Script или Link, то conformance вам напомнит об этом и даст рекомендации для оптимизации данных элементов.
Все эти нововведения во многом ориентирование на улучшение метрик web vitals, которые уже успели стать основополагающими в мире быстрого веба и с недавних пор стали важным показателем при формировании поисковой выдачи [статья Vercel].
Конечно же Гильермо не мог не затронуть важность разработческого опыта. Именно о нем нам поведал следующий спикер.
Улучшения developer experience
Head of devRel команды Vercel – Ли Робинсон (Lee Robinson) начал с функционала, которого многие давно ждали:
Es modules, которые поддерживаются всеми современными браузерами и уменьшают размер бандлов. В связи с этим нововведением была повышена минимальная версия node.js – с 12.0.0 до 12.22.0 (первая версия, в которой появилась нативная поддержка ES modules);
URL imports. И это не просто про импорт пакетов – изображения, логика, модули и даже компоненты могут быть импортированы по url. Очевидно, что микросервисы в последние годы набирают большую популярность и это попытка создать еще одну альтернативу стандартным подходам. Весьма интересная альтернатива и явно с большим потенциалом. Например: импортировать компоненты по url из storybook (что-то мне подсказывает – в недалеком будущем мы это увидим).
Но опыт разработки складывается не толь��о из компонентов, которые мы используем при разработке проектов, но и из инфраструктуры, поставляемой с инструментом. Важными составляющими этой инфраструктуры являются компилятор и процесс отладки. И если процесс отладки ускорялся каждый последующий релиз (и этот не стал исключением – теперь время пересборки при разработке меньше 100 мс), то время сборки проекта не ускоряли уже давно (не считая переход на webpack 5 в версии 10.2).
Поэтому, следующим шагом Ли Робинсон представил нам интеграцию с новым компилятором, написанным на Rust – SWC. За счет его использования команда vercel смогла ускорить процесс сборки практически в 2 раза. Все же, здесь стоит немного оговориться – конечно же, компилятор на rust ускоряет сборку, но столь значимого ускорения можно добиться лишь в исключительных случаях. (К тому же весьма странно, что при сравнении сборок на разных компиляторах использовалась разная версия yarn – не исключено, что для данного сравнения использовались разные устройства.)
Конечно же, презентация не может обойтись и без специальных особенностей, доступных на платформе Vercel.
Развитие платформы Vercel
Далее Бекка Зандштейн (Becca Zandstein) показала коммерческие примеры использования next.js live, который был представлен с прошлым релизом и на данный момент все еще находится на стадии бета-тестирования. Одной из тех, кто уже опробовал эту технологию, стала компания monogram.io, которая занимается разработкой сайтов, в т.ч. на next.js. Они используют next.js live как для своего сайта, так и для своих клиентов, в числе которых macstadium.com. Убедиться, что сервисы используют эту технологию просто – нужно добавить _live в конец ссылки - https://www.macstadium.com/_live.
Следующей немаловажной особенностью платформы Vercel является собираемая о метриках аналитика. Очень полезный функционал, но дает всю полноту картины слишком поздно – после выкладки и эксплуатации приложения. Другая особенность – интеграция со сторонними инструментами, такими как sentry, slack, сервисами логирования и многими другими. Теперь этот список пополнился еще одним полезным инструментом под названием Checkly, который создан как раз для решения описанной выше проблемы (получение метрик только после выкладки в production). Теперь, посредством этого инструмента есть возможность настраивать Performance budget и отслеживать его на этапе сборки [документация Vercel].
Middleware и edge-функции
И даже на этом описание релиза не было завершено, поэтому следующей темой повествования стали middleware и edge-функции. Middleware – своего рода «прослойка» между посылаемым с клиента запросом и отрисовкой страницы на сервере. То есть, в этой прослойке можно сделать: rewrite, redirect, обновить cookies, или стримить html. Данный функционал можно задействовать для а/б тестов, аутентификации, редиректов с учетом геолокации и другое. Vercel подготовила github репозиторий с большим количеством примеров.
Плоды сотрудничества с React и google Aurora
Последней частью, о которой пошла речь – сотрудничество с командой react и google Aurora и результат этой кооперации:
React 18;
Server-side streaming;
React server components.
React server components – экспериментальное нововведение, которое, как и многие другие эксперименты react активно тестируются в next.js перед выходом в открытое использование в самом react. Еще одно нововведение, которые уже давно обсуждается и ожидается в react комьюнити – возможность генерировать компоненты полностью на сервере, полностью без клиентского кода. [документация next по react 18]
Заключение
На этом замечательной ноте мы подошли к заключительному этапу презентации и Гильермо подвел итоги данного релиза, подтвердим слова из приглашения – это действительно крупнейший релиз, который вместе с нововведениями прошлого релиза привлечет немало людей на свою сторону и изменит еще не одну карьеру.
Итоги
Полученные командой Vercel инвестиции в C раунде (в размере $102млн) на продолжение создание веба будущего, поддержка команды google «Аврора» и большое комьюнити позволило выпустить столь крупный релиз всего через 4 месяца после предыдущего, не менее интересного, релиза.
Подводя итог презентации нового релиза next, список завершенных или перешедших в открытый тест нововведений:
Поддержка ES модулей из коробки (в работе с версии 11.1);
Импорт модулей и файлов по url (alpha);
Новый компилятор, написанный на rust и ускоривший время сборки в 2 раза (в работе с версии 11.1);
Сервис Checkly для Vercel, который позволяет мониторить метрики на этапе сборки;
Middleware (beta), для тестов, аутентификации, редиректов и много другого. То есть для большинства операций, для которых раньше было не обойтись без nginx;
Server-side streaming (alpha) – стриминг страницы при разработке в SSR;
React server components (alpha), которые позволяют генерировать компоненты без клиентского кода.
Полезные ссылки
Предыдущая статья про релиз next 11;
Инструкция по обновлению с предыдущих версий;
Инструкции по переходу
С gatsby;
С приложения с react-router;
С create-react-app – автоматическая экспериментальная утилита или вручную.
