こんにちは、marimoです。今回は、筆者も実装時に何度も行き詰ったTurboについて、サクッと理解できる記事を目指します！
ひとことで data: {turbo: false} を説明すると、Turbo Driveを無効化して通常のページ全体のリロードを行わせるコマンドです。これでは簡潔すぎるので、もう少し掘り下げてみましょう。
そもそもTurboって？
Turboとは、HotwireとよばれるモダンなWebアプリケーションを実装できる機能の一要素であり、Rails7で登場しました。その中で、Turbo Driveという要素は今回のテーマと深く関係しており、ページ全体のHTMLを非同期的に読み込んで、レスポンスを高速化する役割を担っています。この点について、もう少し掘り下げてみましょう。
非同期的に読み込むメリット
通常、クライアント（ブラウザ）とサーバは同期通信を行っております。例えば、ユーザーがWebサイト内のリンクを踏んだ場合、クライアントはサーバーに対してそのリンク先のHTMLをリクエストします。サーバーはそのリクエストに対し、HTMLを生成してクライアントにレスポンスします。その際、クライアントでは、リンクを踏む前のページが一度消去され、新しく受け取ったリンク先のページ全体が読み込まれます。
ただ、この方法には問題点があります。それは、ページを変更するたびに全体を読み込まなければならないという点です。例えば、SMSで新たにチャットを受け取りたい時、その都度ページ全体を読み込んでしまうと、変更の無い部分まで読み込み直すので無駄が発生し、レスポンスが遅くなる原因となります。
しかし、このページを非同期的に読み込むことによって、変更の必要な部分だけを読み込み直すことができるので、無駄を省いて高速な通信を実現することができます。
Turbo(Hotwire)は非同期通信なのか？
そんな具合で便利な非同期通信ですが、一般的にどうやって実現しているのかについて簡単にご説明します。
近頃人気が高まっているReactを例にざっくりと説明すると、ブラウザとサーバとのやり取りの間にReactが介入し、HTMLのやり取りはブラウザとReact間で、Reactとサーバとのやり取りはJSONとよばれるJavaScriptで記述されたデータを用いてやり取りを行います。そうすることで、クライアントサイドでHTMLの生成と表示を行うことができ、ページの部分読み込みを実現することができます。ここら辺の詳しい話は別の記事を参照してください。
よって、Turbo（正確にはHotwire）もReactと同じように機能して非同期通信を実現しているのかというと少し仕様が異なります。Hotwireがブラウザとサーバ間に介入する点は同じですが、Hotwireとサーバとのやり取りをJSONではなくHTMLで行うという点に違いがあります。それでは先述した同期通信とほぼ変わらないではないかと思った方はさすがです！Hotwireは同期通信の仕組みをベースとして、非同期「的」なやり取りを実現する仕組みなのです。
まとめ
Turbo Driveとは、Rails7で登場したHotwireの一要素であり、同期通信と同様にサーバとHTMLでやり取りを行いながら、非同期的なページ読み込みを実現するために必要な高速化ツールです。data: { turbo: false } コマンドはそのツールを無効化し、従来通りの同期通信を行わせます。
今後もRailsなどに関する記事を投稿していけるよう精進して参ります！