streaming & performance

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

Streaming uncached data with Suspense

For components that fetch data from asynchronous sources and require fresh data on every request, do not use `use cache`. Instead, wrap the component in `<Suspense>` and provide a fallback UI. The fallback ships with the prerendered shell while the async work runs at request time.

Streaming uncached data example

Example showing Suspense with uncached async data: `import { Suspense } from 'react'; async function LatestPosts() { const data = await fetch('https://api.example.com/posts'); const posts = await data.json(); return (<ul>{posts.map((post) => (<li key={post.id}>{post.title}</li>))}</ul>); } export default function Page() { return (<><h1>My Blog</h1><Suspense fallback={<p>Loading posts...</p>}><LatestPosts /></Suspense></>); }`

Suspense does not opt component into dynamic rendering by itself

`<Suspense>` provides a fallback UI while async work completes, but it does not itself opt a component into dynamic rendering. If a component only performs synchronous work, it will complete during prerendering regardless of whether it is wrapped in `<Suspense>`.

Static, cached, and streaming content together

A single page can have: static content (prerendered automatically), cached dynamic content (included in static shell with use cache), and runtime dynamic content (streams at request time behind Suspense). During prerendering, the header (static) and cached blog posts become part of the static shell with fallback UI for runtime content. Reading cookies doesn't opt the whole route into dynamic rendering.

Generate unique values per request with connection()

To generate unique values per request, call `connection()` before random operations and wrap the component in `<Suspense>`. Example: `async function UniqueContent() { await connection(); const uuid = crypto.randomUUID(); return <p>Request ID: {uuid}</p>; }`

Partial Prerendering (PPR) default behavior

Partial Prerendering is the default behavior with Cache Components. It generates a static shell consisting of HTML for initial page loads and a serialized RSC Payload for client-side navigation, ensuring the browser receives fully rendered content instantly whether users navigate directly to the URL or transition from another page.

Static shell serving from CDN

Every produced static shell can be served directly from a CDN without going through the upstream server, making direct navigations instant.

Maximizing the static shell depth principle

The deeper async work sits in the tree, the more of the page can be prerendered. This is the structural pattern Cache Components rewards: a general practice worth applying everywhere, and the foundation for instant navigation and prefetching.

Instant navigation validation with Cache Components

Cache Components now validates client navigations to ensure they are instant. It gives insights and errors that guide you to make navigations instant: wrap data in Suspense, cache it with use cache, or move where the access happens.

Partial Prefetching default behavior

With Partial Prefetching enabled, the router prefetches each route's App Shell by default. The App Shell includes static content and session data derived from cookies() and headers(). To also prefetch cached content that depends on a link's URL data like searchParams or dynamic params, set `prefetch={true}` on that link.

Prefetching with Link prefetch={true}

With `<Link prefetch={true}>` pointing at a Partial Prefetching route, Next.js renders that route's component tree again at prefetch time with the destination URL resolved. Cached content that resolves after the destination URL is known joins the per-link prefetch, costing one server invocation per prefetchable link.

Search page prefetching example

Example: A search page reads searchParams from the URL. On direct visit, Results streams behind fallback. When a Link to /search?q=shoes is prefetched, the framework resolves searchParams from the link's URL, so the cached search result is included in the runtime prerender before the click. The browser reuses it until its stale time passes.

uncached streaming data definition

Uncached streaming data refers to async data fetches or operations that are not wrapped with `use cache` and are instead streamed at request time behind a `<Suspense>` boundary. This allows the fallback UI to be prerendered while fresh data streams in on each request.

App Shell definition and caching rules

An App Shell is a per-route prerender containing parts of a page that don't depend on URL data. Cached content is included when its stale time is at least 5 minutes. Routes that read cookies() or headers() produce an App Shell that also includes session data, cached per session on the client. The App Shell is used as the default prefetch payload during client navigations, the loading state when per-link prefetch is not ready, and the fallback for ISR with Cache Components.

Code Splitting definition and benefit

Code Splitting is the process of dividing your application into smaller JavaScript chunks based on routes. Instead of loading all code upfront, only the code needed for the current route is loaded, reducing initial load time. Next.js automatically performs code splitting based on routes.

Image Optimization with <Image> component

Image Optimization is automatic image optimization using the <Image> component. Next.js optimizes images on-demand, serves them in modern formats like WebP, and automatically handles lazy loading and responsive sizing.

Module Graph definition

A Module Graph is a graph of file dependencies in your app. Each file (module) is a node, and import/export relationships form the edges. Next.js analyzes this graph to determine optimal bundling and code-splitting strategies.

Partial Prefetching for Cache Components

Partial Prefetching is a prefetching strategy for Cache Components routes where a <Link> prefetches a per-route App Shell by default instead of the full page. Enable it with partialPrefetching: true in next.config.ts.

Partial Prerendering (PPR) definition

Partial Prerendering (PPR) is a rendering optimization that combines prerendering and dynamic rendering in a single route. The static shell is served immediately while dynamic content streams in when ready, providing the best of both rendering strategies.

Prefetching behavior with <Link> component

Prefetching is loading a route in the background before the user navigates to it. Next.js automatically prefetches routes linked with the <Link> component when they enter the viewport, making navigation feel instant.

Static Shell definition

The Static Shell is the prerendered HTML structure of a page that's served immediately to the browser. With Partial Prerendering, the static shell includes all statically renderable content plus Suspense boundary fallbacks for dynamic content that streams in later.

Streaming technique and enablement

Streaming is a technique that allows the server to send parts of a page to the client as they become ready, rather than waiting for the entire page to render. It is enabled automatically with loading.js or manual <Suspense> boundaries.

Suspense boundary role in Partial Prerendering

A Suspense boundary is a React <Suspense> component that wraps async content and displays fallback UI while it loads. In Next.js, Suspense boundaries define where the static shell ends and streaming begins, enabling Partial Prerendering.

Tree Shaking definition and benefit

Tree Shaking is the process of removing unused code from your JavaScript bundles during the build process. Next.js automatically tree-shakes your code to reduce bundle sizes.

Give your agent this brain