前端13 分钟
Next.js 15 Server Components 与流式渲染实战：首屏性能优化全攻略
深入理解 RSC 运行时机制、Suspense 边界编排、流式 SSR 原理及与客户端组件的协作模式。
Next.jsReactServer Components前端性能优化
Server Components 运行时机制
Next.js 15 的 Server Components 在服务端执行，不发送 JavaScript 到客户端。这意味着你可以直接在组件中访问数据库、文件系统等服务端资源。
流式 SSR 原理
#
Suspense 边界编排
Suspense 允许你将页面拆分为独立的流式块，先发送 shell，再逐步填充内容。
#
流式 SSR vs 传统 SSR
- 传统 SSR：等所有数据加载完 → 生成 HTML → 一次性发送 - 流式 SSR：先发送 shell → 数据就绪后逐块发送 → 客户端渐进渲染
首屏优化策略
1. 关键路径组件用 Server Component
2. 非关键内容用 Suspense 包裹
3. 数据预取用 fetch 的 cache: 'force-cache'
4. 避免在 Server Component 中使用 useState/useEffect