Post/Redirect/Getパターンと高速化

広く使われているPost/Redirect/Get パターン

• Next.jsもRemixも原則としてこれを採用。ただしNext.jsは高速化処理をしている
• HotwireはTurbo Drive, Turbo FramesではPost/Redirect/Getのパターンが必須
• Post/Redirect/Getは２往復のサーバ通信が必要になるので、勿体無い(非同期であれば、Post/Redirect/Getが回避するタイプの２重ポスト問題はそもそも起こらない)
• Hotwireの場合はTurbo Streamsを使うことで、１往復のサーバ通信で済ませることができる

非同期通信ではPost/Getでも良い

ネイティブブラウザのform POSTはナビゲーションを起こすものであり、document.locationの変更を伴います。document.locationがformのactionを指すようになります。Postの後にRedirectを入れるのは、document.locationがform.actionをずっと指したままの状態であるのは都合が悪いためです。

しかし非同期通信を使用した場合は、ずっと同じdocument.locationのままでモーダルを出したりしながらformを送信することがあります。この場合はdocument.locationがformのactionを指すことがありませんので、Postの後にRedirectを入れる必要がありません。そのため、PostからすぐにGetをしても良いのです。

HotwireはTurbo DriveやTurbo Framesの中でform POSTをした場合はPost/Redirect/Getパターンを期待しますし、これをやらないとうまく動きません。しかしこれはMPAからの移行をシンプルにしたり、エラーハンドリングを容易にするためのものであり、非同期通信の場合は従わなくても構いません。

HotwireでPost/Getをしたい場合は、この制約を受けないTurbo Streamsでレスポンスを返します。