next.js
ff43248f - docs: add Interactive Apps guide (#94020)

Commit
57 days ago
docs: add Interactive Apps guide (#94020) ### What? Adds the Interactive Apps guide (`docs/01-app/02-guides/interactive-apps.mdx`) with a companion [Taskboard app](https://github.com/vercel-labs/async-react-demo). ### Why? There is no end-to-end guide that shows how to coordinate pending work across Server Functions, transitions, optimistic UI, and caching in a single app. ### How? The guide walks through building a task management board in 8 steps, from a plain Server Component app to one with optimistic UI, streaming, caching, and prefetching: 1. Stream slow data with Suspense — promise-passing to split reads into independent boundaries 2. Respond instantly to a toggle — `useOptimistic` + `startTransition` for a priority cycle 3. Filter with pending feedback — `useTransition` + `data-pending` for label chips, action props for `ChipGroup` 4. Add comments with instant feedback — `useOptimistic([])` for a pending-only comment list 5. Move cards between columns — optimistic reducer for drag-and-drop status updates 6. Manage form lifecycle with useActionState — `isPending`, key-based reset, double-transition for dialog close 7. Signal pending deletion to a parent — `useOptimistic(false)` + `data-pending` CSS attribute 8. Make repeat navigation instant — `use cache`, `cacheTag`, `updateTag`, `unstable_prefetch` The companion app lives at [vercel-labs/async-react-demo](https://github.com/vercel-labs/async-react-demo). The `plain` branch is the starting point, `main` has all 8 steps applied. --------- Co-authored-by: Joseph <joseph.chamochumbi@vercel.com>
Author
Parents
Loading