React Suspense流式SSR骨架屏示例｜AI生成单文件HTML提示词
代码预览
エディタを読み込み中…
P
提示词
Create a single HTML page demonstrating React Suspense streaming SSR concept: a server-rendered page that streams in parts. Show a skeleton placeholder, then a simulated slow component (3s delay) and a fast component (1s delay). Use a simple JavaScript simulation (no actual React). The page should have a header, a sidebar with loading skeleton, and main content that appears progressively. Use Swiper for a small carousel, GSAP for entry animations, and AOS for scroll reveal. Style modern and clean.
この1つのHTMLファイルは、SuspenseストリーミングSSRのコンセプトをデモンストレーションします。サーバーがページの各部分を段階的にストリーミングする様子をシミュレート。サイドバー（500ms）、高速コンポーネント（1秒、Swiperカルーセル付き）、低速コンポーネント（3秒）が順に表示され、スケルトンプレースホルダーからコンテンツへと変化します。GSAPがエントリーアニメーションを、AOSがスクロールリビールを担当。
提示词解读
这个单一的HTML文件演示了Suspense流式SSR的概念。它模拟了服务器逐步流式传输页面各部分的过程。侧边栏（500毫秒）、快速组件（1秒，带Swiper轮播）和慢速组件（3秒）依次显示，从骨架占位符过渡到实际内容。GSAP负责入场动画，AOS负责滚动揭示效果。
这个提示对您有帮助吗？
评论
评论将在审核后显示
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選