Next.js流式SSR实战：从Suspense到渐进式渲染的5种生产模式
前端工程
传统SSR的TTFB为什么越来越慢
你的电商首页用了传统SSR，首屏TTFB从800ms涨到了3秒——因为数据获取是瀑布流式的：先等用户信息，再等商品列表，再等推荐数据，最后等评论。整棵组件树必须等最慢的那个请求完成才能返回第一个字节。用户盯着白屏，LCP直接爆表。
Next.js 15的Streaming SSR通过Suspense边界将HTML分块流式传输，先发送静态壳，动态部分就绪后追加。本文将带你完成Suspense边界布局→流式HTML与loading.tsx→渐进式水合→并行数据获取→生产级错误边界的5种生产模式，让TTFB降低60%以上。
Streaming SSR核心概念
| 概念 | 说明 |
|---|---|
| Streaming SSR | 流式服务端渲染，HTML分块传输，无需等待全部数据就绪 |
| Suspense | React并发特性，声明异步加载边界，配合Streaming实现分块渲染 |
| Progressive Rendering | 渐进式渲染，页面内容逐步呈现，用户先看到可用内容 |
| Hydration | 水合，服务端HTML与客户端JS关联，使页面可交互 |
| React Server Components (RSC) | 服务端组件，零客户端JS，天然支持Streaming |
| App Router | Next.js 15路由系统，原生支持Streaming SSR和RSC |
传统SSR vs Streaming SSR
传统SSR：
请求到达 → 等待所有数据 → 生成完整HTML → 一次性发送 → TTFB = 最慢请求耗时
Streaming SSR：
请求到达 → 立即发送静态壳 → Suspense分块 → 各块数据就绪后追加 → TTFB ≈ 0
问题分析：传统SSR的5大挑战
- 瀑布流数据获取：组件嵌套导致串行fetch，TTFB = fetchA + fetchB + fetchC，线性增长
- 阻塞式渲染：整棵树必须等最慢节点完成，快速数据被慢速数据拖累
- 水合瓶颈：大页面一次性水合，主线程长时间阻塞，INP指标恶化
- 错误雪崩：一个数据源失败导致整页500，无降级能力
- 缓存粒度粗：整页缓存无法区分静态/动态部分，频繁失效导致命中率低
分步实操：5种生产模式
模式1：Suspense边界布局与流式渲染
// app/page.tsx
import { Suspense } from 'react';
export default function DashboardPage() {
return (
<div className="min-h-screen bg-gray-50">
<DashboardHeader />
<main className="container mx-auto px-4 py-6">
<Suspense fallback={<StatsCardsSkeleton />}>
<StatsCards />
</Suspense>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
<Suspense fallback={<RevenueChartSkeleton />}>
<RevenueChart />
</Suspense>
<Suspense fallback={<RecentOrdersSkeleton />}>
<RecentOrders />
</Suspense>
</div>
<Suspense fallback={<ActivityFeedSkeleton />}>
<ActivityFeed />
</Suspense>
</main>
</div>
);
}
// app/components/StatsCards.tsx
async function StatsCards() {
const stats = await fetchDashboardStats();
return (
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<StatCard title="总收入" value={`¥${stats.revenue.toLocaleString()}`} change={stats.revenueChange} />
<StatCard title="订单数" value={stats.orders.toLocaleString()} change={stats.ordersChange} />
<StatCard title="用户数" value={stats.users.toLocaleString()} change={stats.usersChange} />
<StatCard title="转化率" value={`${stats.conversionRate}%`} change={stats.conversionChange} />
</div>
);
}
function StatCard({ title, value, change }: { title: string; value: string; change: number }) {
const isPositive = change >= 0;
return (
<div className="bg-white rounded-lg shadow-sm p-6">
<p className="text-sm text-gray-500">{title}</p>
<p className="text-2xl font-bold mt-1">{value}</p>
<p className={`text-sm mt-2 ${isPositive ? 'text-green-600' : 'text-red-600'}`}>
{isPositive ? '↑' : '↓'} {Math.abs(change)}%
</p>
</div>
);
}
// app/components/skeletons.tsx
export function StatsCardsSkeleton() {
return (
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
{Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="bg-white rounded-lg shadow-sm p-6 animate-pulse">
<div className="bg-gray-200 h-4 rounded w-1/2" />
<div className="bg-gray-200 h-8 rounded w-3/4 mt-3" />
<div className="bg-gray-200 h-4 rounded w-1/3 mt-3" />
</div>
))}
</div>
);
}
export function RevenueChartSkeleton() {
return (
<div className="bg-white rounded-lg shadow-sm p-6 animate-pulse">
<div className="bg-gray-200 h-6 rounded w-1/3" />
<div className="bg-gray-200 h-64 rounded mt-4" />
</div>
);
}
export function RecentOrdersSkeleton() {
return (
<div className="bg-white rounded-lg shadow-sm p-6 animate-pulse">
<div className="bg-gray-200 h-6 rounded w-1/3" />
{Array.from({ length: 5 }).map((_, i) => (
<div key={i} className="flex gap-4 mt-4">
<div className="bg-gray-200 h-4 rounded w-1/4" />
<div className="bg-gray-200 h-4 rounded w-1/4" />
<div className="bg-gray-200 h-4 rounded w-1/6" />
<div className="bg-gray-200 h-4 rounded w-1/6" />
</div>
))}
</div>
);
}
export function ActivityFeedSkeleton() {
return (
<div className="bg-white rounded-lg shadow-sm p-6 animate-pulse">
<div className="bg-gray-200 h-6 rounded w-1/4" />
{Array.from({ length: 8 }).map((_, i) => (
<div key={i} className="flex gap-3 mt-4">
<div className="bg-gray-200 h-10 w-10 rounded-full" />
<div className="flex-1">
<div className="bg-gray-200 h-4 rounded w-1/2" />
<div className="bg-gray-200 h-3 rounded w-3/4 mt-2" />
</div>
</div>
))}
</div>
);
}
模式2：流式HTML与loading.tsx降级
// app/products/loading.tsx
export default function ProductsLoading() {
return (
<div className="min-h-screen bg-gray-50">
<div className="container mx-auto px-4 py-8">
<div className="animate-pulse">
<div className="bg-gray-200 h-10 rounded w-1/4" />
<div className="bg-gray-200 h-6 rounded w-1/2 mt-4" />
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-8">
{Array.from({ length: 8 }).map((_, i) => (
<div key={i} className="bg-white rounded-lg shadow-sm overflow-hidden animate-pulse">
<div className="bg-gray-200 h-48" />
<div className="p-4">
<div className="bg-gray-200 h-5 rounded w-3/4" />
<div className="bg-gray-200 h-4 rounded w-1/2 mt-2" />
<div className="bg-gray-200 h-8 rounded w-1/3 mt-3" />
</div>
</div>
))}
</div>
</div>
</div>
);
}
// app/products/page.tsx
import { Suspense } from 'react';
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: '商品列表 - 我的商城',
description: '浏览我们的精选商品',
};
export default function ProductsPage() {
return (
<div className="min-h-screen bg-gray-50">
<div className="container mx-auto px-4 py-8">
<h1 className="text-3xl font-bold">商品列表</h1>
<p className="text-gray-600 mt-2">浏览我们的精选商品</p>
<div className="mt-8">
<Suspense fallback={<ProductGridSkeleton />}>
<ProductGrid />
</Suspense>
</div>
<div className="mt-12">
<Suspense fallback={<CategoryNavSkeleton />}>
<CategoryNav />
</Suspense>
</div>
</div>
</div>
);
}
// app/products/[id]/page.tsx
import { Suspense } from 'react';
import { notFound } from 'next/navigation';
interface ProductPageProps {
params: Promise<{ id: string }>;
}
export default async function ProductDetailPage({ params }: ProductPageProps) {
const { id } = await params;
const product = await getProduct(id);
if (!product) {
notFound();
}
return (
<div className="min-h-screen bg-white">
<div className="container mx-auto px-4 py-8">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
<ProductGallery images={product.images} />
<ProductInfo product={product} />
</div>
<div className="mt-12">
<Suspense fallback={<ReviewsSkeleton />}>
<ProductReviews productId={product.id} />
</Suspense>
</div>
<div className="mt-12">
<Suspense fallback={<RelatedProductsSkeleton />}>
<RelatedProducts category={product.category} excludeId={product.id} />
</Suspense>
</div>
</div>
</div>
);
}
模式3：渐进式水合与动态导入
// app/components/InteractiveMap.tsx
'use client';
import { useState, useEffect } from 'react';
interface MapProps {
center: { lat: number; lng: number };
markers: Array<{ lat: number; lng: number; label: string }>;
}
export function InteractiveMap({ center, markers }: MapProps) {
const [MapLib, setMapLib] = useState<React.ComponentType<MapProps> | null>(null);
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setIsVisible(true);
observer.disconnect();
}
},
{ rootMargin: '200px' }
);
const el = document.getElementById('map-container');
if (el) observer.observe(el);
return () => observer.disconnect();
}, []);
useEffect(() => {
if (!isVisible) return;
import('./MapRenderer').then((mod) => {
setMapLib(() => mod.MapRenderer);
});
}, [isVisible]);
if (!isVisible || !MapLib) {
return (
<div id="map-container" className="bg-gray-100 rounded-lg h-96 flex items-center justify-center">
<p className="text-gray-400">地图加载中...</p>
</div>
);
}
return <MapLib center={center} markers={markers} />;
}
// app/components/HeavyChart.tsx
import dynamic from 'next/dynamic';
const Chart = dynamic(() => import('./ChartRenderer'), {
loading: () => (
<div className="bg-gray-100 rounded-lg h-80 animate-pulse flex items-center justify-center">
<span className="text-gray-400">图表加载中...</span>
</div>
),
ssr: false,
});
export function HeavyChart({ data }: { data: ChartData[] }) {
return (
<div className="bg-white rounded-lg shadow-sm p-6">
<h3 className="text-lg font-semibold mb-4">数据分析</h3>
<Chart data={data} />
</div>
);
}
// app/components/CommentSection.tsx
import { Suspense } from 'react';
export function CommentSection({ postId }: { postId: string }) {
return (
<section className="mt-8">
<h2 className="text-2xl font-bold mb-4">评论区</h2>
<Suspense fallback={<CommentFormSkeleton />}>
<CommentForm postId={postId} />
</Suspense>
<Suspense fallback={<CommentListSkeleton />}>
<CommentList postId={postId} />
</Suspense>
</section>
);
}
// 客户端交互组件：延迟加载
'use client';
import { useState, useTransition } from 'react';
function CommentForm({ postId }: { postId: string }) {
const [content, setContent] = useState('');
const [isPending, startTransition] = useTransition();
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
startTransition(async () => {
await submitComment(postId, content);
setContent('');
});
};
return (
<form onSubmit={handleSubmit} className="mb-6">
<textarea
value={content}
onChange={(e) => setContent(e.target.value)}
className="w-full border rounded-lg p-3 focus:ring-2 focus:ring-blue-500"
rows={3}
placeholder="写下你的评论..."
/>
<button
type="submit"
disabled={isPending || !content.trim()}
className="mt-2 px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50"
>
{isPending ? '提交中...' : '发表评论'}
</button>
</form>
);
}
模式4：并行数据获取与Promise.all
// app/dashboard/page.tsx
import { Suspense } from 'react';
export default async function DashboardPage() {
return (
<div className="min-h-screen bg-gray-50 p-6">
<Suspense fallback={<OverviewSkeleton />}>
<DashboardOverview />
</Suspense>
</div>
);
}
async function DashboardOverview() {
const [users, orders, revenue] = await Promise.all([
fetchUsers(),
fetchOrders(),
fetchRevenue(),
]);
return (
<div>
<div className="grid grid-cols-3 gap-6">
<UserStats users={users} />
<OrderStats orders={orders} />
<RevenueStats revenue={revenue} />
</div>
<div className="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
<Suspense fallback={<ChartSkeleton />}>
<TrendChart data={revenue} />
</Suspense>
<Suspense fallback={<TableSkeleton />}>
<RecentActivity orders={orders} />
</Suspense>
</div>
</div>
);
}
// lib/data-fetching.ts
import { cache } from 'react';
interface FetchOptions {
revalidate?: number;
tags?: string[];
}
function createFetchOptions(options?: FetchOptions): RequestInit {
return {
next: {
revalidate: options?.revalidate ?? 60,
tags: options?.tags ?? [],
},
};
}
export const fetchUsers = cache(async () => {
const res = await fetch('https://api.example.com/users', createFetchOptions({
revalidate: 300,
tags: ['users'],
}));
if (!res.ok) throw new Error('Failed to fetch users');
return res.json() as Promise<User[]>;
});
export const fetchOrders = cache(async () => {
const res = await fetch('https://api.example.com/orders', createFetchOptions({
revalidate: 60,
tags: ['orders'],
}));
if (!res.ok) throw new Error('Failed to fetch orders');
return res.json() as Promise<Order[]>;
});
export const fetchRevenue = cache(async () => {
const res = await fetch('https://api.example.com/revenue', createFetchOptions({
revalidate: 300,
tags: ['revenue'],
}));
if (!res.ok) throw new Error('Failed to fetch revenue');
return res.json() as Promise<RevenueData[]>;
});
export const fetchProduct = cache(async (id: string) => {
const res = await fetch(`https://api.example.com/products/${id}`, createFetchOptions({
revalidate: 600,
tags: [`product-${id}`],
}));
if (!res.ok) return null;
return res.json() as Promise<Product>;
});
export const fetchDashboardStats = cache(async () => {
const res = await fetch('https://api.example.com/dashboard/stats', createFetchOptions({
revalidate: 30,
tags: ['dashboard', 'stats'],
}));
if (!res.ok) throw new Error('Failed to fetch dashboard stats');
return res.json() as Promise<DashboardStats>;
});
// app/products/page.tsx — 并行获取 + Suspense分离
import { Suspense } from 'react';
export default function ProductsPage() {
return (
<div>
<Suspense fallback={<FeaturedProductsSkeleton />}>
<FeaturedProducts />
</Suspense>
<Suspense fallback={<NewArrivalsSkeleton />}>
<NewArrivals />
</Suspense>
<Suspense fallback={<SaleProductsSkeleton />}>
<SaleProducts />
</Suspense>
</div>
);
}
async function FeaturedProducts() {
const products = await fetch('https://api.example.com/products/featured', {
next: { revalidate: 600, tags: ['featured'] },
}).then(r => r.json());
return <ProductGrid products={products} />;
}
async function NewArrivals() {
const products = await fetch('https://api.example.com/products/new', {
next: { revalidate: 300, tags: ['new-arrivals'] },
}).then(r => r.json());
return <ProductGrid products={products} />;
}
async function SaleProducts() {
const products = await fetch('https://api.example.com/products/sale', {
next: { revalidate: 60, tags: ['sale'] },
}).then(r => r.json());
return <ProductGrid products={products} />;
}
模式5：生产级Streaming SSR与错误边界
// app/components/ErrorBoundary.tsx
'use client';
import { Component, type ReactNode } from 'react';
interface ErrorBoundaryProps {
fallback?: ReactNode;
children: ReactNode;
}
interface ErrorBoundaryState {
hasError: boolean;
error: Error | null;
}
export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
constructor(props: ErrorBoundaryProps) {
super(props);
this.state = { hasError: false, error: null };
}
static getDerivedStateFromError(error: Error): ErrorBoundaryState {
return { hasError: true, error };
}
render() {
if (this.state.hasError) {
return this.props.fallback || (
<div className="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
<h3 className="text-red-800 font-semibold">加载失败</h3>
<p className="text-red-600 text-sm mt-2">{this.state.error?.message}</p>
<button
onClick={() => this.setState({ hasError: false, error: null })}
className="mt-4 px-4 py-2 bg-red-600 text-white rounded-lg text-sm"
>
重试
</button>
</div>
);
}
return this.props.children;
}
}
// app/error.tsx — 路由级错误边界
'use client';
import { useEffect } from 'react';
export default function Error({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
useEffect(() => {
console.error('[Streaming SSR Error]', error.digest, error.message);
}, [error]);
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="text-center">
<h2 className="text-2xl font-bold text-gray-800">页面加载出错</h2>
<p className="text-gray-600 mt-2">错误代码：{error.digest || 'UNKNOWN'}</p>
<button
onClick={reset}
className="mt-6 px-6 py-3 bg-blue-600 text-white rounded-lg"
>
重新加载
</button>
</div>
</div>
);
}
// app/page.tsx — 生产级组合
import { Suspense } from 'react';
import { ErrorBoundary } from './components/ErrorBoundary';
export default function HomePage() {
return (
<div className="min-h-screen">
<Header />
<main>
<HeroSection />
<ErrorBoundary fallback={<ProductGridFallback />}>
<Suspense fallback={<ProductGridSkeleton />}>
<ProductGrid />
</Suspense>
</ErrorBoundary>
<ErrorBoundary fallback={<RecommendationsFallback />}>
<Suspense fallback={<RecommendationsSkeleton />}>
<Recommendations />
</Suspense>
</ErrorBoundary>
<ErrorBoundary fallback={<NewsletterFallback />}>
<Suspense fallback={<NewsletterSkeleton />}>
<Newsletter />
</Suspense>
</ErrorBoundary>
</main>
<Footer />
</div>
);
}
// app/components/fallbacks.tsx
export function ProductGridFallback() {
return (
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-6 text-center">
<p className="text-yellow-700">商品数据暂时无法加载，请稍后再试</p>
<a href="/products" className="text-blue-600 underline mt-2 inline-block">
浏览全部商品
</a>
</div>
);
}
export function RecommendationsFallback() {
return (
<div className="text-center py-8 text-gray-500">
<p>个性化推荐暂时不可用</p>
</div>
);
}
export function NewsletterFallback() {
return (
<div className="text-center py-4 text-gray-400">
<p>订阅功能暂时不可用</p>
</div>
);
}
避坑指南
坑1：Suspense边界粒度过细
// ❌ 错误：每个小组件单独Suspense，导致多次网络往返
<Suspense fallback={<Skeleton />}><UserName /></Suspense>
<Suspense fallback={<Skeleton />}><UserEmail /></Suspense>
<Suspense fallback={<Skeleton />}><UserAvatar /></Suspense>
<Suspense fallback={<Skeleton />}><UserBio /></Suspense>
// 4次流式往返，TTFB反而更差
// ✅ 正确：相关组件共享Suspense边界
<Suspense fallback={<UserProfileSkeleton />}>
<UserProfile /> {/* 内部包含UserName, UserEmail, UserAvatar, UserBio */}
</Suspense>
坑2：async组件未正确处理错误
// ❌ 错误：async Server Component没有错误处理
async function ProductList() {
const products = await fetchProducts(); // 如果fetch失败，整页500
return <div>{products.map(p => <Card key={p.id} />)}</div>;
}
// ✅ 正确：配合ErrorBoundary + Suspense使用
<ErrorBoundary fallback={<ProductListFallback />}>
<Suspense fallback={<ProductListSkeleton />}>
<ProductList />
</Suspense>
</ErrorBoundary>
// ✅ 更优：组件内部try-catch
async function ProductList() {
try {
const products = await fetchProducts();
return <div>{products.map(p => <Card key={p.id} />)}</div>;
} catch (error) {
console.error('ProductList fetch failed:', error);
return <ProductListFallback />;
}
}
坑3：loading.tsx与Suspense同时使用导致双重骨架屏
// ❌ 错误：loading.tsx和Suspense fallback同时生效
// app/products/loading.tsx — 路由切换时显示
export default function Loading() {
return <FullPageSkeleton />;
}
// app/products/page.tsx — 页面内部也有Suspense
export default function ProductsPage() {
return (
<Suspense fallback={<ProductGridSkeleton />}>
<ProductGrid />
</Suspense>
);
}
// 用户看到：FullPageSkeleton → ProductGridSkeleton → 真实内容（两次闪烁）
// ✅ 正确：loading.tsx只处理路由级，页面内部用Suspense
// 删除loading.tsx，在layout.tsx中使用Suspense
export default function ProductsLayout({ children }: { children: React.ReactNode }) {
return (
<div>
<ProductsNav />
<Suspense fallback={<ProductsPageSkeleton />}>
{children}
</Suspense>
</div>
);
}
坑4：动态导入未设置ssr: false导致水合错误
// ❌ 错误：依赖浏览器API的组件未禁用SSR
import dynamic from 'next/dynamic';
const Map = dynamic(() => import('./Map'), {
loading: () => <div>加载中...</div>,
// 缺少 ssr: false！Map内部用了window/document，SSR会报错
});
// ✅ 正确：浏览器专属组件禁用SSR
const Map = dynamic(() => import('./Map'), {
loading: () => <MapSkeleton />,
ssr: false,
});
坑5：Promise.all中一个失败导致全部失败
// ❌ 错误：Promise.all任一失败则全部失败
const [users, orders, revenue] = await Promise.all([
fetchUsers(), // 如果这个失败，orders和revenue也拿不到
fetchOrders(),
fetchRevenue(),
]);
// ✅ 正确：使用Promise.allSettled + Suspense分离
const results = await Promise.allSettled([
fetchUsers(),
fetchOrders(),
fetchRevenue(),
]);
const users = results[0].status === 'fulfilled' ? results[0].value : [];
const orders = results[1].status === 'fulfilled' ? results[1].value : [];
const revenue = results[2].status === 'fulfilled' ? results[2].value : [];
// ✅ 更优：每个数据源独立Suspense边界，完全隔离
<Suspense fallback={<UsersSkeleton />}>
<UsersSection />
</Suspense>
<Suspense fallback={<OrdersSkeleton />}>
<OrdersSection />
</Suspense>
<Suspense fallback={<RevenueSkeleton />}>
<RevenueSection />
</Suspense>
报错排查
| 序号 | 报错信息 | 原因 | 解决方法 |
|---|---|---|---|
| 1 | Hydration failed because the server rendered HTML didn't match |
服务端与客户端渲染内容不一致 | 检查Date/Random/浏览器API，使用suppressHydrationWarning |
| 2 | Functions cannot be passed directly to Client Components |
Server Component向Client Component传递了函数 | 将逻辑移入Client Component或通过Server Action传递 |
| 3 | Route "/xxx" used cookies() but is statically generated |
静态页面中调用了动态API | 添加export const dynamic = 'force-dynamic' |
| 4 | useSearchParams() should be wrapped in Suspense |
useSearchParams未包裹Suspense | 在外层添加Suspense boundary |
| 5 | Maximum call stack size exceeded |
Suspense嵌套导致无限循环 | 检查async组件是否在Suspense fallback中递归引用 |
| 6 | Text content did not match |
流式HTML与水合内容不匹配 | 确保Suspense fallback与实际内容结构一致 |
| 7 | Cannot read properties of null (reading 'useContext') |
客户端Hook在Server Component中使用 | 添加'use client'指令或拆分组件 |
| 8 | Module not found: Can't resolve 'fs' |
客户端组件引用了Node.js模块 | 将Node.js逻辑移到Server Component或Route Handler |
| 9 | Streaming chunk error: invalid byte sequence |
流式传输中编码问题 | 确保API返回UTF-8编码，检查中间代理配置 |
| 10 | Abort signal timeout |
数据获取超时 | 增加超时时间或使用React.cache避免重复请求 |
进阶优化
1. Partial Prerendering（PPR）实现静态壳+动态内容
// next.config.ts
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
experimental: {
ppr: 'incremental',
},
};
export default nextConfig;
// app/page.tsx — PPR模式
import { Suspense } from 'react';
export const experimental_ppr = true;
export default function HomePage() {
return (
<div className="min-h-screen">
{/* 静态壳 —— 构建时渲染，CDN缓存，TTFB ≈ 0 */}
<Header />
<HeroBanner />
<StaticCategories />
{/* 动态内容 —— 请求时流式渲染 */}
<Suspense fallback={<PersonalizedFeedSkeleton />}>
<PersonalizedFeed />
</Suspense>
{/* 静态内容 —— 构建时渲染 */}
<Footer />
</div>
);
}
async function PersonalizedFeed() {
const user = await getCurrentUser();
const feed = await fetchPersonalizedFeed(user.id);
return <FeedGrid items={feed} />;
}
2. React Cache与请求去重
// lib/cached-fetch.ts
import { cache } from 'react';
export const getProduct = cache(async (id: string): Promise<Product | null> => {
const res = await fetch(`https://api.example.com/products/${id}`, {
next: { revalidate: 600, tags: [`product-${id}`] },
});
if (!res.ok) return null;
return res.json();
});
// 多个组件调用getProduct('123')，只发一次请求
async function ProductHeader({ id }: { id: string }) {
const product = await getProduct(id);
if (!product) return null;
return <h1 className="text-2xl font-bold">{product.name}</h1>;
}
async function ProductPrice({ id }: { id: string }) {
const product = await getProduct(id);
if (!product) return null;
return <span className="text-lg text-red-600">¥{product.price}</span>;
}
async function ProductStock({ id }: { id: string }) {
const product = await getProduct(id);
if (!product) return null;
return <span className={product.inStock ? 'text-green-600' : 'text-red-600'}>
{product.inStock ? '有货' : '缺货'}
</span>;
}
3. 流式传输性能监控
// app/components/StreamingReporter.tsx
'use client';
import { useEffect } from 'react';
interface StreamingMetrics {
ttfb: number;
firstChunk: number;
lastChunk: number;
totalChunks: number;
}
export function StreamingReporter() {
useEffect(() => {
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.entryType === 'navigation') {
const nav = entry as PerformanceNavigationTiming;
const metrics: StreamingMetrics = {
ttfb: nav.responseStart - nav.requestStart,
firstChunk: nav.responseStart - nav.fetchStart,
lastChunk: nav.responseEnd - nav.fetchStart,
totalChunks: Math.round(nav.transferSize / 16384),
};
if (metrics.ttfb > 1000) {
console.warn('[Streaming SSR] TTFB慢:', metrics);
}
if (typeof window !== 'undefined' && window.gtag) {
window.gtag('event', 'streaming_ssr_metrics', {
ttfb: metrics.ttfb,
first_chunk: metrics.firstChunk,
last_chunk: metrics.lastChunk,
});
}
}
}
});
observer.observe({ entryTypes: ['navigation'] });
return () => observer.disconnect();
}, []);
return null;
}
对比分析
| 维度 | 传统SSR | Streaming SSR | ISR | CSR | SSG |
|---|---|---|---|---|---|
| TTFB | ⚠️高（等最慢数据） | ✅低（先发静态壳） | ✅极低（CDN） | ⚠️中（空HTML） | ✅极低（CDN） |
| 首屏渲染 | ⚠️一次性 | ✅渐进式 | ✅即时 | ❌慢（等JS） | ✅即时 |
| 实时数据 | ✅支持 | ✅支持 | ⚠️延迟 | ✅支持 | ❌不支持 |
| SEO | ✅完整HTML | ✅完整HTML | ✅完整HTML | ❌空HTML | ✅完整HTML |
| 服务器负载 | ⚠️高 | ⚠️中 | ✅低 | ✅极低 | ✅极低 |
| 错误隔离 | ❌整页失败 | ✅分块降级 | ❌整页失败 | ✅组件级 | ❌构建失败 |
| 缓存粒度 | ⚠️整页 | ✅分块 | ✅整页 | ⚠️API级 | ✅整页 |
| 适用场景 | 实时动态页 | 复杂混合页 | 内容站 | 后台管理 | 静态内容站 |
总结：Streaming SSR不是简单的技术升级，而是渲染范式的转变——从"等所有数据就绪再响应"到"先给用户能看到的内容"。2026年的生产实践路径：先用Suspense边界拆分关键内容块（TTFB降低60%+）→再用loading.tsx实现路由级降级→然后通过动态导入实现渐进式水合（INP改善40%+）→接着用Promise.all+独立Suspense实现并行获取→最后用ErrorBoundary实现生产级容错。核心原则：能流式就不阻塞，能并行就不串行，能降级就不500。
在线工具推荐
- JSON格式化：/zh-CN/json/format
- Base64编解码：/zh-CN/encode/base64
- Hash计算：/zh-CN/encode/hash
本站提供浏览器本地工具，免注册即可试用 →
#Next.js#Streaming SSR#React#Suspense#性能优化#2026#App Router