REACT ROUTER: Новое управление и API -интерфейсы сервера React

Было много шума в объявлении Remix о том, что оно будет продолжено в другом направлении, но в этом Hullabaloo новости о React Router немного… похоронены.

Реактивное маршрутизатор теперь может быть рамкой React Shopify React, но это все еще маршрутизатор для фронта. План состоит в том, чтобы продолжать развивать это предложение, а также управлять новой структурой «режим».

Команда маршрутизатора React была занята новой моделью управления и выпускала поддержку компонентов сервера React (RSC), которые представляют собой компоненты React, которые работают на сервере вместо клиента.

Новый стек поговорил с Бруксом Либрандом, менеджером по связям с по связям с разработчиками для платформы электронной коммерции Shopify и членом Руководящего комитета React Router. Мы спросили Либранда, что стать рамки означает для React Router и что будет дальше для проекта с открытым исходным кодом.

«На стороне маршрутизатора React мы все еще выпускаем кучу новых вещей», — сказал он. «Самая большая, самая захватывающая вещь — это поддержка компонентов сервера React».

Команда уже выпустила предварительный просмотр того, как может выглядеть эта поддержка RSC, и на этой неделе она выпустит RSC-специфические API. По словам Либранда, цель состоит в том, чтобы продемонстрировать, как API Rout Router могут реализовать компоненты React Server.

«Это способ для вас фактически включить компоненты сервера React в вашем приложении React Router», — сказал он, добавив, что сначала это также будет нестабильным.

Remix и React Router Coverge: Что теперь?

REACT Router и Remix — это создания Райана Флоренции и Майкла Джексона, которые сейчас работают в Shopify. В прошлом году на конференции React 2024 создатели объявили, что ремикс и React Router объединяются. Remix больше не будет развиваться отдельно от React Router.

По сути, команда свернула функции Framework в плагин React Router, который теперь является фреймворком.

С тех пор Джексон и Флоренция объявили, что планируют создать новую структуру, которая расходится от React Remix. Было много спекуляций о том, что это значит, но развивающийся дуэт написал, что это будет «переосмысление того, какими могут быть веб -структура — свежий фундамент, сформированный десятилетиями опыта построения для Интернета».

«Это не просто новая версия — это новое направление. Одно быстрее, проще и ближе к самой Интернете», — написали Джексон и Флоренция в блоге в мае. «Чтобы сделать это, нам нужно владеть полным стеком — не опираясь на слои абстракции, мы не контролируем. Это означает отсутствие критических зависимостей, даже не реагировать».

Они начинают с вилки Preact, которая представляет собой зрелую библиотеку виртуального DOM (объект документа), уже используемая в Shopify и Google, добавили они.

Потерянный в обсуждении был тем, что все это означает для React Router, которому в этом году 11 лет.

«Мы пытаемся поддержать всех этих людей, поэтому […] Режим Framework полностью зарегистрирован ».
— Брукс Лайбранд, менеджер по связям с девеловыми отношениями, Shopify

Конвергенция REACT Router и REMIX Framework вызвали некоторую критику Reddit, но Либранд сказал, что загрузки выросли.

«Мы объявили, что слияли маршрутизатор React с ремиксом, и использование Raw React Router поднялось, по крайней мере, судя по загрузке NPM», — сказал он. «Это не пользователи Framework Mode. Это было похоже на обычный старый маршрутизатор React, ваш старый маршрутизатор, который вы знаете и любите, а не функции Framework».

Он указал на React Router версию 5, которая была выпущена пять лет назад и до сих пор получает миллионы загрузок каждую неделю.

«Мы пытаемся поддержать всех этих людей, так что мы сделали, так это режим Framework,-это полностью зарегистрировать»,-сказал он. «Это плагин Vite в конце дня».

VITE-это инструмент для сборки и сервер разработки, который стал популярной основой для мета-карамеров, включая Sveltekit, Nuxt.js 3, Astro и Solidstart.

Разработчики могут добавить плагин Framework, или они могут использовать маршрутизатор React, как и всегда с версии 5, сказал Либранд. Это в основном тот же API.

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

Три режима React Router

