流式 SSR 让服务器一旦准备好就以块的形式将 HTML 发送到浏览器，而不是等待整个页面呈现。慢的部分不会阻止快的部分——用户可以逐步看到内容。React <Suspense> 定义流式处理边界。
流式处理解决的问题
不使用流式处理时，如果某个部分需要缓慢的数据库查询，整个页面都会等待它，然后才发送任何 HTML——用户看到的是空白屏幕。流式处理会立即发送壳层和快速内容，然后在慢速部分完成时流式传输它们。
import { Suspense } from "react";
export default function Page() {
return (
<>
<Header /> {/* sent immediately */}
<Suspense fallback={<Skeleton />}> {/* streams independently */}
<SlowProductList /> {/* an async Server Component */}
</Suspense>
<Footer /> {/* sent immediately */}
</>
);
}
async function SlowProductList() {
const products = await getProducts(); // takes 2s — doesn't block the rest
return <List products={products} />;
}
页头、页脚和骨架屏立即到达；当 getProducts() 解析时，React 流式传输产品列表并替换骨架屏——一切都在一个连续的响应中完成。
// app/dashboard/loading.tsx → Next wraps the whole page in <Suspense> with this fallback
export default function Loading() { return <Spinner />; }
loading.tsx 文件是将路由包装在 Suspense 中的语法糖——是流式传输整个段的最简单方式。
TTFB (Time To First Byte) ↓ — server sends the shell right away
FCP (First Contentful Paint) ↓ — visible content appears sooner
User perceives the page as fast even if some data is slow
你还可以获得选择性注水——React 可以在流式传输进来的时候对交互部分进行注水，而不是等待所有内容都准备好。
流式 SSR 消除了传统 SSR 固有的
一个包含详细解答的 IT 面试题库——从初级到高级。
捐赠