私は現在、Go、Templ、HTMX を使用して自分でホストする独自のブログ プラットフォームの作成に取り組んでいます。これは楽しくて役に立つプロジェクトであり、このスタックについての知識を得るのにも役立つと判断しました。このブログ投稿では、HTMX を使用したリダイレクトの処理で直面した課題に対する私の経験と解決策を共有します。

ブラウザのリダイレクト

管理者向けの機能をまとめながら、いよいよプロジェクトへの HTMX の実装を開始する時期が来たと判断しました。まず、ログアウト ハンドラーに POST リクエストを送信するボタン要素から始めました。通常、このタスクはフォーム要素を使用して実行しますが、前述したように、プロジェクトへの HTMX の実装を開始します。問題は、この POST アクションがフォームのように動作し、サーバーからの応答が / エンドポイントにリダイレクトされるようにしたいことです。

問題: http.Redirect によるリダイレクトの処理

私が使用したボタン要素は次のとおりです:

Logout

私が遭遇した問題は、リダイレクトの応答が依然として HTML であり、HTMX がこのコンテンツをログアウト ボタン要素と交換することでした。

http.Redirect によるリダイレクトの処理

func (app *application) handleLogoutPost(w http.ResponseWriter, r *http.Request) {
    // handle business logic...
    //...

    http.Redirect(w, r, "/", http.StatusSeeOther)
}

画像: ログアウト ボタンとコンテンツが入れ替わりました

解決策: HX-Redirect ヘッダーを使用する

コンテンツの交換は、応答内の http.Redirect を HX-Redirect ヘッダーとその値としてターゲットの場所に置き換えることによって防止できます。

func (app *application) handleLogoutPost(w http.ResponseWriter, r *http.Request) {
    // handle business logic...
    //...

    // Write our HX-Redirect header with location and redirect
    w.Header().Set("HX-Redirect", "/")
    http.WriteHeader(http.StatusNoContent)
}

画像: ブラウザがリダイレクトされました / URL に注意してください。

結論

Go、Templ、および HTMX を使用して独自のブログ プラットフォームを構築するプロセスは、これまでのところやりがいのある経験です。 HTMX を統合することにより、追加の JavaScript コードを作成して提供する必要がなく、最新の Web サイトであれば多くの対話機能をサイトに引き続き搭載できるようになります。 HX-Redirect ヘッダーを使用してリダイレクトを処理することは、シンプルで効果的なソリューションでした。この投稿がプロジェクトを進めるすべての人に役立ち、Web アプリケーションで HTMX の可能性を探求するきっかけになれば幸いです。