nextjs-app-router-patterns

Fetch data directly inside async Server Components using the fetch API with cache options. Use { next: { revalidate: 60 } } for ISR, { cache: 'no-store' } for dynamic data, or { next: { tags: ['products'] } } for tag-based invalidation.

Migrate by moving pages into the app directory with page.tsx files, converting getServerSideProps and getStaticProps into async Server Components, and replacing API routes with route handlers in route.ts files.

Add 'use client' only when a component needs interactivity, React hooks like useState or useEffect, or browser APIs. Start with Server Components by default and push client boundaries as far down the tree as possible.

Parallel routes use named slots like @analytics and @team folders that render simultaneously in the same layout. Each slot gets its own loading.tsx and error.tsx, enabling independent loading states for dashboard-style pages.

Cached fetch responses persist until revalidated by time or tags. Call revalidateTag or revalidatePath inside a Server Action after mutations, or set a revalidate interval in the fetch options to control staleness.