nextjs-data-fetching

# Next.js Data Fetching ## Overview Provides patterns for data fetching in Next.js App Router: server-side fetching, SWR/React Query integration, ISR, revalidation, error boundaries, and loading states. ## When to Use - Implementing data fetching in Next.js App Router - Choosing between Server Components and Client Components - Setting up SWR or React Query for client-side caching - Configuring ISR, time-based, or on-demand revalidation - Handling loading and error states - Building forms with Server Actions ## Instructions ### Server Component Fetching Fetch directly in async Server Components: ```tsx async function getPosts() { const res = await fetch('https://api.example.com/posts'); if (!res.ok) throw new Error('Failed to fetch posts'); return res.json(); } export default async function PostsPage() { const posts = await getPosts(); return ( <ul> {posts.map((post) => ( <li key={post.id}>{post.title}</li> ))} </ul> ); } ``` ### Parallel Data Fetching Use `Promise.all()` for independent requests: ```tsx async function getDashboardData() { const [user, posts, analytics] = await Promise.all([ fetch('/api/user').then(r => r.json()), fetch('/api/posts').then(r => r.json()), fetch('/api/analytics').then(r => r.json()), ]); return { user, posts, analytics }; } export default async function DashboardPage() { const { user, posts, analytics } = await getDashboardData(); // Render dashboard } ``` ### Sequentia...