背景
全仓 find app -name "loading.tsx" 结果为 0。SSG 文档页无所谓,但 /feed(SSR 拉后端,含三次退避降级)、/rank、/u/[username] 这些动态页在后端慢时是整页白屏——后端跨区(Vercel→CF→Oracle)延迟本来就不稳定(docs/resolve 超时都放宽到了 2500ms)。
方案
给动态路由段加 loading.tsx 骨架屏(App Router 原生 streaming,零额外依赖):
app/[locale]/feed/loading.tsx:卡片列表骨架(PostCard 轮廓 × 6)
app/[locale]/rank/loading.tsx:表格行骨架
app/[locale]/u/[username]/loading.tsx:头像 + 统计块骨架
骨架样式复用现有 tailwind 体系(animate-pulse),与暗色模式兼容。
验收
- DevTools 网络限速 Slow 3G 下访问 /feed:先见骨架后见内容,无整页白屏
- SSG 路由不受影响(build 表 diff 无变化)
背景
全仓
find app -name "loading.tsx"结果为 0。SSG 文档页无所谓,但/feed(SSR 拉后端,含三次退避降级)、/rank、/u/[username]这些动态页在后端慢时是整页白屏——后端跨区(Vercel→CF→Oracle)延迟本来就不稳定(docs/resolve超时都放宽到了 2500ms)。方案
给动态路由段加
loading.tsx骨架屏(App Router 原生 streaming,零额外依赖):app/[locale]/feed/loading.tsx:卡片列表骨架(PostCard 轮廓 × 6)app/[locale]/rank/loading.tsx:表格行骨架app/[locale]/u/[username]/loading.tsx:头像 + 统计块骨架骨架样式复用现有 tailwind 体系(
animate-pulse),与暗色模式兼容。验收