EdgeOne Pages Next.js Starter - Streaming
Gradually render page content to improve user experience and perceived performance.
Suitable for data-intensive pages and complex content, advantages are faster first screen display and progressive content loading, supporting large pages and complex dashboards.
🚀 True streaming rendering: Page content loads progressively, fast components display immediately, slow components load one by one!
Streaming: Streaming Rendering Demo
Fast Component (Load instantly)
Load Time: 2025-09-09T19:34:01.255Z
Fast Data: 35
Status: Loaded instantly!
Loading slow component 1 (5s)...
Loading...
Loading slow component 2 (8s)...
Loading...
Streaming Rendering Features
• Progressive Loading: Page content displays progressively by component
• Faster First Screen: Fast components display immediately without waiting for slow components
• Better User Experience: Users can see partial content immediately
• Parallel Processing: Multiple async components can load in parallel
Refresh the page to see the true streaming rendering effect - content appears progressively!
// app/streaming/page.tsx
// Force dynamic rendering - disable static optimization
export const dynamic = 'force-dynamic'
export const revalidate = 0
import { Suspense } from 'react'
export default function StreamingPage() {
return (
<div>
<h1>Streaming Rendering Demo</h1>
{/* Fast component displays immediately */}
<FastComponent />
{/* Slow components use Suspense for streaming loading */}
<Suspense fallback={<LoadingSpinner message="Loading component 1..." />}>
<SlowDataComponent />
</Suspense>
<Suspense fallback={<LoadingSpinner message="Loading component 2..." />}>
<AnotherSlowComponent />
</Suspense>
</div>
)
}
// Async server component
async function SlowDataComponent() {
// Simulate data fetching delay
await new Promise(resolve => setTimeout(resolve, 2000))
const data = await fetch('https://api.example.com/slow-data')
return <div>Streaming data: {data.value}</div>
}