[Next.js 13] 공식 문서

https://beta.nextjs.org/docs/data-fetching/fetching

데이터 검색: 검색 | Next.js

Next.js 애플리케이션에서 데이터를 가져오는 방법을 알아보세요.

'추천 관련글,

beta.nextjs.org

https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md

GitHub – acdlite/rfcs: React 변경 사항에 대한 RFC

React 변경 사항에 대한 RFC. GitHub에서 계정을 생성하여 acdlite/rfcs 개발에 기여하십시오.

github.com

쉬운 목차

기초

Next.js 13은 애플리케이션에서 데이터를 가져오는 새로운 방법을 소개합니다.

API는 React 및 웹 플랫폼과 더 잘 통합되도록 단순화되었습니다. 이 문서에서는 데이터의 수명 주기를 관리하는 데 도움이 되는 기본 개념과 패턴을 설명합니다.

알아두면 좋은 정보: getServerSideProps, getStaticProps 및 getInitialProps와 같은 이전 Next.js 데이터 검색 도구는 새 앱 디렉토리에서 지원되지 않습니다!!

개요

이것은 이 문서의 권장 사항에 대한 개요입니다.

서버 구성 요소를 사용하여 서버에서 데이터를 검색합니다.
로드 시간을 줄이고 낙하를 최소화하기 위해 데이터를 가로로 가져옵니다.
레이아웃 및 페이지와 관련하여 사용되는 위치에서 데이터를 가져옵니다. Next.js는 트리의 요청에 대한 중복을 자동으로 제공합니다.
로딩 UI, 스트리밍 및 서스펜스를 사용합니다. 이를 통해 나머지 콘텐츠가 로드되는 동안 점진적으로 페이지를 렌더링하고 사용자에게 결과를 표시할 수 있습니다.

가져오기() API

새로운 데이터 검색 시스템은 네이티브 fetch() 웹 API를 기반으로 합니다. 또한 서버 구성 요소에서 async/await를 사용하십시오.

fetch()는 원격 리소스를 가져오고 약속을 반환하기 위한 웹 API입니다. React에는 중복 요청을 자동으로 제거하는 기능을 제공하는 고급 폴링이 있습니다. Next.js는 각 요청이 자체 캐싱 및 재검증을 설정할 수 있도록 가져오기의 옵션 개체를 확장합니다.

서버에서 데이터 검색

가능한 모든 경우에 서버 구성 요소에서 데이터를 검색하는 것이 좋습니다. 서버 구성 요소는 항상 서버에서 데이터를 검색합니다. 이를 통해 다음을 수행할 수 있습니다.

백엔드의 데이터 리소스에 직접 액세스할 수 있습니다.
액세스 토큰이나 API 키와 같은 민감한 정보가 클라이언트에 노출되는 것을 방지하여 애플리케이션을 더욱 안전하게 만듭니다.
데이터 검색 및 렌더링은 동일한 환경에서 발생합니다. 이렇게 하면 클라이언트와 서버 간의 통신이 줄어들고 클라이언트의 기본 스레드 작업도 줄어듭니다.
클라이언트에서 여러 개별 요청을 보내는 대신 왕복으로 여러 데이터를 검색합니다.
클라이언트-서버 워터롤을 줄입니다.
당신의 지역에 따라 데이터 가져오기가 데이터 원본에 더 가깝게 수행되어 대기 시간이 줄어들고 성능이 향상될 수 있습니다.

알아두면 좋은 점: 여전히 클라이언트에서 데이터를 검색할 수 있습니다. 이 경우 SWR 또는 React Query와 같은 타사 라이브러리를 사용하는 것이 좋습니다. 앞으로는 React의 use() 후크를 사용하여 클라이언트 구성 요소에서 데이터를 검색할 수 있습니다.

구성 요소 수준 데이터 검색

이 새 모델에서는 레이아웃, 페이지 및 구성 요소에서 데이터를 검색할 수 있습니다. 데이터 검색은 스트리밍 및 서스펜스와도 호환됩니다.

