Next.js streaming

Streaming is the process of Next.js sending parts of a dynamic route to the client as soon as they’re ready, instead of waiting for the entire route to be rendered and ready before sending it back. This means users can see something sooner.

For dynamic routes, this means they can be partially pre-fetched. Shared layouts and loading skeletons can be requested ahead of time.

To enable streaming for a dynamic route, add a loading.tsx file in your route folder:

// app/dashboard/loading.tsx
export default function Loading() {
  // Add fallback UI that will be shown while the route is loading.
  return <LoadingSkeleton />
}

When app/dashboard is linked to in a <Link> tag, Next.js will wrap the page.tsx contents inside a <Suspense> boundary and prefetch it so that the loading.tsx contents are immediately visible on route navigation instead of the user having to wait for the entire dynamic route to be rendered.