コツ
<a>タグや<form>タグを使用するか？React等でインタラクティブなコンポーネントを作るとき、一般に<button>タグにonClick等のイベントハンドラーをつけます。同様にformを送信する場合も<form>タグにaction属性をつけずにonSubmitのイベントハンドラをつけて処理するのが一般的です（ただしNext.jsのServer Action等は除きます）。
メリットとしては以下のものが挙げられます。
<a>タグや<form>タグは動作しますので、プログレッシブエンハンスメントになります<a>タグのhrefはデフォルトでprefetchされます。このため非常にレスポンスが速いUI/UXが実現されています<a>タグにdata-turbo-method属性を追加すると、GET以外のHTTPメソッドを使えます。HTMLの構造上、<form>が使いにくい時に便利です。ただし非GETはなるべく<form>を使うことが推奨されています<a>タグおよび<form>にdata-turbo-frame属性を追加すると、サーバから返ってきたレスポンスを任意のTurbo Frameに転送できます<form>に含まれる<button>や<input>にdata-turbo-submits-withを追加すると、送信中にボタンのテキストを自動的に変更できます。これだけでPending UIが実現できます<form>にdata-turbo-confirm属性をつけると、form送信時に最終確認用のモーダルダイアログを表示できます。これはデフォルトではブラウザネイティブのwindow.confirm()が使用されますが、カスタマイズして任意のダイアログを表示できますここに挙げていない各種の機能もあります。
とにかく、なるべく<a>タグや<form>タグを使うようにしていれば、便利機能が勝手にどんどん追加されていきます。onClickを使ってカスタムのイベントハンドラを書くのではなく、なるべく標準機能で引っ張り、少しでもライブラリに多くの仕事をさせるのがHotwireを便利に使いこなすコツの一つだと思います。
<a>タグや<form>タグを使います<button>タグにonclickを書いて、そのハンドラからfetchするようなコードは滅多に書きません<a>タグや<form>タグが提供するイベントでは不十分な場合は<button>等からのイベントを拾い、Stimulusでイベントを処理させます
inputイベントをStimulusで拾って、その中からTurbo.visit([url])を書きます<button>タグにStimulusを繋げますTurboを使ってサーバとの非同期通信をスタートさせる場合、<a>タグや<form>タグが推奨されているのは上述した通りです。でもJavaScriptからやりたい場合もあります。そしてTurbo.visit([url])でそれが可能なことも紹介しました。しかし実は、ここには制限があります。Turbo.visit()はGETメソッドしか送信できないのです。
fetch()のように自在に好きなリクエストを送信できるようにはせず、TurboではJavaScriptから送信できるリクエストを敢えて制限しています。JavaScriptから非GETのTurboリクエストを送信しにくくしているのです。なるべく<form>タグを作って、プログレッシブエンハンスメントできるように書きなさいと言われているかのようです。
どうしてもJavaScriptから自由にTurboを使いたい場合はrequest.jsがあります。これはGitHubのrailsリポジトリにありますので、Railsのチームで管理をしているものです。request.jsはCSRFトークンの送信や返ってきたTurbo StreamをDOMに挿入処理もしてくれます。