알아두면 좋은 정보: 레이아웃 정보 상위 레이아웃과 하위 레이아웃 간에 데이터를 전송할 수 없습니다. 데이터가 필요한 레이아웃에서 직접 데이터를 가져오는 것이 좋습니다. 동일한 데이터가 경로에서 반복적으로 요청되는 경우에도 마찬가지입니다. React와 Next.js는 동일한 데이터를 두 번 이상 가져오는 것을 방지하기 위해 백그라운드에서 캐싱 및 중복 제거를 수행합니다.

병렬 및 순차적 데이터 검색

구성 요소 내에서 데이터를 검색할 때 병렬 및 순차라는 두 가지 데이터 검색 패턴을 알고 있어야 합니다.

데이터의 병렬 검색그 대가로 요청이 즉시 시작되고 동시에 데이터가 로드됩니다. 이렇게 하면 클라이언트-서버 폭포수와 데이터를 로드하는 데 걸리는 시간이 줄어듭니다.
순차적 데이터 검색에서 경로의 각 요청은 독립적이며 폭포를 만듭니다. 한 가져오기가 다른 가져오기에 종속되거나 다음 가져오기 전에 특정 조건이 충족되도록 하여 리소스를 절약하려는 경우 이 패턴을 사용할 수 있습니다. 그러나 이 동작은 의도하지 않거나 로드 시간이 길어질 수 있습니다.

자동 fetch() 요청 중복 제거

예를 들어 트리의 여러 구성 요소에서 동일한 데이터를 검색하려는 경우 B. 현재 사용자로부터, Next.js는 임시 캐시에 동일한 입력으로 GET 요청을 자동으로 저장합니다. 그건 중복 제거렌더링 프로세스 중에 동일한 데이터가 두 번 이상 검색되는 것을 방지합니다.

서버에서 캐시는 렌더링 프로세스가 완료될 때까지 서버 요청 수명 동안 지속됩니다.
클라이언트에서 캐시는 전체 페이지가 다시 로드되기 전에 세션 기간 동안 지속됩니다(여러 클라이언트 쪽 새로 고침이 포함될 수 있음).
POST 요청은 자동으로 중복 제거되지 않습니다.

정적 및 동적 데이터 검색

데이터에는 두 가지 유형이 있습니다. 공전수업 동적

정적 데이터: 자주 변경되지 않는 데이터. 마치 블로그 글 같습니다.
동적 데이터: 사용자에 따라 다르거나 자주 변경되는 데이터. 장바구니 같은 것이 있습니다.”

Next.js는 기본적으로 정적 호출을 수행합니다. 즉, 생성 시 데이터를 가져와 각 요청과 함께 캐시 및 재사용합니다. 개발자로서 당신은 정적 데이터가 캐시되고 재검증되는 방법을 제어할 수 있습니다.

정적 데이터를 사용하면 두 가지 이점이 있습니다.

쿼리 수를 최소화하여 데이터베이스의 부하를 줄입니다.
로딩 성능을 향상시키기 위해 데이터가 자동으로 캐시됩니다.

데이터 캐싱

캐싱은 특정 위치(예: 콘텐츠 전송 네트워크)에 데이터를 저장하는 프로세스이므로 모든 요청에서 원래 소스에서 검색할 필요가 없습니다.

Next.js 캐시는 전역적으로 배포할 수 있는 영구 HTTP 캐시입니다. 이는 자동으로 캐시를 확장하고 플랫폼(예: Vercel)에 따라 여러 지역에서 공유할 수 있습니다.

Next.js는 서버의 각 요청이 자체 영구 캐싱 동작을 설정할 수 있도록 fetch() 함수의 옵션 개체를 확장합니다. 이는 구성 요소 수준 데이터 검색과 함께 데이터를 사용하는 애플리케이션 코드에서 직접 캐싱을 구성할 수 있도록 합니다.

Next.js가 서버 렌더링 중에 가져오기를 발견하면 Next.js는 캐시를 확인하여 데이터가 이미 존재하는지 확인합니다. 캐시된 데이터가 있으면 반환합니다. 그렇지 않은 경우 향후 요청을 위해 데이터를 검색하고 저장합니다.

알아두면 좋은 점: Fetch를 사용할 수 없는 경우 React에서 캐시 기능을 제공합니다. 이렇게 하면 요청 기간 동안 수동으로 데이터를 캐시할 수 있습니다.

데이터 재검증

유효성 재검사는 캐시를 플러시하고 최신 데이터를 다시 가져옵니다. 이는 데이터가 변경되거나 응용 프로그램이 데이터를 다시 만들지 않고 최신 버전의 데이터를 표시하도록 하려는 경우에 유용합니다.

Next.js는 두 가지 유형의 재검증을 제공합니다.

배경: 데이터의 유효성을 정기적으로 다시 확인합니다.
온디맨드: 업데이트할 때마다 데이터가 재검증됩니다.

스트리밍과 흥분

Streaming 및 Suspense는 렌더링된 UI 단위를 점진적으로 렌더링하고 이를 클라이언트에 점진적으로 스트리밍할 수 있는 새로운 React 기능입니다.

서버 구성 요소와 중첩된 레이아웃을 사용하면 특별히 데이터가 필요하지 않은 페이지 부분을 즉시 렌더링하고 데이터를 검색하는 페이지 부분의 로드 상태를 볼 수 있습니다. 이는 사용자가 전체 페이지가 로드될 때까지 기다리지 않고 상호 작용을 시작할 수 있음을 의미합니다.

스트리밍과 서스펜스에 대해 더 알고 싶다면 사용자 인터페이스 로드 중그리고 스트리밍과 흥분 페이지 참조

알아두면 좋은 정보: 이 새로운 데이터 검색 모델은 개발 중이며 아직 안정적이지 않습니다. 또한 공부하기 전에 위의 RFC 문서를 읽어보는 것이 좋습니다. 위의 문서는 서버 구성 요소의 async/await와 클라이언트 구성 요소의 새로운 use() 후크를 소개합니다.

(위에서 알아두면 좋은 점을 읽고 잠시 use() 후크를 찾아보았습니다. 또한 async await가 서버 구성 요소로 제한되는 이유가 궁금했습니다.

위에 링크된 React의 RFC를 보면 클라이언트 컴포넌트에서 await를 지원하지 않는 이유는 기술적인 한계 때문이라고 합니다. 정확한 이유에 대해서는 아직 잘 모르겠습니다.

대신 use라는 후크를 사용할 수 있으며 use(promise)는 await Promise와 같은 표현입니다.

다른 후크와 달리 내부 조건, 블록 또는 루프일 수 있습니다.)

React 및 Next.js 13은 데이터를 가져오고 관리하는 새로운 방법을 소개합니다. 새로운 데이터 검색 시스템은 앱 디렉토리 내에서 작동하며 웹 API fetch()를 기반으로 합니다.

fetch()는 원격 리소스를 가져오고 약속을 반환하기 위한 웹 API입니다. React Extended Fetch는 중복 요청을 자동으로 제거하는 기능을 제공하고 Next.js Extended Fetch 옵션 객체는 각 요청이 자체 캐싱 및 재검증을 설정할 수 있도록 허용합니다.

서버 구성 요소의 비동기/대기

위의 RFC에 따르면 서버 구성 요소는 비동기를 사용하고 데이터를 가져오기 위해 대기할 수 있습니다.

// app/page.tsx

async function getData() {
  const res = await fetch('https://api.example.com/...');
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.

  // Recommendation: handle errors
  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>;
}

경고: 레이아웃과 페이지에서 async/await를 사용할 수 있습니다. 서버 구성 요소이기 때문입니다. TypeScript와 함께 다른 구성 요소에서 async/awiat를 사용하면 JSX의 응답 유형에 오류가 발생할 수 있습니다. 이 문제를 미리 해결하기 위해 TypeScript 팀과 협력하고 있습니다.

해결 방법으로 {/* @ts-expect-error Server Component */} 를 사용하여 구성 요소에 대한 유형 검사를 비활성화할 수 있습니다.

서버 구성 요소의 기능

Next.js는 서버에서 데이터를 검색하기 위한 유용한 서버 기능을 제공합니다.

– cookies(): 서버 구성 요소가 들어오는 HTTP 요청에서 쿠키를 읽을 수 있도록 합니다.

– headers(): 서버 구성 요소가 들어오는 HTTP 요청의 헤더를 읽을 수 있도록 합니다.