nextjs-data-fetching-and-caching

Data fetching in Next.js server components uses async/await directly in the component body. Fetch data in server components, route handlers, or server actions, then pass results to client components. This approach keeps sensitive logic server-side and improves performance by reducing client-side data loading.

force-cache caches fetch responses indefinitely until revalidation; no-store fetches fresh data on every request. Use force-cache for static content and no-store for real-time data. Pair with next: { revalidate } to set custom expiration times for ISR.

Next.js automatically deduplicates identical fetch requests during a single render pass. Configure explicit caching with cache: 'force-cache' or 'no-store' and use revalidation strategies to control when duplicates are allowed, reducing unnecessary API calls and improving performance.

Server actions handle mutations securely in App Router by executing server-side logic triggered from client components. Use them with forms or event handlers, combine with revalidation to refresh cached data after mutations, and maintain clear client-server boundaries.

ISR with next: { revalidate } regenerates pages at fixed intervals for predictable freshness; on-demand revalidation updates immediately when data changes. Choose ISR for content with regular update cycles and on-demand for event-driven changes or urgent updates.

Use loading.tsx for skeleton UI during fetches and error.tsx to catch and display errors gracefully. Pair with server components and async rendering to show loading states before data arrives, improving perceived performance and user experience.