概要
Generative UIにおけるUI定義のストリーミング配信において、React Suspenseを用いて効率的にスケルトン表示を実装する手法を解説した記事です。
詳細内容
この記事では、生成AIがUIコンポーネントを動的に生成する「Generative UI」において、UIの構築状況に応じたローディング（スケルトン）表示をReact Suspenseで実現する方法を提案しています。
### 主な内容
- **Generative UIのストリーミング**: AIがUIの定義を少しずつ出力する際、クライアント側ではNDJSONやJSON Patchを用いてUIオブジェクトを逐次更新していく仕組み（Vercelのjson-renderの例）について解説。
- **ローディング設計の課題**: 従来の実装では未到着の要素をnullチェックなどで条件分岐してスケルトンを表示しますが、これをReactの標準的な「Suspense」で行うメリットを強調。
- **カスタムレンダラーの実装**: 未定義の要素を参照した際に意図的に解決しないPromiseをthrowすることで、Reactをサスペンド状態にし、Suspenseのfallback（スケルトン）を自動的に表示させる具体的な実装コードを紹介しています。
UIの構造そのものがストリーミングされる特異な状況において、Reactの宣言的なデータ取得・レンダリング制御がいかに親和性が高いかを考察しています。