Next.js 15 Streaming SSR 与 Suspense 边界治理实践

正文Next.js 15 的 App Router 默认采用 RSC 流式渲染，结合 Suspense 可将昂贵数据段延后，同时保证主框架快速可见。本文给出边界拆分与数据治理示例。一、边界拆分与数据策略// app/page.tsx （Server Component） import { Suspense } from 'react' async function fetchTop() { const r = await fetch('https://api.example.com/top', { next: { revalidate: 120, tags: ['top'] } }) return r.json() } async function fetchHeavy() { const r = await fetch('https://api.example.com/heavy', { next: { revalidate: 600, tags: ['heavy'] } }) return r.json() } async function TopSection() { const data = await fetchTop() return <section><h2>Top</h2><pre>{JSON.stringify(data)}</pre></section> } async function HeavySection() { const data = await fetchHeavy() return <section><h2>Heavy</h2><pre>{JSON.stringify(data)}</pre></section> } export default async function Page() { return ( <main> <Suspense fallback={<div>加载主内容...</div>}> {/* 轻量段优先渲染 */} {/* Server Component：无客户端包体负担 */} {/* 在 RSC 流中逐步输出 */} {/* TopSection 先行 */} {/* HeavySection 置于独立 Suspense，避免阻塞 */} {/* 也可将多个昂贵段各自包裹 */} {/* 边界与数据策略配合 revalidate tags */} {/* 提升整体流畅性 */} {/* 以上注释为解释用途，实际可移除 */} <TopSection /> </Suspense> <Suspense fallback={<div>次级数据加载中...</div>}> <HeavySection /> </Suspense> </main> ) } 二、治理要点数据分层：主框架与轻量数据置顶，昂贵数据单独 Suspense；避免大块内容阻塞首屏。缓存策略：为各段设置不同的 `revalidate` 与 `tags`，便于定向刷新与复用。客户端边界：尽量在 Server Components 完成数据获取与渲染，减少客户端包体与水合压力；交互再使用 Client Components。