HTMX + Go: 部分レンダリングと全ページHTMLレンダリングの実践的パターン

Alex Edwardsが、HTMXをGoウェブアプリケーションに統合する方法について詳細なウォークスルーを公開しました。この記事では、HTMXをGoのhtml/templateパッケージとスムーズに連携させるサーバーサイドのパターンに焦点を当て、テンプレート構成、部分レスポンスと全ページレスポンス、リダイレクト、エラーハンドリングを扱っています。

テンプレート構造

Edwardsは3層のテンプレートレイアウトを使用しています：共通のHTMLシェル用のベーステンプレート（base.tmpl）、pages/内のページ固有テンプレート、partials/内の再利用可能なパーシャル。すべてのテンプレートは一貫性のために{{define}}アクションで明示的に名前付けされており、ファイル名と定義名の混在はありません。ベーステンプレートには、DOM解析をブロックしないようdeferスクリプトタグでHTMXが含まれています。

HTMXによる部分レンダリング

hx-get="/gopher"とhx-swap="outerHTML"を持つボタンがGETリクエストをトリガーし、部分的なHTMLスニペット（この場合はゴーファーの画像）を返します。Edwardsは、サーバーがHTMXリクエスト（HX-Requestヘッダー経由）を検出し、全ページレイアウトではなく部分テンプレートのみを返す必要があると指摘しています。これにより、クライアント側のインタラクションが高速になり、DOM全体の再レンダリングを回避できます。

リダイレクトとエラーハンドリング

標準のHTTPリダイレクトはHTMXではうまく機能しません。なぜなら、クライアントはリダイレクトレスポンスではなくHTMLを期待するからです。Edwardsは、HTMXが開始したリクエストにはHX-Redirectレスポンスヘッダーを使用し、通常のブラウザリクエストには通常のリダイレクトにフォールバックすることを推奨しています。エラーについては、適切なHTTPステータスコード（404や500など）と部分的なエラーテンプレートを返すことを提案しており、HTMXはフルページリロードなしでインライン表示できます。

静的アセットの埋め込み

すべての静的アセット（CSS、JS、画像）は//go:embedを使用してGoバイナリに埋め込まれます。Edwardsは、HTMLテンプレートと静的ファイル用に別々のfs.FSインスタンスを作成し、関心事を明確に分離しています。カスタムhtmlRenderer型は、起動時に共有テンプレートを解析し、リクエストごとにクローンすることで、毎回テンプレートを再解析することなく効率的な部分レンダリングを可能にします。

設定のデフォルト

Edwardsは、部分更新による予期しない履歴スタックエントリを避けるためにhtmx.config.historyEnabled = falseを、ブーストリンクでの自動スクロールを防ぐためにhtmx.config.scrollIntoViewOnBoost = falseを設定することを推奨しています。これらの調整により、HTMXとサーバーレンダリングページを組み合わせた際の一般的なUXの驚きを防げます。