데이터 검색은 모든 애플리케이션의 핵심 부분입니다. 이 페이지에서는 React 및 Next.js에서 데이터를 검색하고 캐시하며 다시 유효성을 검사하는 방법에 대해 알아보겠습니다.

데이터를 검색하는 네 가지 방법이 있습니다.

서버에서 fetch를 사용하여
서버에서 제3자 라이브러리를 사용하여
클라이언트에서 라우트 핸들러를 통해
클라이언트에서 제3자 라이브러리를 사용하여

Fetching Data on the Server with `fetch`

Next.js는 네이티브 fetch Web API를 확장하여 서버에서 각 fetch 요청에 대한 캐싱 및 다시 유효성을 검사하는 동작을 구성할 수 있게 해줍니다. React는 React 컴포넌트 트리를 렌더링하는 동안 fetch 요청을 자동으로 메모이제이션하는 방식으로 fetch를 확장합니다.

fetch를 Server Components, Route Handlers 및 Server Actions에서 async/await와 함께 사용할 수 있습니다.

예를 들면:

async function getData() {
  const res = await fetch('<https://api.example.com/>...')
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
 
  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error('Failed to fetch data')
  }
 
  return res.json()
}
 
export default async function Page() {
  const data = await getData()
 
  return <main></main>
}

[코드] app/page.tsx

알고 계실만한 사항:

Next.js는 Server Components에서 데이터를 검색할 때 쿠키 및 헤더와 같은 유용한 함수를 제공합니다. 이러한 함수들은 요청 시간 정보를 기반으로 하기 때문에 라우트가 동적으로 렌더링되게 됩니다.
라우트 핸들러에서는 fetch 요청이 React 컴포넌트 트리의 일부가 아니기 때문에 메모이제이션이 되지 않습니다.
TypeScript를 사용하여 Server Component에서 async/await를 사용하려면 TypeScript 5.1.3 이상과 @types/react 18.2.8 이상을 사용해야 합니다.

Fetching Data on the Server with fetch

Fetching Data on the Server with `fetch`