What is Next.js App Router data fetching patterns?

The App Router introduces several data fetching patterns: 1. Sequential fetching: requests execute one after another. Use when data depends on previous data: async function Page({ params }) { const user = await getUser(params.id); const posts = await getUserPosts(user.id); // depends on user return <...>; }. 2. Parallel fetching: initiate multiple requests simultaneously — faster when independent: async function Page() { const [users, products] = await Promise.all([getUsers(), getProducts()]); return <...>; }. 3. Preloading pattern: start a fetch before an await: function preloadUser(id: string) { void getUser(id); } async function Page({ params }) { preloadUser(params.id); // starts fetch immediately const layout = await getLayout(); // while this runs const user = await getUser(params.id); // already cached return <...>; }. React's Request Memoization deduplicates the getUser call. 4. Waterfall avoidance with Suspense: use Suspense boundaries to start multiple fetches independently: <Suspense><UserStats userId={id} /></Suspense> <Suspense><UserPosts userId={id} /></Suspense>. Each component fetches its own data in parallel, regardless of rendering order. 5. Client-side fetching with SWR/React Query: for real-time data, user-specific data, or after-load enrichment: const { data, isLoading } = useSWR("/api/realtime-data", fetcher, { refreshInterval: 3000 });. 6. Route segment config: export const dynamic = "force-dynamic" or export const revalidate = 60 — apply to all fetches in a route.