ギフプロギフプロ

React Suspense SSRストリーミング作例|スケルトンUI付きプロンプト

CODE PREVIEW

P

プロンプト

React SuspenseストリーミングSSRのデモページを1つのHTMLで作成。サーバーから段階的にレンダリングされる様子を、スケルトンプレースホルダー付きでシミュレート。遅いコンポーネント(3秒)と速いコンポーネント(1秒)を用意し、骨格→内容が順に表示されるアニメーション。Swiperでカルーセル、GSAPでエントリーアニメ、AOSでスクロールリビール。モダンでクリーンなデザイン。

この1つのHTMLファイルは、SuspenseストリーミングSSRのコンセプトをデモンストレーションします。サーバーがページの各部分を段階的にストリーミングする様子をシミュレート。サイドバー(500ms)、高速コンポーネント(1秒、Swiperカルーセル付き)、低速コンポーネント(3秒)が順に表示され、スケルトンプレースホルダーからコンテンツへと変化します。GSAPがエントリーアニメーションを、AOSがスクロールリビールを担当。

このプロンプトは役に立ちましたか?

コメント

コメントは承認後に表示されます

ホームヘルプ