Next.js SPA patterns

Runnable demos for the Single-Page Applications guide. Each route maps to one section of the guide. Open the network tab to watch the seeding and streaming behavior.

use() within a Context Provider

Hoist a fetch to a layout, pass the Promise unawaited through context, and unwrap it in a Client Component with use().

SPAs with SWR

Seed a scoped SWRConfig fallback from a Server Component. Toggle the key-mismatch pitfall to watch SWR refetch on the client.

SPAs with React Query

Prefetch without awaiting, dehydrate into a HydrationBoundary, and read the cache with useSuspenseQuery on the client.

Rendering components only in the browser

Disable prerendering for a Client Component with next/dynamic and ssr: false.

Shallow routing on the client

Update the URL with pushState and read it back with useSearchParams, without a server round-trip.

Mutations

A to-do list with add, toggle, edit, and delete, using a Server Action as an async reducer with useOptimistic.