Learn Next.js: Streaming | Next.js
In the previous chapter, you made your dashboard page dynamic, however, we discussed how the slow data fetches can impact the performance of your application. Let's look at how you can improve account for slow data requests. In this chapter... Here are the topics we’ll cover What streaming is and when you might use it. How to implement streaming with loading.js and Suspense. What loading skeletons are. What route groups are, and when you might use them. Where to place Suspense boundaries in your appplication. Streaming is a data transfer technique that allows you to break down a route into smaller “chunks” and progressively stream them from the server to the client as they become ready. By streaming, you can prevent slow data requests from blocking your whole page. This allows the user to see and interact with parts of the page without waiting for all the data to load before any UI can be shown to the user. With streaming, data fetching and rendering for each chunk is also initiated in
9 Chapter 9 Streaming In the previous chapter, you learned about the different rendering methods of Next.js. We also discussed how slow data fetches can impact the performance of your application. Let's look at how you can improve the user experience when there are slow data requests. In this chapter... Here are the topics we'll cover What streaming is and when you might use it. How to implement streaming with loading.tsx and Suspense. What loading skeletons are. What Next.js Route Groups are, and when you might use them. Where to place React Suspense boundaries in your application. What is st
Explore this link on the map →saved by
related reading
- File-system conventions: loading.js | Next.jsnextjs.org
- Getting Started: Fetching Data | Next.jsnextjs.org
- Getting Started: Fetching Data | Next.jsnextjs.org
- Getting Started: Caching | Next.jsnextjs.org
- Cursor Docs — Agent, Rules, MCP, Skills & CLIdocs.cursor.com
- Getting Started: Fetching Data | Next.jsnextjs.org
- Getting Started: Fetching Data | Next.jsnextjs.org
- Building a single-page application with Next.js and React Routercolinhacks.com
- App Router: Fetching Data | Next.jsnextjs.org
- Town | The AI Assistant That Does the Worktown.com
- App Router: Navigating Between Pages | Next.jsnextjs.org
- How to fetch data in React [2024] - Robin Wieruchrobinwieruch.de