React 18 Suspense 流式SSR分步渲染——AI 生成代码示例
代码预览
エディタを読み込み中…
P
提示词
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）などで利用されています。
提示词解读
此演示展示了 React 18 的 Suspense 如何实现流式 SSR。我们为 UserProfile 和 PostList 两个组件设置了不同的延迟（2 秒和 3 秒）。每个组件都使用 React.Suspense 包裹，并显示回退消息。在实际的服务器端流式渲染中，UserProfile 的 HTML 一旦准备就绪就会发送到浏览器，即使 PostList 仍在加载中，也会先显示出来。回退内容会逐步被替换，从而提升感知速度。该技术已在 Next.js（通过 streaming + suspense）等框架中得到应用。
这个提示对您有帮助吗？
评论
评论将在审核后显示
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選