Либранд описал новый маршрутизатор React как работающий с одним из трех режимов:

  • Декларативный режим, который является маршрутизатором React, как и с V5;
  • Режим Framework, который включает в себя функции ремикса; и
  • Режим данных или маршрутизацию данных, который является API, который необходим для магазина, но решил поделиться. Это позволяет вам объединить маршрутизатор и данные вместе, но предоставляет свободу от какой -либо конкретной структуры, объяснил он.
  • «Это на самом деле первая точка входа, которую мы пытаемся дать людям — вот все вещи, которые вам нужны, чтобы включить RSC с вашим выбором или чем -то еще», — сказал он. «Собирались построить их для нашего собственного режима Framework, но мы также даем вам эти пьесы Lego».

    Режим данных вышел из поддержки RSC, добавил он.

    «Что происходит на вашем сервере, а затем что вы на самом деле отправляете клиенту? Этот разговор должен включать маршрутизатор», — объяснил Либранд. «Он решает, что показать вашему пользователю, но также решает, что загружать для вашего пользователя. Вот почему у нас есть режим данных, потому что он может на самом деле объединить вашу загрузку и ваши действия».

    RSC также заботится о данных и о том, что делать для пользователя, добавил он.

    «Это действительно важно для реагирования компонентов сервера, потому что вы можете использовать свою клиентскую директиву, чтобы сказать:« Ну, этот маленький кусок, он получает немного JavaScript, но остальная часть этого материала не получает JavaScript », — сказал он. «Со всеми этими деталями React Router является координатором таких произведений — говорит:« Вот ваши компоненты сервера React [and] Вот где мы должны сделать эти вещи, вот все эти произведения ».

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

    Поддержка компонентов сервера React

    Компоненты React Server были официально введены в 2020 году, но первая стабильная версия не достигла выхода React 19 в прошлом году. Если вы хотите реализовать RSC, это означало использование Next.js или выполнение пользовательской работы, объяснил Либранд.

    Это потому, что Next.js строится на вершине самой современной версии React.

    «Нам никогда не нравилась эта стратегия», — сказал Либранд. «Мы всегда рассматривали себя как, вы можете как можно больше владеть своими зависимостями».

    REACT Router в основном использовался для создания одностраничных приложений (SPA), которые загружаются на стороне клиента. Поддерживая RSC, он сможет предоставить приложения SSR (рендеринг на стороне сервера) полного стека. (Разработчик и педагог Джош Комо есть хорошее объяснение того, как RSC делает это и как он отличается от SSR.)

    На этой неделе команда React Router планирует выпустить API, чтобы показать, как может работать его поддержка RSC.

    «Мы не просто отдаем его в рамках. Мы на самом деле даем его в этом режиме данных, чтобы многие пользователи React Router могли использовать его», — сказал он. «Вас не обязательно приобретаете в нашу структуру Vite. Вам не нужно купить в то, как мы делаем маршрутизацию на основе файлов и все это дерьмо. Вы можете просто использовать его в своем маршрутизаторе данных и включить компоненты сервера React через маршрутизатор React, что очень интересно».

    Также будут шаблоны, которые помогут людям начать использование компонентов сервера React, добавил он. (На момент публикации это был запрос на притяжение, но он сказал, что скоро будет объединена.)

    Открытое управление

    Поддержка RSC — не единственная новая разработка для маршрутизатора React. В мае Джексон объявил о переходе на модель открытого управления.

    «React Router больше не просто мой и ребенок Райана. Это зрелый проект OSS с миллионами иждивенцев. Мы хотим, чтобы все высказали мнение о том, как продвигается проект, — написал Джексон на X.« Для этой цели мы представляем открытую модель управления для Rayact Router. Мы надеемся, что это поможет проекту продолжать процветать и обеспечить стабильную основу для любого, кто строится на REACT ».

    Руководящий комитет из пяти человек-все из команды Remix-пока он включает в себя Либранд. Он и разработчик Мэтт Брофи, еще один член Руководящего комитета, написали, что команда хочет больше отзывов и вкладов от более широкого сообщества маршрутизатора React.

    «Эти изменения в том, как развивается маршрутизатор React, являются лишь небольшим изменением того, как мы работаем годами, и обеспечит развитие React Router в течение многих лет», — писали Либранд и Брофи.

    Trending Stories youtube.com/thenewstack Tech движется быстро, не пропустите эпизод. Подпишитесь на наш канал YouTube, чтобы транслировать все наши подкасты, интервью, демонстрации и многое другое. Группа подпишитесь с эскизом. Loraine Lawson — ветеран -репортер, который в течение 25 лет освещал технологические проблемы от интеграции данных до безопасности. Прежде чем присоединиться к новому стеку, она работала редактором Banking Technology Site Bank Automation News. Она … читайте больше от Лорейн Лоусон

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *