LongCut logo

Новости разработки | Next.js, Nuxt, Go, Svelte | Ноябрь 2025

By PurpleSchool | Anton Larichev

Summary

Topics Covered

  • Кэш-компоненты упрощают гранулярный кэш
  • Абортконтроллер прерывает запросы
  • Форки API устраняет задержки навигации
  • Biom быстрее Prettier в 30 раз

Full Transcript

Привет, это новости веб-разработки.

Сегодня мы с вами посмотрим на выход Next шестнадцатой версии. [музыка] Next

версии 4.2. Что нового планируется в Goде версии ND 25? Также затронем ножко биом и много других интересных новостей.

Кстати, большинство технологий, которые мы здесь рассматриваем, у нас есть в виде курсов на платформе, если вам интересно их изучить. Ссылка на нашу платформу, как обычно, в описании. А мы

с вами начнём. Начнём с большой новости.

Это выход Next шестнадцатой версии, в котором наконец показали кэш-компоненты, которые меняют немного подход с тем, как мы структурируем нашу страничку. Они

включаются с помощью Cash Components true, настройки в next конфиге. И тогда

у вас активируется следующее поведение.

Ваши странички, если у нас, например, там у нас есть сайт школы и часть контента на страничке является статичным, часть нет. Ну, например,

какая-нибудь заголовки, всё это является статичным. А есть часть, которая

статичным. А есть часть, которая является динамичной. Например, список

является динамичной. Например, список курсов. У нас добавляется курс. Мы

курсов. У нас добавляется курс. Мы

хотим, чтобы он мгновенно отобразился.

Сейчас мы можем разделить нашу страницу на условно несколько частей. Статику,

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

курс. Здесь у нас есть две стратегии.

Первое, можем просто обернуть этот компонент suspense и указать какой-то лbaбек, например, скелетон. Тогда при

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

отобразились. Вторая стратегия - это если мы хотим использовать новую директиву USC. Директива USC, если мы

директиву USC. Директива USC, если мы перейдём в документацию US Cash Directives, позволяет нам указать, что для некоторого компонента мы будем использовать ш. А это значит, что ответ

использовать ш. А это значит, что ответ от API, который формирует наш компонент, например, список курсов, будет закэширован. Благодаря этому у нас

закэширован. Благодаря этому у нас появляется фактически динамические области на странице, которые мы можем закэшировать либо на какое-то время. Для

этого появляется новая функция, которая называется Cashli. Указывает время

называется Cashli. Указывает время нашего соответственно кэш-компонента.

Либо мы можем Cashlive указать глобально в Nextконфиге. Ну и, соответственно,

в Nextконфиге. Ну и, соответственно, штег, который позволяет указать тег, а затем ревалидировать этот тег. В случае,

если у нас, например, там обновились какие-то данные, тем самым мы вместо того, чтобы сказать, что вот эта страничка статичная, а эта страничка у нас сервиса rendering, а эта страничка у нас должна ревалидироваться, можем

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

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

на какое-то время, спокойно использовать новую директивы US Casash. В целом, это очень классное движение Next к тому, чтобы у нас было более упрощённые и гранулярные работы с нашими компонентами

и их кэшированием. Рекомендую, кстати,

посмотреть Kйноты, которые вышли у ребят. Здесь есть next 5 ков и здесь

ребят. Здесь есть next 5 ков и здесь есть ноуты, которые как раз детально рассказывают про эти US CAS компоненты.

Вышел также story book десятой версии, которая теперь поддерживает Next 16, VS четвёртой версии, о нём мы, кстати, поговорим. И асинхронные компоненты

поговорим. И асинхронные компоненты Svel. Storyook - это, по сути, удобный

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

компоненты, смотреть использование и варианты. По сути, это удобный

варианты. По сути, это удобный отображение списка ваших компонента. У

меня есть целые отдельное видео, посвящённое сторибуку. Ссылка на него

посвящённое сторибуку. Ссылка на него будет также в описании. И классно, что они своевременно поддерживают новое версии. Так что, если вы уже начинаете

версии. Так что, если вы уже начинаете использовать RenX 16, спокойно можете переходить на десятую версию сторибука.

Кстати, случился интересный релиз первой версии UI Kit. UI Kit - это UI Kit, как вы понимаете, для создания 3D интерфейса

на 3GS. Вы получаете компоненты с

на 3GS. Вы получаете компоненты с несколькими темами. Это, соответственно,

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

различные дополнения. И стоит вопрос, классно, конечно, здесь есть все базовые компоненты, но зачем? Важное отличие в том, что эти компоненты работают именно 3GS, а значит, вы можете на ним делать

3D интерфейсы. Это актуально, если вы

3D интерфейсы. Это актуально, если вы проектируете например AR XR любые другие приложения, а, в которых вам нужно отобразить какой-то интерфейс в трёхмерном пространстве. И вот как раз

