"Data Fetching Fundamentals
The Next.js App Router introduces a new, simplified data fetching system built on React and the Web platform. This page will go through the fundamental concepts and patterns to help you manage your data's lifecycle.

Good to know: Previous Next.js data fetching methods such as getServerSideProps, getStaticProps, and getInitialProps are not supported in the new app directory.

Overview
Here's a quick overview of the recommendations on this page:

Fetch data on the server using Server Components.
Fetch data in parallel to minimize waterfalls and reduce loading times.
For Layouts and Pages, fetch data where it's used. Next.js will automatically dedupe requests in a tree.
Use Loading UI, Streaming and Suspense to progressively render a page and show a result to the user while the rest of the content loads.
The fetch() API
The new data fetching system is built on top of the native fetch() Web API and makes use of async/await in Server Components.

React extends fetch to provide automatic request deduping.
Next.js extends the fetch options object to allow each request to set its own caching and revalidating rules.
Learn how to use fetch in Next.js.

Fetching Data on the Server
Whenever possible, we recommend fetching data inside Server Components. Server Components always fetch data on the server. This allows you to:

Have direct access to backend data resources (e.g. databases).
Keep your application more secure by preventing sensitive information, such as access tokens and API keys, from being exposed to the client.
Fetch data and render in the same environment. This reduces both the back-and-forth communication between client and server, as well as the work on the main thread on the client.
Perform multiple data fetches with single round-trip instead of multiple individual requests on the client.
Reduce client-server waterfalls.
Depending on your region, data fetching can also happen closer to your data source, reducing latency and improving performance.
Learn more about Client and Server Components.

Good to know: It's still possible to fetch data client-side. We recommend using a third-party library such as SWR or React Query with Client components. In the future, it'll also be possible to fetch data in Client Components using React's use() hook.

Component-level Data Fetching
In this new model, you can fetch data inside layouts, pages, and components. Data fetching is also compatible with Streaming and Suspense.

Good to know: For layouts, it's not possible to pass data between a parent layout and its children. We recommend fetching data directly inside the layout that needs it, even if you're requesting the same data multiple times in a route. Behind the scenes, React and Next.js will cache and dedupe requests to avoid the same data being fetched more than once.

Parallel and Sequential Data Fetching
When fetching data inside components, you need to be aware of two data fetching patterns: Parallel and Sequential.

Server and Client Components
With parallel data fetching, requests in a route are eagerly initiated and will load data at the same time. This reduces client-server waterfalls and the total time it takes to load data.
With sequential data fetching, requests in a route are dependent on each other and create waterfalls. There may be cases where you want this pattern because one fetch depends on the result of the other, or you want a condition to be satisfied before the next fetch to save resources. However, this behavior can also be unintentional and lead to longer loading times.
Learn how to implement parallel and sequential data fetching.

Automatic fetch() Request Deduping
If you need to fetch the same data (e.g. current user) in multiple components in a tree, Next.js will automatically cache fetch requests (GET) that have the same input in a temporary cache. This optimization prevents the same data from being fetched more than once during a rendering pass.

Deduplication in a component tree
On the server, the cache lasts the lifetime of a server request until the rendering process completes.
This optimization applies to fetch requests made in Layouts, Pages, Server Components, generateMetadata and generateStaticParams.
This optimization also applies during static generation.
On the client, the cache lasts the duration of a session (which could include multiple client-side re-renders) before a full page reload.
Good to know:

POST requests are not automatically deduplicated. Learn more about caching.
If you're unable to use fetch, React provides a cache function to allow you to manually cache data for the duration of the request.
Static and Dynamic Data Fetches
There are two types of data: Static and Dynamic.

Static Data is data that doesn't change often. For example, a blog post.
Dynamic Data is data that changes often or can be specific to users. For example, a shopping cart list.
Dynamic and Static Data Fetching
By default, Next.js automatically does static fetches. This means that the data will be fetched at build time, cached, and reused on each request. As a developer, you have control over how the static data is cached and revalidated.

There are two benefits to using static data:

It reduces the load on your database by minimizing the number of requests made.
The data is automatically cached for improved loading performance.
However, if your data is personalized to the user or you want to always fetch the latest data, you can mark requests as dynamic and fetch data on each request without caching.

Learn how to do Static and Dynamic data fetching.

