145. SSE（Server-Sent Events：サーバーからの「ささやき」をリアルタイムに受け取る）

原理：サーバーが「話し続ける」通信

「聞きに行く」から「待つ」へ

これまでのHTMX（HTTP）は、ブラウザが「新しい情報はありますか？」と聞きに行き、サーバーが「はい、これです」と答えて終わる、一往復のやり取りでした。「SSE（Server-Sent Events）」は、サーバーとブラウザの間のパイプをつなぎっぱなしにして、サーバーの好きなタイミングで何度でも情報を送り込むことができる仕組みです。

これにより、ページを更新することなく、ニュースの速報や株価の変動、通知などをリアルタイムに受け取れるようになります。

実践：リアルタイム・アップデートの実現

1. SSE 拡張機能の導入

HTMXでSSEを使うには、公式の拡張機能が必要です（2.0系からは本体から分離されました）。

<script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>

2. サーバーとのパイプを繋ぐ

hx-ext="sse" を使い、どのURLから情報を流してもらうかを指定します。

<div hx-ext="sse" sse-connect="/api/updates">
    <!-- 
       sse-swap: サーバーから "newMessage" という名前のデータが届いたら、ここを書き換える
    -->
    <div sse-swap="newMessage">
        ここに最新ニュースが表示されます...
    </div>
</div>

3. ステップ・バイ・ステップ解説

「止まらない」データの選定: チャット通知、進捗バー、最新の注文状況など、「いつ更新されるか分からない」場所を選びます。
サーバー側の準備: ブラウザへ向けて「イベント名」と「HTMLデータ」を細切れに送り出し続ける特殊なプログラムを作ります。
受信の設定: sse-connect で接続し、sse-swap で受け取る場所を決めます。

比較：ポーリング (054.) vs SSE

ポーリング (hx-trigger="every 5s")

方法: 定期的に「ありますか？」と聞きに行く。
短所: 更新がない時でも通信が発生し、サーバーに負担がかかる。

SSE (Server-Sent Events)

方法: つなぎっぱなしで「待つ」。
長所: データがある時だけサーバーから送るため、非常に効率的で、反応も一瞬（超速い）。

まとめ：初心者のための「リアルタイム」の入り口

SSE をマスターすることは、あなたのアプリに「息遣い」を与えることです。

設定が意外と簡単: WebSockets（146.）に比べて仕組みがシンプルで、HTMXとの相性も抜群に良いです。
一方向の美学: サーバーから送るだけでいい（ブラウザから返事はいらない）通知のような機能には、SSEが最適解です。
「生きている」実感: 画面が勝手に書き換わり、最新情報が飛び込んでくる様子は、ユーザーに「このアプリは生きている」という強い印象を与えます。

サーバーの声を、そのまま画面へ。SSE という「絶え間ない情報流」を味方につけて、情報の鮮度が命の、活気あふれるダイナミックな Web アプリを構築してください。次の記事では、さらに強力な双方向通信「WebSocketsとの連携（146. WebSockets Integration）」をご紹介します。