React 18 Suspense y Streaming SSR — Ejemplo generado con IA
VISTA DE CÓDIGO
Prompt
Create a single HTML page that demonstrates React 18's Suspense with streaming server-side rendering (SSR). Use a simulated slow data fetch (like a fake API) and show how streaming HTML can progressively render content before the full response is ready. Include a loading fallback using Suspense. Use no framework other than React and ReactDOM from CDN. Style it minimally but cleanly with CSS. Also add interactive comments using // to explain each step.
このデモは、React 18のSuspenseがストリーミングSSRを可能にする仕組みを示します。UserProfileとPostListの2つのコンポーネントに異なる遅延（2秒と3秒）を設定しています。それぞれReact.Suspenseでラップし、フォールバックメッセージを表示します。実際のサーバーサイドストリーミングでは、UserProfileのHTMLが準備でき次第ブラウザに送信され、PostListがまだロード中でも先に表示されます。フォールバックは段階的に置き換えられ、体感速度が向上します。この手法はNext.js（streaming + suspense）などで利用されています。
Resumen del prompt
Este demo muestra cómo React 18 Suspense permite el SSR (Server-Side Rendering) con streaming. Se han configurado diferentes retardos (2 segundos y 3 segundos) para dos componentes: UserProfile y PostList. Cada uno está envuelto en React.Suspense y muestra un mensaje de respaldo. En el streaming real del lado del servidor, el HTML de UserProfile se envía al navegador tan pronto como esté listo, y se muestra primero incluso si PostList aún se está cargando. Los respaldos se reemplazan progresivamente, mejorando la velocidad percibida. Esta técnica se utiliza en Next.js (streaming + suspense), entre otros.
¿Te resultó útil este prompt?
Comentarios
Los comentarios aparecen después de la moderación
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選