✳flâneur — a map of the web's best reading

Data Fetching: Fetching, Caching, and Revalidating | Next.js

nextjs.org · 2,411 words · saved by 1 readers

Data fetching is a core part of any application. This page goes through how you can fetch, cache, and revalidate data in React and Next.js. There are four ways you can fetch data: Next.js extends the native fetch Web API to allow you to configure the caching and revalidating behavior for each fetch request on the server. React extends fetch to automatically memoize fetch requests while rendering a React component tree. You can use fetch with async/await in Server Components, in Route Handlers, and in Server Actions. For example: Good to know: Caching stores data so it doesn't need to be re-fetched from your data source on every request. By default, Next.js automatically caches the returned values of fetch in the Data Cache on the server. This means that the data can be fetched at build time or request time, cached, and reused on each data request. fetch requests that use the POST method are also automatically cached. Unless it's inside a Route Handler that uses the POST method, then i

This page is also available as Markdown at /docs/app/getting-started/fetching-data.md . For an index of Next.js documentation , see /docs/llms.txt . Copy page Fetching Data Last updated March 13, 2026 This page will walk you through how you can fetch data in Server and Client Components, and how to stream components that depend on uncached data. Fetching data Server Components You can fetch data in Server Components using any asynchronous I/O, such as: The fetch API An ORM or database With the fetch API To fetch data with the fetch API, turn your component into an asynchronous function, and aw

Explore this link on the map →

related reading