data-fetchinglisted

# data-fetching — Server Components first, never `useEffect` for reads This skill governs **where data reads land** in a Next.js 16 App Router app. The framework lets you call a `"use server"` function from a Client Component — that's a capability, not a license. Reading data via a Server Action in `useEffect` costs you SSR, streaming, request deduping, caching, and parallelism. The bug is silent: no error, no warning, just worse UX and wasted POSTs. ## When this skill applies - The user is about to call a Server Action from a Client Component to load data. - The user is about to add `useEffect` (at all — but especially to fetch). - The user pastes `"use client" + useState + useEffect + fetch/getX` and asks for review. - The user is about to convert a page to `"use client"` so it can host filter/tab state. - The user adds a `"use server"` function whose only job is `SELECT` / read. - The user asks to **audit** a Next.js codebase against the data-fetching rules. ## Contract Follows the dev-flow contract — see `references/contracts.md`. Key facts: - Reads `meta.json#stack.framework` and `stack.nextjs_version`. For `framework = "monorepo"`, reads `stack.monorepo.web.framework` and `stack.monorepo.web.nextjs_version`. - **Refuses to apply** if: - `stack.framework ∉ {"next", "monorepo"}` — Server Components / Server Actions don't exist on RN, Remix, SvelteKit, Astro, plain React, etc. - `stack.nextjs_version != "16"` — `searchParams` is async in 16 (was sync in 15), `rev