Браузер общается только с одним сервером, составляя Marko, React и Riot на одной странице отеля

Вы открываете страницу отеля. Это выглядит как один продукт: поисковая сетка, избранное пребывание, местные основные моменты, обзоры, липкое резюме поездки. Под капотом находится восемь HTTP-серверов и три UI-интерфейса. Это эксперимент HarborStay, демо-приложения для бронирования, которое я создал, чтобы ответить на упрямый вопрос: Могут ли независимые команды отправлять независимый пользовательский интерфейс в независимых фреймворках и по-прежнему предоставлять браузеру одну готовую к окраске HTML-страницу? Ударная линия: да — если оболочка никогда не импортирует компонент. Он просто использует HTML. Одно правило Браузер никогда не разговаривает с фрагментом. Разговаривает с композитором на порту. Композитор владеет маршрутами, планировкой и потоком бронирования. Все остальное - это сервер фрагментов, который возвращает часть HTML. Это противоположность обычной истории микрофронтенда (Module Federation, общий React, хост, который имеет виджеты). HarborStay — это HTML-композиция. Оболочка не знает, был ли отрисован фрагмент Марко, React или ручной струной Riot. Он знает только URL. Это одно ограничение покупает много: команды фрагментов могут выбрать время выполнения, не спрашивая оболочку. Отключение фрагмента становится резервным ящиком, а не пустой страницей. Вы можете развернуть поиск без перераспределения отзывов. Это также способствует честности. Если два фрагмента должны совместно использовать магазин Redux, архитектура уже просачивается. То, что пользователь действительно видит модели HarborStay, представляет собой небольшой премиальный каталог: Harbor View Lodge в Лиссабоне, Copper Hill Suites в Севилье, Sunset Terrace House в Барселоне, Moss & Lantern в Копенгагене. Маршруты, которыми владеет композитор: Маршрут What you get and Streaming stays page Neighborhood explorer + day plan Confirmation (Я получил для Moss & Lantern) На странице не написано «Дерево реакции». Это макет слотов: нажмите Luxury на поисковых чипах, и сетка рухнет до Harbor View Lodge и Moss & Lantern. Приведенные ниже обзоры не повторяются. Они никогда не слышали о фильтре. Это не ошибка — вот в чем дело. Островное правило: каждый фрагмент обладает собственной интерактивностью. Фильтры поиска — это состояние Марко. Основной выбор — это состояние React. Категориями опыта являются Riot State. У композитора нет глобального магазина. Крошечный протокол вместо общего SDK Каждый фрагмент говорит. И несколько заголовков провенанса: Композитор читает тело HTML. URL-адреса активов являются информационными. В этой демонстрации CSS и JS подаются из крошечного приложения CDN на этих копиях фрагментов активов при запуске. Этот раскол является реальной формой: SSR живет с командой, которая владеет пользовательским интерфейсом. Байты живут на CDN. Активы принадлежат тому фрагменту, который их создал, а не оболочке: Если поиску нужен новый чип фильтра, отзывы не перестраиваются. Три времени выполнения, один HTML контракт Это та часть, которую люди считают невозможной. Runtime Fragments Server отображает навигацию, поиск, детали, обзоры, рекомендации Client Marko → Marko DOM runtime монтируется в корень React 19 локальных выделений Riot Experiences discovery + маршрут написания от руки после очистки корня SSR Композитору все равно. Все три обратные струны. Почему ССР в микрофронтенде вообще? Первая краска не ждет JavaScript. HTML является единственным лингва франка трех фреймворков. В случае неудачи пользователь все равно видит карты. Последняя из них — это архитектура островов в малом: статический HTML с карманами JS, а не SPA, который увлажняет весь документ. Как данные пересекают разрыв SSR/клиента Каждый интерактивный фрагмент встраивает реквизит как JSON, а не атрибуты: Пакет клиента читает этот сценарий и монтируется. Перед встраиванием серверы фрагментов выходят, так как описание отеля не может вырваться из тега сценария. Выглядит проще. Хуже: большой JSON по атрибутам раздувает DOM, нуждается в уродливом побеге и виден всему, что ходит по дереву. Гидратация - это не одно слово, когда приложение Walking Live делает это конкретным. Марко ищет гидраты. Роскошь / Ценность / Верхний рейтинг переоформления сетки без навигации. Шаблон клиента должен соответствовать шаблону сервера или вы получаете вспышку. React выделяет гидраты с . На Moss & Lantern вы получаете петлю сада, ритуал сауны и рынок гавани