Caching Data
Caching is the process of storing data in a location (e.g. Content Delivery Network) so doesn't need to be re-fetched from the original source on each request.

Static Site Generation with Caching
The Next.js Cache is a persistent HTTP cache that can be globally distributed. This means the cache can scale automatically and be shared across multiple regions depending on your platform (e.g. Vercel).

Next.js extends the options object of the fetch() function to allow each request on the server to set its own persistent caching behavior. Together with component-level data fetching, this allows you to configure caching within your application code directly where the data is being used.

During server rendering, when Next.js comes across a fetch, it will check the cache to see if the data is already available. If it is, it will return the cached data. If not, it will fetch and store data for future requests.

Good to know: If you're unable to use fetch, React provides a cache function to allow you to manually cache data for the duration of the request.

Learn more about caching in Next.js.

Revalidating Data
Revalidation is the process of purging the cache and re-fetching the latest data. This is useful when your data changes and you want to ensure your application shows the latest version without having to rebuild your entire application.

Next.js provides two types of revalidation:

Background: Revalidates the data at a specific time interval.
On-demand: Revalidates the data whenever there is an update.
Learn how to revalidate data.

Streaming and Suspense
Streaming and Suspense are new React features that allow you to progressively render and incrementally stream rendered units of the UI to the client.

With Server Components and nested layouts, you're able to instantly render parts of the page that do not specifically require data, and show a loading state for parts of the page that are fetching data. This means the user does not have to wait for the entire page to load before they can start interacting with it.

Server Rendering with Streaming
To learn more about Streaming and Suspense, see the Loading UI and Streaming and Suspense pages.

