Интервью Next.js 12 выходит с рядом новых функций, включая встроенное промежуточное ПО и поддержку модулей ECMAScript (ES).
«Next.js 12 переосмысливает инфраструктуру того, как мы строим для Интернета», – говорит Гильермо Раух, генеральный директор Vercel, компании, поддерживающей проект с открытым исходным кодом Next.js под лицензией MIT, и владелец авторских прав. Раух не из тех, кто преуменьшает свою правоту, но в этом обновлении, выпущенном вчера на виртуальной конференции Next.js, есть много нового.
«Это на двух уровнях», – говорит Раух. . «Один – это опыт разработчика, а другой – глобальная модель выполнения вычислений».
Основанием для этих утверждений является, во-первых, улучшения инструментов Next.js, включая новый компилятор Rust, и, во-вторых, добавление промежуточного программного обеспечения к фреймворку, которое, как надеется Vercel, разработчики будут запускать на Edge Functions компании (сейчас в бета-версии), сеть доставки контента.
Next.js основан на React с добавлением опций как для рендеринга на стороне сервера с помощью Node.js, так и для генерации статических сайтов. Вот что нового в версии 12 – хотя многое еще в предварительной версии:
- Промежуточное ПО (сейчас в бета-версии), которое работает между запросом пользователя и основным кодом приложения.
- Компилятор Rust, который заменяет Babel для компиляции приложения Next.js и сокращает время сборки в 5 раз согласно Vercel.
- Поддержка React 18 (хотя React 18 все еще находится в стадии альфа), включая функцию Suspense, которая задерживает переходы между состояниями компонентов до тех пор, пока запрошенные данные не будут разрешены. Это под экспериментальным флагом.
- Поддержка серверных компонентов React (также в альфа-версии). «Нет необходимости в клиентском JavaScript, что ускоряет рендеринг страниц», – говорит команда.
- Поддержка изображений AVIF, сжатие которых на 20% лучше, чем у WebP.
- Встроенная поддержка модулей ES по умолчанию, хотя модули CommonJS старого стиля все еще поддерживаются. Это также означает, что требуется Node.js 12.22 или выше.
- Экспериментальная поддержка импорта модулей ES напрямую через URL-адрес, а не через процесс сборки.
- Удаление webpack 4 в пользу webpack 5 (критическое изменение).
Почему новый компилятор? «Это в первую очередь мотивировано темпами роста размеров интерфейсных кодовых баз», – говорит Раух. «Нередко можно услышать о компаниях с сотнями разработчиков Next.js с кодовыми базами с десятками тысяч компонентов, если не сотнями тысяч компонентов».
Гильермо Раух, генеральный директор Vercel, представляет Next.js 12
Когда был впервые разработан Next.js, «синтаксис JavaScript быстро менялся, TypeScript не был стандартом де-факто, как сегодня. Поэтому многие инструменты были написаны на самом JavaScript. Теперь все становится более стабильным, синтаксис React JSX также является стандартом де-факто, поэтому мы подошли к тому моменту, когда имеет смысл использовать преимущества нативного кода. Он заставляет разработчиков полагаться на некоторые процессы в 100 раз быстрее ».
Node хорошо служил нам до сих пор, но он начинает показывать свой возраст, когда речь идет о сегодняшних потребностях в производительности.
По промежуточного слоя Next.js запускается не на Node, а непосредственно на самом движке JavaScript V8 (который также используется Node). “Узел в качестве примитива для облака слишком громоздок. В контексте бессерверного он создает проблему холодного запуска, поэтому, упростив код, который могут использовать разработчики как на стороне периферии, так и на стороне разработчика, мы можем получить много производительности и безопасности, ограничивая поверхность API “.
Раух имеет в виду среду выполнения Edge, используемую промежуточным программным обеспечением, которая не поддерживает API-интерфейсы Node.js. В документации говорится, что модули Node могут использоваться «до тех пор, пока они реализуют модули ES и не используют какие-либо собственные API-интерфейсы Node.js».
По словам Рауха, разработчики могут «устранить целые категории проблем», не используя Node.js для этих бессерверных функций. «До сих пор Node служил нам хорошо, но он начинает показывать свой возраст, когда речь идет о сегодняшних потребностях в производительности».
Потенциальные возможности использования промежуточного программного обеспечения обширны, включая аутентификацию, защиту от ботов, флаги функций и A / B-тестирование, аналитику на стороне сервера, ведение журнала и любые случаи, когда требуются перенаправления и перезаписи. На Next.js Conf пример показал, как использование сервера базы данных для конкретного региона может уменьшить задержку.
Раух отмечает, что JAMStack, использующий статические веб-сайты с динамическими данными из микросервисов, имеет свои плюсы и минусы. «Хорошая часть заключалась в сосредоточении внимания на предварительном рендеринге. Плохая часть в том, что он был настолько статичным, что иногда мы не могли ничего сделать предварительный рендеринг.
«То, что мы видим сейчас, особенно с введением серверных компонентов React, о которых мы объявляем в виде бета-версии, мы можем переместить подавляющую часть кода обратно на сервер, но вместо того, чтобы этот сервер был монолитным в определенном месте в мире мы делаем код глобально распределенным. Это дает большую производительность и отсутствие единой точки отказа ».
Чем это отличается от простого использования CDN с обычным веб-приложением? «Когда CDN пытались повысить скорость, их молоток был тайником», – говорит нам Раух. “Они переходят к источнику, берут страницу, кэшируют ее. На этом этапе они уже сделали ее слишком статичной, особенно для того, что мы видим в средствах массовой информации, электронной коммерции … мы видим, что вы хотите все персонализировать. , от языка к валюте и вариациям компонентов. В этом мире кэш верхнего уровня старых поставщиков CDN больше не работает ».
Раух также считает, что веб-ориентированная модель разработки Next.js является преимуществом. «В Next.js нет ничего, что не было бы встроено в веб-браузер», – говорит он. «Когда вы смотрите на дизайнеров, как они работают сегодня, они просто открывают веб-браузер и указывают его на Figma. Мы спросили себя, можем ли мы сделать то же самое, открыть браузер, указать его на проект Next.js и запустить весь компилятор и оборудование внутри браузера? “
Эта идея превратилась в Next.js Live, веб-платформу для разработки. «В нашей частной бета-версии мы смогли загружать приложения производственного уровня прямо в веб-браузер», – говорит Раух. Концепция аналогична GitHub Codespaces или Gitpod, за исключением того, что с Next.js Live все находится в браузере, нет серверной части контейнера.
«Next.js – это, по сути, интерфейсный фреймворк», – говорит Раух. «Среда выполнения Next.js в основном бессерверная, поэтому нам не нужны все эти дополнительные механизмы для запуска и рендеринга проекта. Сеть с самого начала проектировалась так, чтобы позволять как чтение, так и редактирование. Мы хотим привлечь больше людей в мир о вкладе в Интернет “.
Редактор Next.js Live основан на Monaco, как и в проекте Microsoft Visual Studio Code.
Next.js Live использует WebAssembly в браузере для компилятора. «WebAssembly – это новый универсальный способ распространения приложений», – говорит Раух. «Мы можем взять код, написанный на Rust, и сделать его полностью универсальным». Однако он считает, что это «первые дни для WebAssembly в производстве», поэтому в настоящее время он используется только для разработки, хотя команда смотрит на это в будущем.
Next.js 12 также улучшает производительность и стабильность Hot Module Reload (HMR), говорит нам Раух. Здесь «вы печатаете, сохраняете файл и мгновенно видите изменения, не обновляя веб-браузер … Раньше разработчикам приходилось задумываться, а иногда просто нажимать« Обновить »из мышечной памяти, как они бы этого не делали. не полностью доверяю технологии. Мы ее значительно усовершенствовали … мы видим, что перерисовка экрана происходит в пять раз быстрее, чем вы печатаете ».
Технология, лежащая в основе более быстрого обновления, отчасти является преимуществом модулей ES, потому что «мы можем сообразить, предоставляя веб-браузеру только определенные изменения. Мы загружаем только ту часть страницы, над которой вы работаете».
Почему бы просто не использовать React, а не Next.js? “Мне нравится думать о [React] в качестве движка, – говорит Раух. – Этот движок, с одной стороны, обеспечивает рендеринг, а с другой – предоставляет примитивные абстракции, которые разработчики собираются использовать. Компонентная модель предоставляется React, а механизм рендеринга – React. Но с Next.js люди создают веб-сайты и приложения, и это уровень абстракции, который Next.js представил поверх. Мы подняли абстракцию от компонента к странице “.
Приходит ли TypeScript на смену JavaScript? «Экосистема созревает. Обычный разработчик хочет меньше ошибок, более высокий уровень корректности, больше и лучше документации, типов, а не только кода. Это привело к тому, что TypeScript стал стандартом по умолчанию для проектов Next.js, особенно для команд в компаниях. ” ®
