【要約】Generative UIでSuspenseを使う [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
フロントエンド開発者がGenerative UIを実装する際、UIの定義自体が断片的に届くという特有の挙動に直面する。従来のデータ取得待ちとは異なり、コンポーネントツリーが未完成の状態で届くため、以下の課題が生じる。
- ・UIの構造が構築途中の状態で描画を試みる必要がある。
- ・既存の@json-render/reactでは、未定義要素がnullとして扱われる。
- ・そのため、各コンポーネントで手動の条件分岐によるスケルトン表示の実装を強いられる。
// Approach
筆者は、ReactのSuspenseを活用して、宣言的にスケルトンを表示するカスタムレンダラーを提案している。具体的には、以下の手順で実装を行う。
- ・NDJSON形式で送られてくるJSON Patchを解析し、UIオブジェクトを構築する。
- ・レンダリング時に、elements内に該当する要素が存在しない場合、throw NEVER_RESOLVESを実行する。
- ・この例外によりReactのSuspenseを強制的に発火させ、fallbackに指定したスケルトンを表示させる。
// Result
筆者が作成したカスタムレンダラーにより、Reactの標準的なSuspenseを用いたスケルトンUIの実現が可能となった。これにより、以下の効果が得られる。
- ・コンポーネント定義内でSuspenseを用いるだけで、ローディング状態を制御できる。
- ・UIの完成度に応じて、ネストされたSuspenseが順次解除される。
- ・ただし、実装例では表示のガタつきが残っており、さらなる最適化が課題である。
Senior Engineer Insight
> Generative UIのUX設計において、ストリーミングの制御は極めて重要だ。本手法は、Reactの宣言的なモデルにAIの非同期性を適合させる優れたアプローチである。ただし、NEVER_RESOLVESのような「解決しないPromise」に依存する実装は、メモリリークや予期せぬ挙動のリスクを伴う。実戦投入には、ストリーミングの完了検知と、レンダリングの安定性を担保する高度なエラーハンドリングが不可欠だ。