nextjs/Data Fetching

In the App Router, Server Components can fetch data directly with plain async/await — no useEffect, no manual loading-state boilerplate for the initial render — because the fetch happens on the server before any HTML is ever sent to the browser. Identical fetch requests made multiple times within a single render pass are automatically deduplicated, so calling the same endpoint from several components doesn't actually trigger several network requests.

That automatic deduplication is exactly why fetching independently inside each component that needs the data — rather than fetching once at the top and prop-drilling it down — is the recommended pattern. It also enables the App Router's default parallel-fetching behavior: fetches in sibling components that don't depend on each other's data run concurrently rather than sequentially, unless one component's fetch genuinely needs the result of another's, which creates an unavoidable waterfall.