見た目の裏にあった技術的負債

MDNの新フロントエンドは、単なるデザイン刷新ではありません。旧構成はCreate React App起点の複雑化、肥大化したWebpack設定、SassとCSS変数の混在、巨大なCSSの一括配信、dangerouslySetInnerHTMLへの依存など、長年の運用で積み上がった負債を抱えていました。

MarkdownからJSONへ、そしてSSRへ

新しい構成では、Markdownで管理されたコンテンツをビルド時にHTMLとJSONメタデータへ変換し、SSRで完全なページへ組み立ててからクラウド配信します。旧構成ではReactアプリが静的コンテンツの薄いラッパーに留まりながら、一部の相互作用だけDOM APIで別実装するという非効率な状態でしたが、この役割分担によってReactが本来担うべき部分だけを担うようになりました。

ドキュメントサイトに教訓を返す事例

SPAの華やかさよりも静的コンテンツの配信効率と保守性を優先する判断は、MDNのようにアクセス数が膨大で更新頻度も高いサイトだからこそ説得力があります。アプリとコンテンツの境界設計がずれると負債が膨らむという点は、同様の大規模ドキュメントサイトを運用するチームにとって参考になる事例です。図解を含む詳細はMDN Blogの記事で読むことができます。