ReviseAlgo Logo

Rendering

Streaming

Learn streaming rendering in Next.js, how Suspense and loading UI improve perceived performance, and when to split slow sections.

1. Learning Objectives

By the end of this lesson, you will be able to:

  • Explain how streaming improves perceived performance.
  • Use loading.tsx for route-level pending UI.
  • Use React Suspense to split slow page sections.
  • Decide when streaming is better than blocking the whole route.

    • Difficulty: Intermediate.

    2. Prerequisites

  • SSR basics.
  • App Router special files.
  • React Suspense basics.

    • 3. Overview

    Streaming lets the server send route UI in chunks as soon as each part is ready. Instead of waiting for all data before sending anything, Next.js can show a shell and loading states while slower sections continue rendering.

    4. Why This Topic Matters

    Real pages often mix fast and slow data. Streaming prevents one slow widget from delaying the entire page, improving perceived speed and making server-rendered applications feel more responsive.

    5. Real-World Analogy

    Streaming is like a restaurant bringing drinks and appetizers before the main course. You do not wait in silence for everything to be ready at once.

    6. Core Concepts

    ConceptMeaning
    StreamServer response sent in chunks.
    Suspense boundaryReact boundary that can show fallback UI while children load.
    loading.tsxRoute-segment loading UI automatically wrapped in Suspense.
    ShellFast outer UI sent before slow content finishes.
    Perceived performanceHow fast the experience feels to users.

    7. Syntax & API Reference

    Route-level loading:

    Component-level streaming:

    8. Visual Diagram

    9. Live Example - Full Working Code

    What just happened? The dashboard shell can appear first, and the revenue chart streams in when its data is ready.

    10. Interactive Playground

    Try this:

  • Add an artificial delay to a Server Component.
  • Wrap it in Suspense with a skeleton fallback.
  • Move the boundary higher and lower to compare UX.

    • 11. Common Mistakes

    MistakeWhy It HappensCorrect Approach
    One Suspense boundary around the whole pageIt is easy to wrap everything once.Put boundaries around independently slow sections.
    Empty loading UIFallbacks are treated as afterthoughts.Use skeletons or meaningful pending states.
    Streaming private data without auth checksRendering still happens on the server.Validate authorization before fetching sensitive sections.

    12. Best Practices

  • Put Suspense boundaries around slow, independent sections.
  • Keep the route shell fast.
  • Use loading.tsx for segment-level loading.
  • Use skeletons that preserve layout size.
  • Avoid hiding critical page context behind a slow boundary.

    • 13. Browser Compatibility

    FeatureBrowser ImpactNotes
    Streamed HTMLSupported by modern browsers and platform runtimeFramework handles response details.
    Suspense fallbackReact behaviorWorks with server rendering in Next.js.
    Client hydrationRequires JavaScript for interactivityContent can appear before all JS is ready.

    14. Interview Questions

    Easy: What problem does streaming solve?

    Answer: It prevents slow data from blocking the entire server-rendered page response.

    Medium: What does loading.tsx do?

    Answer: It defines route-segment loading UI that Next.js can show while the segment is pending.

    Hard: Where should Suspense boundaries go?

    Answer: Around slow, independent sections where showing a fallback improves the experience without hiding critical context.

    15. Debugging Exercise

    Bug report: "The whole dashboard is blank until the slow analytics chart loads."

    Solution

    Move the analytics chart into its own async component and wrap it with Suspense. Keep the page title, navigation, and fast summary outside the boundary.

    16. Practice Exercises

  • Easy: Add loading.tsx to a route segment.
  • Medium: Wrap a delayed Server Component in Suspense.
  • Hard: Split a dashboard into three streamed sections with independent fallbacks.

    • 17. Scenario-Based Challenge

    A dashboard has fast account stats, a slow revenue chart, and a slow audit log. How should streaming be used?

    Walkthrough

    Render the account stats in the initial shell. Wrap the revenue chart and audit log in separate Suspense boundaries so each can stream in independently.

    18. Quick Quiz

    1. What React feature powers component-level streaming UI? Answer: Suspense. 2. What file defines route loading UI? Answer: loading.tsx. 3. Should slow independent widgets block the page shell? Answer: No. 4. What should fallbacks preserve? Answer: Useful context and layout stability. 5. Does streaming remove the need for auth checks? Answer: No.

    19. Summary & Key Takeaways

  • Streaming sends UI in chunks as it becomes ready.
  • loading.tsx handles segment-level pending UI.
  • Suspense handles component-level pending UI.
  • Streaming improves perceived performance for slow server sections.
  • Boundaries should be placed around independent slow work.

    • 20. Cheat Sheet

    NeedTool
    Segment loading stateloading.tsx
    Slow widget fallback
    Fast page shellKeep outside slow boundary
    Independent slow sectionsSeparate boundaries
    Better perceived speedStreaming

    21. Further Reading

  • Next.js Docs: Loading UI and Streaming.
  • React Docs: Suspense.
  • Next.js Docs: Server Components.

    • 22. Next Lesson Preview

    Chapter 2 is complete. Next, you will study Server Components and Client Components in more depth.