трёхмерном пространстве. И вот как раз на помощь приходит UI Kit. Я не так много знаю людей, которые работают непосредственно с Иксаром, но теоретически

вы можете использовать этот, если вдруг с ним столкнётесь. Ну и, конечно, Next 16 стал поддерживать Шассин. Его релиз

3.5 целиком направлен на поддержку NextGS, потому что здесь midleware у нас переименался в шестнадцатом на прокте.

Это ещё одно изменений, которое есть не кшестнадцатом. И, соответственно,

кшестнадцатом. И, соответственно, поддержка инит команды. SHSIN - это достаточно популярная UI библиотека, которая позволяет использовать множество готовых компонент. При этом сами по себе

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

календаря, то вы можете отдельно, соответственно, импортировать календарь, его сгенерировать, скомодифицировать и получить готовый удобный блок, с которым можете работать. Шat я вижу часто сейчас

можете работать. Шat я вижу часто сейчас нача начинает использоваться в проектах.

Особенно прикольно, что недавно у неё появился MCP, который позволяет и агентам быстро получить список текущих актуальных компонент блоков для того, чтобы спроектировать ваш интерфейс. И в

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

Но и Нак тоже не стоит на месте и вышла версия 4.2. В ней много интересных

версия 4.2. В ней много интересных изменений. Во-первых, теперь появился

изменений. Во-первых, теперь появился абортконтроллер для вызова наших фичей, чтобы мы могли прервать в любой момент выполнение. По умолчаше, если мы будем

выполнение. По умолчаше, если мы будем делать рефреш, автоматически он будет и, соответственно, clearр, который нancлит текущий э реквест в работе. Также можно

явно создать абортконтроллер и передать его в рефреш сигнал. Ну и вызвать в дальнейшем случае необходимости при каких-то условиях. Это позволяет более

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

Например, если это уже не актуально.

Также улучшилось отображение страниц ошибки в девелопменте. Теперь

вид environment API появилась. Она

экспериментальная. Если вы хотите прямо с ним поэкспериментировать, то можно добавить, но это, я бы сказал, не для всех. Появился на Nitросервер пакет,

всех. Появился на Nitросервер пакет, который позволяет добавить различные паттерны архитектурные для работы с нитроподка капотом и улучшение производительности. В частности, теперь

производительности. В частности, теперь есть, если у нас есть какой-то AS получения данных, например, use asing data, то он будет автоматически выделяться в отдельный чанк. И это

наиболее эффективно для статических сайтов, когда, к примеру, вам на клиенте совершенно не нужно получить уже данных, потому что всё это отработало на бэкэнде и отдался статический HTML. И вот теперь

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

теперь экспериментальная поддержка новых плагинов Typeскрипта для переименования файлов. переход к дефинишу. Ну, короче,

файлов. переход к дефинишу. Ну, короче,

то, что улучшает наш девелопер эксперимент при работе с Next. Также

куча небольших мелких изменений.

Обновляться вполне себе стоит. Я на

одном проекте это уже сделал. Для того,

чтобы сейчас устроиться в любую компанию, нужен минимальный практический опыт. И мы это прекрасно понимаем.

опыт. И мы это прекрасно понимаем.

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

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

самым к концу курса у вас уже будет более полутора лет полноценного опыта работы вместе, совмещённо с обучением.

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

подписки. Кроме того, тридцатидневная гарантия возврата денег также работает.

Если хотите полноценно освоить ту или иную профессию, то ссылка будет в описании. Также незадолго до релиза Next

описании. Также незадолго до релиза Next у нас обновился Next UI до версии 4.1.

Next UI - это библиотека UI компонент с большим набором готовых компонентов, которые вы можете использовать в Next.

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

Также Utable Able теперь поддерживает виртуализацию. Ну не на самом деле не

виртуализацию. Ну не на самом деле не только Table, но и три компонента, inputменю и так далее. Виртуализация

позволяет нам не терять производительности, если у вас очень много данных. А виртуализирует, тем

много данных. А виртуализирует, тем самым отображает только определённый кусочек ваших данных для того, чтобы не грузить браузер. Также добавлена

грузить браузер. Также добавлена экспериментальная поддержка Component Detection. Если вы её включите, то для

Detection. Если вы её включите, то для компонентов, который используется на страничке, Next будет пытаться вытаскивать только тот CSS, который нужно, и включать его в банл. Остальное

не будет. Ну и наборы breaking changes для использования table и Command palet.

В целом изменение классное. Если вы

делаете опять админки, какие-нибудь внутренние интерфейсы, где вам не принципиально сам дизайн компонент у вам может использовать готовый, то, соответственно, UI Library Next UI

достаточно классно. И мы в своих

