RSCキャッシュ＆ストリーミング作例｜AIプロンプトで生成
CODE PREVIEW
エディタを読み込み中…
P
プロンプト
React Server Componentsのデータフェッチパターン（キャッシュ＋ストリーミング）をデモする単一HTMLファイルを作成。cache() / React.cache() を使ったキャッシュフェッチと、Suspense境界によるストリーミング表示の2つを実装。モックAPI遅延を入れ、フォールバックUI、キャッシュ有無のタイムスタンプを表示。再フェッチトグルも実装。
このデモはRSC（React Server Components）の2つのデータフェッチパターン、React.cache()によるキャッシュとSuspense境界を使ったストリーミングを可視化します。RSCではcache()が同一引数のリクエストを重複排除し、サーバ負荷を減らしパフォーマンスを向上。ストリーミングによりユーザーはフォールバックUIを即座に見ながら、データが到着次第レンダリングされます。ダッシュボードやコンテンツ量の多いページ、速度・新鮮さ・UXのバランスが求められる場面に最適です。
このプロンプトは役に立ちましたか？
コメント
コメントは承認後に表示されます
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選