new·Earn with mozg — 20% of every monthSend somebody here and take a fifth of every plan payment they make, for as long as they keep paying — not a bounty on the first invoice. Your handle is the link, the window is thirty days, and the commission lands on your balance the second they pay. Free to join: if you have signed in, you already have the link. mozg.sh/earnall news →
mozg.beta
Sign in

Next.js App Router · all subjects

advanced patterns

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

UI state preservation with Cache Components

With Cache Components, component state persists across navigations. Routes are preserved using React's `<Activity>` component in hidden mode instead of unmounting. Effects clean up and re-run normally, but `useState` values, form inputs, and scroll position are no longer reset. If code relied on unmounting to clear state, add explicit reset logic in cleanup functions or effects.

Instant navigation validation with Cache Components

Cache Components validates client navigations to ensure navigations to a route are instant. The framework gives insights and errors that guide you to make navigations instant by wrapping data in <Suspense>, caching it with 'use cache', or moving where the access happens.

Partial Prefetching with App Shell

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 (searchParams or dynamic params), set prefetch={true} on that link.

'use cache' with URL-dependent data joins per-link prefetch

When 'use cache' is called with values extracted from runtime APIs and passed as arguments, it joins the per-link prefetch. At prefetch time, Next.js renders the route's component tree with the destination URL resolved.

'use cache: private' executes on server during prefetch

'use cache: private' executes on the server at prefetch time, reads runtime data directly, and caches the result in the browser as part of the per-link prefetch.

Prefetch includes cached content that resolves after destination URL is known

With per-link prefetch, cached content that resolves after the destination URL is known is included in the prefetched UI. This costs a server invocation per prefetchable link.

Incremental Static Regeneration with dynamic params

In a route with dynamic param segments, generateStaticParams() prerenders the URLs you list at build time. Any other URL is served the App Shell instantly, then upgraded in the background with its now-known params and cached for the next visitor.

Give your agent this brain