React 18 Suspense×ストリーミングSSR高速化プロンプト作例
CODE PREVIEW
エディタを読み込み中…
P
プロンプト
React 18のSuspenseとストリーミングSSRのデモを行う単一HTMLページを作成してください。疑似遅延データ取得（フェイクAPI）を使用し、完全なレスポンスが準備できる前にHTMLをストリーミングで段階的にレンダリングする方法を示します。Suspenseによるローディングフォールバックを含めてください。フレームワークは使わず、CDNからReactとReactDOMを読み込んでください。CSSでミニマルかつクリーンにスタイルし、各ステップを説明するインタラクティブなコメントを//で追加してください。
このデモは、React 18のSuspenseがストリーミングSSRを可能にする仕組みを示します。UserProfileとPostListの2つのコンポーネントに異なる遅延（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選