SSEによるAIレイテンシの制御
AIのオートコンプリート機能を構築しましたが、ユーザーからは不評でした。
キー入力のたびにAIモデルへリクエストが送信され、ユーザーは完全なレスポンスが返ってくるまで2〜3秒待たされることになりました。UIが壊れているような感覚を与えてしまいました。
デバウンス（debouncing）も、キャッシュも、ローディングスピナーも試しましたが、どれも効果はありませんでした。根本的な問題は解決していませんでした。ユーザーはデータが表示されるまで、回答のすべてが完了するのを待たなければならなかったのです。
そこで、Server-Sent Events (SSE) を使用して、レスポンスをチャンクごとにストリーミングすることでこの問題を解決しました。
元の遅いフロー：
- ユーザーが文字を入力
- 300msのデバウンス
- HTTP POSTリクエスト
- サーバーがAI APIを呼び出し（1〜2秒）
- サーバーが完全なレスポンスを返却
- クライアントがレンダリング
ユーザーは2秒間、何も表示されない状態でした。
ポーリングも検討しましたが、オーバーヘッドが大きすぎます。WebSocketも機能しますが、単方向のストリームには重すぎます。
そこでSSEを選択しました。これは、サーバーが1つの長い接続を通じてテキストイベントを送信する標準規格です。
SSEがAIに適している理由：
- 単方向（サーバーからクライアント）である
- テキストベースのJSONチャンクを使用する
- 再接続を自動的に処理する
- 追加のライブラリが不要
効果はすぐに現れました。最初の単語が300ms以内に表示されるようになったのです。ユーザーは、提案が文字単位で構築されていく様子を確認できるようになりました。
指標が改善しました：
- 初回視覚的レスポンス時間：2.1秒から0.3秒へ
- ユーザーエンゲージメント：40%向上
- ユーザーからの苦情：ゼロ
ストリーミングの本質は「知覚」にあります。遅くても進行状況が見えるUIは、速くても静的なUIよりも優れています。ユーザーは、テキストの塊がすべて表示されるのを待つよりも、単語が一つずつ現れていくのを見る方を好むのです。
もしAI機能の動作が重いと感じるなら、まずはストリーミングを試してみてください。
Optional learning community: https://t.me/GyaanSetuAi