Next Steps
Data Fetching
Learn how to fetch data in your Next.js application.
" summarize this
"데이터 불러오기 기초Next.js 앱 라우터는 React와 웹 플랫폼에 구축된 새롭고 간소화된 데이터 불러오기 시스템을 소개합니다. 이 페이지에서는 데이터의 수명 주기를 관리하는 데 도움이 되는 기본 개념과 패턴을 살펴봅니다.알아두면 좋습니다: 새로운 앱 디렉토리에서는 getServerSideProps, getStaticProps, getInitialProps와 같은 이전 Next.js 데이터 불러오기 메서드가 지원되지 않습니다.개요다음은 이 페이지의 권장 사항에 대한 간략한 개요입니다:서버 컴포넌트를 사용하여 서버에서 데이터를 가져옵니다.데이터를 병렬로 가져오면 워터폴을 최소화하고 로딩 시간을 줄일 수 있습니다.레이아웃 및 페이지의 경우 데이터가 사용되는 곳에서 데이터를 가져옵니다. Next.js는 트리에서 요청을 자동으로 중복 제거합니다.로딩 UI, 스트리밍 및 서스펜스를 사용하여 페이지를 점진적으로 렌더링하고 나머지 콘텐츠가 로드되는 동안 사용자에게 결과를 표시합니다.fetch() API새로운 데이터 불러오기 시스템은 네이티브 fetch() 웹 API를 기반으로 구축되었으며 서버 컴포넌트에서 비동기/대기(async/await)를 사용합니다.React는 fetch를 확장하여 자동 요청 중복 제거를 제공합니다.Next.js는 fetch 옵션 객체를 확장하여 각 요청이 자체 캐싱 및 재검증 규칙을 설정할 수 있도록 합니다.Next.js에서 fetch를 사용하는 방법을 알아보세요.서버에서 데이터 가져오기가능하면 서버 컴포넌트 내에서 데이터를 가져오는 것이 좋습니다. 서버 컴포넌트는 항상 서버에서 데이터를 가져옵니다. 이를 통해 다음을 수행할 수 있습니다:백엔드 데이터 리소스(예: 데이터베이스)에 직접 액세스할 수 있습니다.액세스 토큰 및 API 키와 같은 민감한 정보가 클라이언트에 노출되는 것을 방지하여 애플리케이션을 더욱 안전하게 보호할 수 있습니다.동일한 환경에서 데이터 가져오기 및 렌더링. 이렇게 하면 클라이언트와 서버 간의 주고받는 통신은 물론 클라이언트의 메인 스레드 작업도 줄어듭니다.클라이언트에서 여러 번의 개별 요청 대신 한 번의 왕복으로 여러 데이터 가져오기를 수행합니다.클라이언트-서버 워터폴 감소.지역에 따라 데이터 가져오기를 데이터 소스와 더 가까운 곳에서 수행하여 지연 시간을 줄이고 성능을 개선할 수도 있습니다.클라이언트 및 서버 구성 요소에 대해 자세히 알아보세요.알아두면 좋습니다: 클라이언트 측에서 데이터를 가져올 수도 있습니다. 클라이언트 컴포넌트와 함께 SWR 또는 React Query와 같은 서드파티 라이브러리를 사용하는 것이 좋습니다. 향후에는 React의 use() 훅을 사용하여 클라이언트 컴포넌트에서 데이터를 불러오는 것도 가능해질 것입니다.컴포넌트 수준 데이터 불러오기이 새로운 모델에서는 레이아웃, 페이지, 컴포넌트 내부에서 데이터를 불러올 수 있습니다. 데이터 불러오기는 스트리밍 및 서스펜스와도 호환됩니다.좋은 소식입니다: 레이아웃의 경우 상위 레이아웃과 하위 레이아웃 간에 데이터를 전달할 수 없습니다. 경로에서 동일한 데이터를 여러 번 요청하는 경우에도 데이터가 필요한 레이아웃 내부에서 직접 데이터를 가져오는 것이 좋습니다. 백그라운드에서 React와 Next.js는 동일한 데이터를 두 번 이상 가져오는 것을 방지하기 위해 요청을 캐시하고 중복 제거합니다.병렬 및 순차 데이터 불러오기컴포넌트 내부에서 데이터를 불러올 때 두 가지 데이터 불러오기 패턴을 알고 있어야 합니다: 병렬과 순차입니다.서버 및 클라이언트 컴포넌트병렬 데이터 불러오기를 사용하면 경로의 요청이 동시에 시작되고 동시에 데이터를 로드합니다. 따라서 클라이언트-서버 간 워터폴과 데이터 로드에 걸리는 총 시간이 줄어듭니다.순차적 데이터 가져오기를 사용하면 경로의 요청이 서로 종속되어 워터폴을 생성합니다. 한 가져오기가 다른 가져오기의 결과에 의존하거나 리소스를 절약하기 위해 다음 가져오기 전에 조건이 충족되기를 원하기 때문에 이 패턴을 원하는 경우가 있을 수 있습니다. 그러나 이 동작은 의도치 않게 로딩 시간이 길어질 수도 있습니다.병렬 및 순차 데이터 불러오기를 구현하는 방법을 알아보세요.자동 fetch() 요청 중복 제거트리의 여러 컴포넌트에서 동일한 데이터(예: 현재 사용자)를 가져와야 하는 경우, Next.js는 동일한 입력이 있는 가져오기 요청(GET)을 임시 캐시에 자동으로 캐싱합니다. 이 최적화를 통해 렌더링 패스 중에 동일한 데이터를 두 번 이상 가져오는 것을 방지할 수 있습니다.컴포넌트 트리에서의 중복 제거서버에서 캐시는 렌더링 프로세스가 완료될 때까지 서버 요청의 수명 기간 동안 지속됩니다.이 최적화는 레이아웃, 페이지, 서버 컴포넌트, 생성 메타데이터 및 생성 정적 매개변수에서 이루어진 가져오기 요청에 적용됩니다.이 최적화는 정적 생성 중에도 적용됩니다.클라이언트에서 캐시는 전체 페이지를 다시 로드하기 전에 세션 기간(여러 클라이언트 측 재렌더링이 포함될 수 있음) 동안 지속됩니다.알아두면 좋습니다:POST 요청은 자동으로 중복 제거되지 않습니다. 캐싱에 대해 자세히 알아보세요.불러오기를 사용할 수 없는 경우, React는 요청 기간 동안 데이터를 수동으로 캐시할 수 있는 캐시 함수를 제공합니다.정적 및 동적 데이터 불러오기데이터에는 두 가지 유형이 있습니다: 정적 데이터와 동적 데이터입니다.정적 데이터는 자주 변경되지 않는 데이터입니다. 예를 들어 블로그 게시물이 있습니다.동적 데이터는 자주 변경되거나 사용자에 따라 달라질 수 있는 데이터입니다. 예를 들어 장바구니 목록이 있습니다.동적 및 정적 데이터 가져오기기본적으로 Next.js는 다음과 같은 정적 가져오기를 자동으로 수행합니다.