061. Load Polling（ロード・ポーリング：「読み込み完了」を待って、一度だけ自動で動く）
原理：遅れてやってくるデータの「予約席」
「後出し」で画面を完成させる
Webページを開いたとき、すべてのデータが同時に揃うとは限りません。 - 記事の本文はすぐ出るけれど、下の「おすすめ記事」は計算に時間がかかる。 - プロフィールの名前はすぐ出るけれど、最新の「活動記録」は外部サーバーから取ってくる必要がある。
全部が揃うまでユーザーを待たせる（画面を白くしておく）のは、あまり良い体験ではありません。 「Load Polling（ロード・ポーリング）」は、「とりあえず枠だけ先に表示しておいて、ページ全体の読み込みが終わった瞬間に、自らこっそり中身を取りに行く」という、非常に気の利いた仕組みです。
ポーリングの「一回きり」バージョン
前回の every 5s は「ずっと繰り返し」でしたが、この load トリガーは「ページ（要素）が読み込まれた時に一回だけ」実行されます。これによって、画面を段階的に、かつスムーズに「完成」させていくことができます。
実践：「重いパーツ」を後からそっと差し込む
1. スケルトンスクリーン（骨組み）からの読み込み
最初に「読み込み中...」という枠だけ出しておき、あとで中身を流し込む例です。
<!--
hx-get: 詳細データを取得
hx-trigger: "load" (このdivがブラウザに読み込まれたら即実行)
-->
<div hx-get="/api/slow-component" hx-trigger="load">
<div class="skeleton-loader">データを読み込んでいます...</div>
</div>
2. 複数のパーツをバラバラに読み込む
一つのページの中に、重さが違うパーツがたくさんある場合に有効です。
<section>
<h2>プロフィール</h2>
<!-- すぐに出る情報 -->
<p>名前：山田太郎</p>
<!-- 時間がかかるので、あとで読み込む -->
<div hx-get="/profile/stats" hx-trigger="load">
統計情報を読み込み中...
</div>
</section>
3. ステップ・バイ・ステップ解説
- 枠を作る: 最終的にHTMLを表示したい場所に
divなどのタグを置きます。 - 予約を入れる: そのタグに
hx-get="/URL"とhx-trigger="load"を書きます。 - サーバーの準備: サーバー側では、そのパーツ「だけ」を表すHTMLを作成して返せるようにしておきます。
比較：一斉読み込み vs ロード・ポーリング（Lazy Load）
一斉読み込み（通常）
- メリット: 実装がシンプル。
- デメリット: 一番遅いデータに合わせて、ページ全体が表示されるまで時間がかかる。ユーザーは「真っ白な画面」で待たされる。
ロード・ポーリング（HTMX）
- メリット: 出せる情報からさっさと表示するので、ユーザーは「速い！」と感じる。
- デメリット: サーバーに飛ぶリクエストの数が増える（1回 → パーツごとに増える）。
まとめ：初心者のための「おもてなし」の順序
ロード・ポーリングを使いこなすと、あなたのWebアプリは「ユーザーを一切待たせない」軽快なリズムを手に入れます。
- 「Lazy Load（レイジーロード）」とも呼ぶ: 遅れて読み込む、という意味で非常によく使われるテクニックです。
- 読み込み中もデザインする:
loadが走るまでの間に表示される「読み込み中...」の文字やアニメーションにもこだわると、よりプロらしい仕上がりになります。 - サーバーの分散: すべてのデータを一つのプログラムでこねくり回すのではなく、細かいパーツに分けて処理することで、サーバー側のプログラムも作りやすく、管理しやすくなります。
ページを一度に完璧にしようとしない。hx-trigger="load" を使って、出せるものから順に、リズムよく画面を彩っていきましょう。次の記事では、連打によるパニックを防ぐ「のスロットリング（062. Throttling）」をご紹介します。