RSC Fetch, Cache & Streaming Demo — AI-Generated HTML Example
CODE PREVIEW
Prompt
Create a single HTML file demonstrating React Server Components data fetching with caching and streaming patterns. Show two scenarios: a cached async fetch (using `cache()` and `React.cache()`) and a streaming Suspense boundary. Use a mock API delay, display a fallback UI, and show cached vs non-cached timestamps. Include a toggle to refetch without cache.
このデモはRSC（React Server Components）の2つのデータフェッチパターン、React.cache()によるキャッシュとSuspense境界を使ったストリーミングを可視化します。RSCではcache()が同一引数のリクエストを重複排除し、サーバ負荷を減らしパフォーマンスを向上。ストリーミングによりユーザーはフォールバックUIを即座に見ながら、データが到着次第レンダリングされます。ダッシュボードやコンテンツ量の多いページ、速度・新鮮さ・UXのバランスが求められる場面に最適です。
Prompt Overview
This demo visualizes two data fetching patterns in RSC (React Server Components): React.cache() caching and streaming with Suspense boundaries. In RSC, cache() deduplicates requests with the same arguments, reducing server load and improving performance. Streaming allows users to instantly see a fallback UI while rendering data as it arrives. This is ideal for dashboards, content-heavy pages, and scenarios requiring a balance between speed, freshness, and UX.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選