MisagoがReact.jsをHTMXに置き換え
原題: Removing React.js from the codebase and adapting Htmx for UI interactivity (2023)
なぜ重要か
フロントエンドのSPA化に疑問を持つ開発者が増える中、HTMXへの回帰はサーバーサイドレンダリング重視のトレンドを象徴する事例として注目される。
Misagoのプロジェクトリードrafalp氏は2023年12月12日、コードベースからReact.jsを除去しHTMXを採用する方針を公式フォーラムで発表した。現行アーキテクチャで生じているDjangoテンプレートとReact.jsコンポーネントの二重実装、パフォーマンス低下、プラグイン開発の複雑化といった問題を解消するための移行計画として示された。
Misagoは現在、DjangoビューがHTMLをレンダリングした後、JavaScriptがダウンロードされReact.jsコンポーネントによってページの大部分を書き換えるという二段階方式を採用している。この方式では、ページがDjangoテンプレートとReact.jsコンポーネントの両方で実装される二重管理が発生し、HTMLをカスタマイズしようとしたユーザーがDjangoテンプレートのみを編集してReact.js側の変更を見落とすという問題が繰り返されてきた。
またすべてのビューはDjangoビューとReact.jsルートの2つとして実装する必要があり、データ取得用のAPIやJSONシリアライザーも別途必要となる。JSONのプリレンダリングはレスポンス生成を遅延させ、翻訳メッセージも「django.po」と「djangojs.po」に重複して管理される。さらに大量のJavaScriptは特に旧型・低スペックのモバイル端末でパフォーマンスを悪化させる。プラグイン開発者もDjangoテンプレートとReact.jsコンポーネントの両方に対応する必要があり、misago-dockerではJavaScriptのビルドステップも必要となっていた。
rafalp氏は代替案として「APIとReact.js SPAへの全面移行」や「Next.jsまたはRemix.runによるサーバーサイドレンダリング付きJavaScriptフレームワークへの移行」も検討したが、最終的にHTMXの採用を選択した。HTMXはHTMLの特定箇所を「動的アイランド」として指定し、サーバーがレンダリングしたHTMLと部分的に差し替えることができる小規模なライブラリである。
たとえばスレッド一覧の表示カテゴリ切り替え時、HTMXはスレッド一覧部分のHTMLのみをDjangoから取得して差し替える。ページ全体を再描画する必要がなく、JSONシリアライザーや専用のJavaScript・React.jsコードも不要となる。DjangoバックエンドはリクエストがHTMXからのものである場合、ページ全体ではなく該当アイランドのHTMLのみを返すように変更するだけで対応できるとしている。