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。