streaming & advanced

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Layout with uncached data blocks navigation

A layout that accesses uncached or runtime data (such as cookies(), headers(), or uncached fetches) does not fall back to a same route segment loading.js. Instead, it blocks navigation until the layout finishes rendering.

Bots and crawlers receive fully rendered page

Bots and crawlers are served differently from browsers. Next.js waits for data fetching to finish and sends the fully rendered page instead of streaming it progressively.

Streaming breaks page into chunks for progressive delivery

Streaming allows you to break a page into smaller chunks and progressively send those chunks from the server to the client. This improves initial load time and user experience by avoiding blocking the entire route rendering while waiting for slow data requests.

Two ways to implement streaming in Next.js

There are two ways to use streaming: 1) Wrapping a page with a 'loading.js' file, 2) Wrapping a component with <Suspense>.

Fix layout blocking navigation with uncached data

To fix a layout that blocks navigation due to uncached data access, wrap the uncached access in its own <Suspense> boundary with a fallback, or move the data fetching into page.js where loading.js can cover it. Using <Suspense> closer to the runtime or uncached data access is recommended over loading.js.

Suspense for granular streaming control

<Suspense> allows granular control over what parts of the page to stream. You can immediately show page content that falls outside of the <Suspense> boundary, and stream in content inside the boundary.

Suspense with fallback example

import { Suspense } from 'react'; import BlogList from '@/components/BlogList'; import BlogListSkeleton from '@/components/BlogListSkeleton'; export default function BlogPage() { return <div><header><h1>Welcome to the Blog</h1><p>Read the latest posts below.</p></header><main><Suspense fallback={<BlogListSkeleton />}><BlogList /></Suspense></main></div> }

Creating meaningful loading states

An instant loading state is fallback UI shown immediately after navigation. For best user experience, design loading states that are meaningful and help users understand the app is responding. Examples include skeletons, spinners, or small but meaningful parts of future screens such as a cover photo or title.

Give your agent this brain