Содержание
Коротко
MDN перезапустил фронтенд: визуально — единый дизайн, под капотом — отказ от React как «обёртки» вокруг статичного HTML. Команда перешла на web components (Lit), собственные server components и плоскую структуру CSS/JS, чтобы не тащить лишний JavaScript на каждую страницу документации.
Что произошло
Документация по-прежнему живёт в Markdown в git, сборка превращает её в JSON, а фронтенд «собирает» страницы на сервере. Старый стек (yari, Create React App + eject, огромный Webpack, перемешанный Sass/CSS) накопил технический долг: React оборачивал контент через dangerouslySetInnerHTML, интерактив внутри статей делали сырыми DOM API, дублировали логику.
С 2024 года команда пробовала Lit для встраиваемых виджетов (Scrims, interactive examples). Затем переписала оболочку сайта: вместо SPA — шаблонизация HTML на сервере, интерактив — изолированные custom elements с Declarative Shadow DOM, CSS и JS подгружаются по компоненту, а не одним блобом на весь роут.
Почему это важно
Для контентных сайтов (доки, блоги, справочники) классическая модель «один React-бандл на всё» плохо сходится с реальностью: 95% страницы — prose и примеры кода, а не приложение. React Server Components решают часть проблемы, но требуют смены фреймворка и всё равно тянут экосистему RSC.
Подход MDN ближе к островной архитектуре (Astro, Eleventy + islands): статика дешёвая, интерактив — точечный. Плюс web components можно вставлять прямо в Markdown-макросы (<scrim-inline>, <interactive-example>), без reparsing HTML в клиенте.
| Проблема старого yari | Новый подход |
|---|---|
| React не «видит» контент из Markdown | Web components в HTML контента |
| Один CSS на все маршруты | element.css / server.css на компонент |
| Дубли React + DOM API | Один Lit-компонент на виджет |
| Лишний JS для статики | SSR без повторного рендера «ради проверки» |
На практике
- Не тащите SPA на документацию — если интерактив локальный (копировать код, playground, embed), вынесите его в custom element или iframe с ленивой загрузкой.
- Lit vs React для простого state (диалог, lazy iframe) Lit часто проще: нативные template literals, без отдельной сборки JSX для куска внутри статьи.
- Плоская папка компонентов (
element.js,server.js,global.css) — дисциплина против «случайно подключили стили чужой страницы». - Миграция по частям — MDN рендерила Lit-компоненты внутри старого React через интеграцию, не переписывая Playground за один релиз.
Если вы на Astro/SSG — вы уже в похожей философии; пост MDN — хороший референс для обоснования «почему не Next на весь справочник».
Итог
MDN показывает зрелый кейс: документация ≠ SPA. Web components + server-side templating дают меньше JS, проще встраивание интерактива в контент и снимают «обёрточный» антипаттерн. Для full-stack разработчика это сигнал пересмотреть стек публичных docs и лендингов, а не только продуктовых дашбордов.