Hotwireを使うと下記のことができます。
- ページリロードを行わずにページ内容を動的に更新できます
- 動的なモーダルやスライドメニューなどのインタラクティブなUIコンポーネントが作れます
- キャッシュなどを活用した高速なレスポンスが実現できます
これはReactやNext.jsの特徴と言われていものと同じです。つまりHotwireを使うと、ReactやNext.jsで作成されたものと同等のことできます。
- Hotwireでは主にサーバでHTMLを生成します。Next.jsのSSRやServer Componentと同じです
- このため、ブラウザにデータを送信するためのJSON APIの作成が不要です
- Hotwireは直接DOMを変更します
- Reactは常にステートを介さないDOM変更は原則禁止ですが、Hotwireの場合はシンプルな場合はステートを介さなくても良いです
- 基本的にステート管理をあまり意識する必要がありません
- 複雑なUI/UXを作るときに初めてStimulusのステート管理を学べば十分です
- Reactを書くためには、JavaScriptのES6記述、高階関数、async await非同期処理など、高いレベルの知識が必要です。React自身も難解ですが、その前にJavaScriptの難解な機能を理解する必要があります
- Hotwireはこれらをほとんど使いません。JavaScript入門チュートリアルレベルの言語機能だけ理解できていれば十分です
- HTML/CSSには詳しいけれども、高度なJavaScriptはイマイチ自信がない人（特にデザイナー）でもHotwireは使いこなせます
HotwireはReactとは異なります
- Hotwireの考え方はReactとは多くの点で異なります
- Hotwireは従来のMPAを拡張する考え方です。先にHTMLを考えます
- Reactは先にステートを考えます。先にステートがあり、これをHTMLに反映させます
Reactの考え方は公式サイトのReactの流儀で解説されています。またHotwireとReactのアプローチの違いについてはHotwire, React, jQueryのアプローチで解説しています。
ReactとHotwireの考え方が分岐した歴史についてはHotwireの歴史で解説しています。