การสตรีมส่วนติดต่อผู้ใช้ด้วย Suspense และสถานะการโหลด

If a page waits for every data fetch before rendering, users stare at a blank screen. Streaming lets the server send ready parts of the page immediately and fill in slow parts as they finish.

Next.js with the App Router can stream HTML in chunks. The shell and fast components arrive first; slow data-dependent sections stream in when ready, improving Time to First Byte and perceived speed.

Suspense wraps a component that may not be ready and shows a fallback until it is. The rest of the page renders without waiting.

In the App Router, a Server Component can be async and await data. Wrapping it in Suspense lets the page stream while that fetch resolves.

Render the page shell instantly and stream the slow part. Users interact with the rest while reviews load.

A loading.tsx file beside a route automatically wraps that route's page in Suspense. Its export is shown instantly while the page's data loads.

A skeleton mimics the final layout with gray placeholders, reducing layout shift and signaling that content is coming.

Avoid sequential awaits that create waterfalls. Multiple Suspense boundaries let independent sections fetch in parallel and stream as each completes.

Place Suspense around the smallest slow unit, not the whole page. Finer boundaries mean more of the UI is interactive sooner.

Streaming shines for personalized or slow data. For content that rarely changes, static generation or caching is still faster. Combine both: cache what you can, stream the rest.

Stream effectively:

• Wrap slow async Server Components in Suspense
• Use loading.tsx for route-level fallbacks
• Show skeletons to cut layout shift
• Use parallel boundaries to avoid waterfalls

You learned to stream UI:

• Streaming SSR sends ready HTML first and fills slow parts later
• Wrap async components in Suspense with a fallback
• Use loading.tsx for automatic route fallbacks
• Show skeletons and use parallel boundaries

Your pages now feel fast even with slow data.