The In-Between States
Async React patterns with Next.js 16
Why in-between states matter and how to solve the coordination problem.
Server vs Client Components, CSS :has() for parent styling, leaf principle.
Independent streaming, boundary placement strategy, transitions preserve content.
Server Functions with Zod validation, typed results, granular cache invalidation.
Form state preservation with useActionState, defaultValue pattern, create/edit reuse.
SubmitButton pattern, child component constraint, localized form feedback.
Instant feedback with useOptimistic, derived pending state, data-pending for parent styling.
"use cache" with cacheTag, revalidateTag + refresh() for invalidation, granular tags.
Page-level transitions, shared element morphing, directional navigation.
ErrorCard for page errors, ErrorBoundary for inline, StatusCard for 404/expected states.
Pre-render dynamic routes, generateMetadata for SEO, on-demand generation.
searchParams for shareable state, Zod validation, optimistic URL updates.
Request deduplication with cache(), combining with "use cache" directive.
isPending for destructive actions, comparison with useOptimistic, keeping content visible.
Co-locate skeletons with components, match layout structure, prevent CLS.
unauthorized() in Server Components and queries, StatusCard UI.
cacheComponents default, what triggers dynamic rendering, push dynamic access deep.
Action props for reusable components, encapsulate transitions and optimistic state.
Link pending state with useLinkStatus, child component pattern, comparison with useTransition.