Зміст
Коротко
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-бандл на все» погано збігається з реальністю: більшість сторінки — текст і приклади коду, а не застосунок. React Server Components частково вирішують проблему, але вимагають зміни фреймворку.
Підхід MDN ближчий до островної архітектури (Astro): статика дешева, інтерактив — точковий. Web components можна вставляти прямо в Markdown-макроси без reparsing HTML у клієнті.
| Проблема старого yari | Новий підхід |
|---|---|
| React не «бачить» контент з Markdown | Web components у HTML контенту |
| Один CSS на всі маршрути | element.css / server.css на компонент |
| Дубль React + DOM API | Один Lit-компонент на віджет |
| Зайвий JS для статики | SSR без повторного рендеру «для перевірки» |
На практиці
- Не тягніть SPA на документацію — локальний інтерактив (копіювання коду, playground, embed) винесіть у custom element або lazy iframe.
- Lit vs React для простого state (діалог, lazy iframe) Lit часто простіший.
- Плоска папка компонентів — дисципліна проти випадкових стилів чужих сторінок.
- Міграція частинами — MDN рендерила Lit всередині старого React, не переписуючи Playground за один реліз.
Якщо ви на Astro/SSG — ви вже в схожій філософії; пост MDN — гарний референс, чому не Next на весь довідник.
Підсумок
MDN показує зрілий кейс: документація ≠ SPA. Web components + серверні шаблони дають менше JS і простіше вбудовування інтерактиву. Має сенс переглянути стек публічних docs, а не лише продуктових дашбордів.