MisagoがReact.jsを廃止しHTMXを採用
원제: Removing React.js from the codebase and adapting Htmx for UI interactivity (2023)
왜 중요한가
フルスタックJavaScript離れの事例として、軽量なHTMXによるサーバーサイドレンダリング回帰のトレンドを示す実践的なケーススタディとなっている。
オープンソースフォーラムソフトウェアMisagoのプロジェクトリードrafalp氏は2023年12月12日、フロントエンドからReact.jsを完全撤廃し、軽量ライブラリHTMXに移行する方針を公式フォーラムで発表した。二重実装によるメンテナンスコストの増大や、JavaScriptの肥大化によるモバイル端末でのパフォーマンス低下が主な理由。
Misagoは現在、Djangoテンプレートで生成したHTMLをページ読み込み後にReact.jsコンポーネントで置き換えるアーキテクチャを採用している。この仕組みにより、同一ページのDjangoテンプレートとReact.jsコンポーネントの二重実装が必要となり、カスタマイズ時には両方を修正しなければならないという問題が生じていた。また、翻訳メッセージがdjango.poとdjangojs.poの両ファイルに重複して存在し、JSONシリアライズ処理がレスポンス生成を遅延させる課題もあった。
HTMXはページ内の特定部分を「動的アイランド」として定義し、インタラクション時にサーバーレンダリングされたHTMLで部分更新できる軽量ライブラリ。Djangoテンプレートに数行のHTMX属性を追加するだけで、スレッド一覧のカテゴリ切り替えなどの動的処理を実現でき、専用のJSONシリアライザやReact.jsコンポーネントは不要になる。
rafalp氏は移行の利点として、実装の一本化、プラグイン開発の簡素化、JavaScriptバンドルサイズの削減、モバイル端末でのパフォーマンス向上を挙げた。Next.jsやRemixへの全面移行も検討したが、サーバーサイドレンダリングを主体とした従来型アプローチに回帰する方針を選択した。