Streaming

## 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 | Concept | Meaning | |---|---| | Stream | Server response sent in chunks. | | Suspense boundary | React boundary that can show fallback UI while children load. | | `loading.tsx` | Route-segment loading UI automatically wrapped in Suspense. | | Shell | Fast outer UI sent before slow content finishes. | | Perceived performance | How 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 | Mistake | Why It Happens | Correct Approach | |---|---|---| | One Suspense boundary around the whole page | It is easy to wrap everything once. | Put boundaries around independently slow sections. | | Empty loading UI | Fallbacks are treated as afterthoughts. | Use skeletons or meaningful pending states. | | Streaming private data without auth checks | Rendering 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 | Feature | Browser Impact | Notes | |---|---|---| | Streamed HTML | Supported by modern browsers and platform runtime | Framework handles response details. | | Suspense fallback | React behavior | Works with server rendering in Next.js. | | Client hydration | Requires JavaScript for interactivity | Content 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 | Need | Tool | |---|---| | Segment loading state | `loading.tsx` | | Slow widget fallback | `` | | Fast page shell | Keep outside slow boundary | | Independent slow sections | Separate boundaries | | Better perceived speed | Streaming | ## 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.