with one click
nextjs-data-fetching
Implement Fetch API, Caching, and Revalidation strategies in Next.js. Use when fetching data, configuring cache behavior, or implementing revalidation in Next.js.
Menu
Implement Fetch API, Caching, and Revalidation strategies in Next.js. Use when fetching data, configuring cache behavior, or implementing revalidation in Next.js.
Standardize BRD and BRD-lite discovery for business goals, stakeholder impact, current-to-future state, and measurable value outcomes. Use when creating BRD, business case, project justification, ROI narrative, or AS-IS to TO-BE scope.
Standardize PRD discovery and drafting for product scope, user outcomes, requirement IDs, and acceptance criteria. Use when creating PRD, product requirements, feature specification, or acceptance criteria plan.
Standardize SRS and FRS specifications for technical behavior, interfaces, data contracts, quality constraints, and verification mapping. Use when writing SRS, functional specification, system behavior requirements, API/data contracts, or non-functional thresholds.
Clarify a rough product or engineering idea into a BRD-lite brief (Why) with measurable business value.
Turn an approved PRD or implementation goal into SRS/FRS technical requirements (How), architecture, contracts, and verification decisions.
Plan a feature from BRD-lite brief or clear intent into PRD (What), decisions, implementation plan, and task slices.
| name | nextjs-data-fetching |
| description | Implement Fetch API, Caching, and Revalidation strategies in Next.js. Use when fetching data, configuring cache behavior, or implementing revalidation in Next.js. |
| metadata | {"triggers":{"files":["**/*.tsx","**/service.ts"],"keywords":["fetch","revalidate","no-store","force-cache"]}} |
[!WARNING] Covers App Router
fetchonly. Forpages/directory: usegetServerSideProps/getStaticProps. Ignore nativefetchcaching advice below.
Fetch data directly in Server Components using async/await.
fetch(url, { cache: 'force-cache' }).fetch(url, { cache: 'no-store' }) or cookies().fetch(url, { next: { revalidate: 60 } }).export default async function Page() { const user = await db.user.findUnique({ where: { id }, select: { id: true, name: true } }); }Promise.all() to prevent waterfalls.revalidatePath('/path') - Purge cache for route.revalidateTag('key') - Purge by tag.<Suspense> to avoid blocking.useEffect for data fetching: Use SWR or React Query for client-side data.