0% found this document useful (0 votes)

39 views

Routing - Loading UI and Streaming - Next - Js

The document discusses loading UI and streaming in Next.js routing. It explains how loading.js files can be used to create meaningful loading states for routes. It also describes how Suspense boundaries allow components to stream in progressively through server-side rendering. Finally, it provides an example of how to wrap components in Suspense for streaming and selective hydration.

Uploaded by

Brubaker Brubake

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

39 views

Routing - Loading UI and Streaming - Next - Js

Uploaded by

Brubaker Brubake

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 8

28/2/24, 11:31 Routing: Loading UI and Streaming | Next.

App Router ... Routing Loading UI and Streaming

Loading UI and Streaming

The special file loading.js helps you create meaningful Loading UI with React Suspense

. With this convention, you can show an instant loading state from the server while the

content of a route segment loads. The new content is automatically swapped in once

rendering is complete.

Instant Loading States

An instant loading state is fallback UI that is shown immediately upon navigation. You can

pre-render loading indicators such as skeletons and spinners, or a small but meaningful

part of future screens such as a cover photo, title, etc. This helps users understand the app

is responding and provides a better user experience.

Create a loading state by adding a loading.js file inside a folder.

https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming 1/8
28/2/24, 11:31 Routing: Loading UI and Streaming | Next.js

app/dashboard/loading.tsx TypeScript

1 export default function Loading() {

2 // You can add any UI inside Loading, including a Skeleton.
3 return <LoadingSkeleton />
4 }

In the same folder, loading.js will be nested inside layout.js . It will automatically wrap

the page.js file and any children below in a <Suspense> boundary.

Good to know:

- Navigation is immediate, even with server-centric routing.

- Navigation is interruptible, meaning changing routes does not need to wait for the content of the
route to fully load before navigating to another route.

https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming 2/8
28/2/24, 11:31 Routing: Loading UI and Streaming | Next.js

- Shared layouts remain interactive while new route segments load.

Recommendation: Use the loading.js convention for route segments (layouts and pages) as
Next.js optimizes this functionality.

Streaming with Suspense

In addition to loading.js , you can also manually create Suspense Boundaries for your

own UI components. The App Router supports streaming with Suspense for both Node.js

and Edge runtimes.

What is Streaming?

To learn how Streaming works in React and Next.js, it's helpful to understand Server-Side

Rendering (SSR) and its limitations.

With SSR, there's a series of steps that need to be completed before a user can see and

interact with a page:

1. First, all data for a given page is fetched on the server.

2. The server then renders the HTML for the page.

3. The HTML, CSS, and JavaScript for the page are sent to the client.

4. A non-interactive user interface is shown using the generated HTML, and CSS.

5. Finally, React hydrates the user interface to make it interactive.

https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming 3/8
28/2/24, 11:31 Routing: Loading UI and Streaming | Next.js

These steps are sequential and blocking, meaning the server can only render the HTML for

a page once all the data has been fetched. And, on the client, React can only hydrate the UI

once the code for all components in the page has been downloaded.

SSR with React and Next.js helps improve the perceived loading performance by showing a

non-interactive page to the user as soon as possible.

However, it can still be slow as all data fetching on server needs to be completed before the

page can be shown to the user.

Streaming allows you to break down the page's HTML into smaller chunks and

progressively send those chunks from the server to the client.

https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming 4/8
28/2/24, 11:31 Routing: Loading UI and Streaming | Next.js

This enables parts of the page to be displayed sooner, without waiting for all the data to

load before any UI can be rendered.

Streaming works well with React's component model because each component can be

considered a chunk. Components that have higher priority (e.g. product information) or that

don't rely on data can be sent first (e.g. layout), and React can start hydration earlier.

Components that have lower priority (e.g. reviews, related products) can be sent in the same

server request after their data has been fetched.

Streaming is particularly beneficial when you want to prevent long data requests from

blocking the page from rendering as it can reduce the Time To First Byte (TTFB) and First

https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming 5/8
28/2/24, 11:31 Routing: Loading UI and Streaming | Next.js

Contentful Paint (FCP) . It also helps improve Time to Interactive (TTI) , especially on

slower devices.

Example

<Suspense> works by wrapping a component that performs an asynchronous action (e.g.

fetch data), showing fallback UI (e.g. skeleton, spinner) while it's happening, and then

swapping in your component once the action completes.

app/dashboard/page.tsx TypeScript

1 import { Suspense } from 'react'

2 import { PostFeed, Weather } from './Components'
3
4 export default function Posts() {
5 return (
6 <section>
7 <Suspense fallback={<p>Loading feed...</p>}>
8 <PostFeed />
9 </Suspense>
10 <Suspense fallback={<p>Loading weather...</p>}>
11 <Weather />
12 </Suspense>
13 </section>
14 )
15 }