достаточно классно. И мы в своих админках именно вьюшки периодически их используем. От новостей VIW перейдём к

используем. От новостей VIW перейдём к Sвелт. И вышла версия 542. Казалось бы,

Sвелт. И вышла версия 542. Казалось бы,

здесь особо ничего интересного, если бы не одно, но здесь появилась экспериментальная форки API. Начнём с

проблематики. Если мы, например, у нас есть какое-то приложение, в котором мы очень быстро перекликиваем посылками, то мы видим, здесь специально сделана задержка, что у меня изменение обезьяны происходит с задержкой. Несмотря на то,

что я уже перешёл на другие. У меня

есть, соответственно, сначала появление первого сцене, потом второго. Новые 4K

позволяет работать с синхронными данными, даже если пока компонент наш не находится в UI. И здесь, например, если я введу на ссылку, то благодаря предварительному фечингу я получаю

быстрое отображение моей обезьяны без всякой задержки, в отличие от быстрых кликов, если таковые имеются. В

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

свелды. Также состоялся релиз Biom версии 2.3, и в нём наконец-то пилась полная поддержка View, Astra и Sвеelt.

Теперь ещё больше фреймворком поддерживается Биом, и он всё больше готов к использованию. Что такое Biom?

Биом - это фактически всё в одном: и линтер, и форматер. При этом форматер полностью совместим, ну, на 97% совместим с притером. При этом работает

в 30 раз быстрее, чем текущий притер, что даёт нам ещё больше производительность. Ну, а также, который

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

ни разу на проекте BIM Prodдаction, по крайней мере, решения не внедрял, но за учётом того, что он стал теперь поддерживать больше фреймворков, будет интересно на каких-нибудь небольших проектах хотя бы внедрить и посмотреть,

насколько производительность будет выше и насколько будет удобнее работать в сравнению с комбинацией Yesink + Prтер, который сейчас обычно используется. Ну а

теперь, как и обещал, к Vtestчей версии.

Vest - это фреймвор для тестирования нового поколения, который базируется на Vid, а это значит, что он подойдёт для свелты, View, React, если это, например, не Next, а V. И, соответственно, это

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

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

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

компоненты. Если вдруг мы где-то поменяли в одном месте там, не знаю, шрифт и у нас компоненты начали меняться все они произвольно, мы это достаточно легко заметим. Vтест предназначен для

легко заметим. Vтест предназначен для тестирования именно фронт компонент. И

здесь поддержка Playr, на котором он, собственно говоря, базируется- это достаточно классный шаг, если вы используете, конечно же, тестирование на фронтенде. На практике мы сейчас

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

на фронте. У ноже состоялся кругленький

на фронте. У ноже состоялся кругленький релиз, и это Noda двадцать пятая, которая теперь стала current версией, а LTS версия у нас двадцать четвёртая. Все

продакш я рекомендую всё-таки делать на двадцать четвёртой версии, но двадцать пятой - это сот самая современная нода, которую можно только получить. В ней

теперь добавился апгре версии 14.1. V8 - это движок натри ноды,

версии 14.1. V8 - это движок натри ноды, который работает с Javaм и, собственно, точно такой же, который работает и в Chrome. И здесь у нас, благодаря нему у

Chrome. И здесь у нас, благодаря нему у нас теперь улучшилась производительность Jon Stringify. Unit 8r теперь из коробки

Jon Stringify. Unit 8r теперь из коробки в B64 конвертируется. Ну и в другие изменения. также улучшение безопасности,

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

целом можно попробовать, но опять на продакшн лучше не заносить. Но интересно

сравнить, если вдруг у вас где-то есть узкие места по Jon Stringify, это, в принципе, может помочь. Пока мы ждём релиз 1.26, её драфрели Note обновляется. И что

можно интересно заметить, здесь появилась новая фича, которая появится в 1.26. это во встроенной функции new,

1.26. это во встроенной функции new, которая создаёт новые переменные. У нас

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

можем в new передать, например, since morning и дальше сделать расчёт с помощью какой-то отдельной функции. Это

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

и под конец, как у нас уже сложилось в последние выпуске, что-нибудь интересное наткнулся на сайт, который называется Paper Toilet, который позволяет с помощью мыши раскручивать туалетную

бумагу, что причём занимательно. При

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

будет в конце, не расскажу, попробуйте сами. Также, кстати, можете закручивать

сами. Также, кстати, можете закручивать её. Вещь интересная. Прикольно, что

её. Вещь интересная. Прикольно, что

реализуена в браузере. Может быть, вам будет интересно.

Надеюсь, что видео было вам полезно.

Если так, не забывайте подписываться и ставить лайк. Также напишите в

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

описании. А мы с вами увидимся через

описании. А мы с вами увидимся через неделю. y

неделю. y

Loading...

Loading video analysis...