Suspense×ストリーミングSSR体感速度アップ作例【AI生成プロンプト】

このデモは、React 18のSuspenseとストリーミングSSRを使用して、コンテンツが利用可能になるたびにプログレッシブにレンダリングする方法を示しています。各アイテムは異なる遅延で非同期にデータを取得します。各Promiseが解決すると、すべてのデータを待たずに対応するリストアイテムが表示されます。この手法は、体感パフォーマンスとTTFB（最初のバイトまでの時間）を改善します。実際のSSRシナリオでは、サーバーがHTMLチャンクをクライアントにストリーミングします。ここでは、Suspense境界とリソースキャッシュを使用して、クライアント側でストリーミング効果をシミュレートしています。