https://beta.nextjs.org/docs/data-fetching/fundamentals
위 문서에 대한 번역을 진행합니다. 번역시점은 2023-05-01로 공식문서의 추가적인 업데이트가 있을 수 있습니다.
번역기와 챗지피티에 의존해서 번역하고있습니다.
번역체를 자연스러운 어투로 옮기는 과정에서 오역이 발생할 수 있는 점 미리 알립니다.
한글로 번역하는 것이 더 어색한 단어의 경우 원문을 먼저 표기하겠습니다.
역자의 개인적인 의견에 대한 내용은
이 안에서 이루어집니다.
새로운 Next.js의 App Router에 대해 소개합니다.
새로운 Router는 data fetching(데이터 가져오기)를 좀 더 단순화시켰습니다.
이 페이지에서는 기본적인 concept(개념)과 패턴을 다룹니다.
Good to know : Next.js의 새로운 app directory는 getStaticProps 와 getInitialProps와 같은 이전에 사용하던 next.js의 data fetching(데이터 가져오기) 메서드가 지원되지 않습니다.
Overiew
1. server component를 사용하여 서버에서 데이터를 가져옵니다.(fetch data)
2. 데이터를 병렬적으로 가져오면 워터폴을 최소화하고 로딩 시간을 단축할 수 있습니다.
3. 레이아웃과 페이지의 경우 fetch data가 사용되는 곳에서 데이터를 가져옵니다.
(이때 Next.js는 알아서 트리에서 중복된 데이터를 제거합니다.
4. loading UI를 사용하는 경우 streaming과 suspense를 사용하여 페이지를 점진적으로 렌더링하고 나머지 콘텐츠가 로드되는 동안 사용자에게 결과를 표시합니다.
dedupe ? deduplication을 짧게 줄인 것 같습니다.
아래 링크는 data_deduplication에 대한 링크입니다.
직역하면 데이터 중복 제거를 말합니다.
https://en.wikipedia.org/wiki/Data_deduplication
The fetch() API
새로운 data fetching system은 native fetch web api를 기반으로 구축되었습니다.
그리고 이것은 서버 컴포넌트에서 async/await 기능을 사용합니다.
- react는 automatic request deduping(자동으로 중복 요청을 제거하는 것)을 제공하기 위해 fetch를 확장합니다.
-Next.js는 fetch의 options 객체를 확장하여 각 요청이 자체적으로 캐싱 , 재검증 규칙을 설정할 수 있도록 합니다.
Fetching Data on the Server
가능하면 서버 컴포넌트 내부에서 데이터를 가져오는 것이 좋습니다.
서버 컴포넌트는 항상 서버에서 데이터를 가져오는데 이렇게 하면 다음과 같은 장점이 있습니다.
| 백엔드 데이터 리소스(ex : 데이터베이스)에 직접 access(접근)할 수 있습니다. |
| 액세스토큰, API KEY등과 같은 민감 정보가 클라이언트에 노출되는 것을 막아 보안을 강화시킵니다. |
| 동일한 환경에서 데이터를 가져오고 렌더링 합니다. 이렇게하게되면 클라이언트와 서버간에 주고받는 통신은 물론 클라이언트의 메인 스레드 작업도 줄어드는 효과가 있습니다. |
| 클라이언트에서 여러번 개별 요청을 하는 대신 한번의 왕복으로 여러 데이터를 가져올 수 있습니다. |
| 클라이언트 서버의 waterfalls을 줄일 수 있습니다. |
| *지역에 따라 다릅니다. data fetching을 데이터 원본과 더 가까운 곳에서 수행하면 지연시간을 줄이고 성능을 개선할 수도 있습니다. |
역자 : waterfalls에 대한 이해에 도움이 되는 링크입니다.
https://tech.kakaopay.com/post/react-server-components/
개발자도구에서 확인할 수 있는 화면입니다. 저 Waterfall을 줄일 수 있다는 의미인 것 같네요
Good to know : 클라이언트 측에서 데이터를 가져올 수 있습니다.
클라이언트 측에서 data fetching을 하려고 하는 경우 SWR, React Query와 같은 라이브러리 사용을 권장합니다.
향후에는 React의 use() 훅을 사용하여 클라이언트 컴포넌트에서 데이터를 불러오는것도 가능해질것입니다
Component-level Data Fetching
이 새로운 모델에서는 레이아웃, 페이지, 컴포넌트 내부 데이터를 가져올 수 있습니다.
또한 이 데이터 페칭은 streaming과 suspense와도 호환이 됩니다.
Good to Know : 레이아웃의 경우 상위 레이아웃과 하위 레이아웃 간에 데이터를 전달해줄 수 없습니다.
경로에서 동일한 데이터를 여러번 요청하는 경우에도 데이터가 필요한 레이아웃 내부에서 직접 데이터를 가져오는 편이 좋습니다.
백그라운드에서 React와 Next.js는 동일한 데이터를 두번 이상 가져오는 것을 방지하기 위해 요청을 캐싱해두고 중복을 제거합니다!
Parallel and Sequential Data Fetching
(병렬 및 순차 데이터 가져오기)
컴포넌트 내부에서 데이터를 가져올 때는 병렬과 순차 두가지 데이터 페칭 패턴을 알고 있어야 합니다.
- 병렬(parallel) 데이터 가져오기를 사용하면 경로의 요청이 시작되고 동시에 데이터를 로드합니다. 따라서 클라이언트 서버간 워터폴 , 데이터 로드에 걸리는 총 시간이 줄어드는 효과가 있습니다.
-순차(sequential) 데이터 가져오기를 사용하면 경로의 요청이 서로 종속되어 워터폴을 생성합니다. 어떤 데이터가 다른 데이터의 결과에 의존하거나 리소스를 절약하기 위해 다음 가져오기 이전에 조건이 충족되기를 원하기 때문에 이 패턴을 원하는 경우가 있을 수도 있습니다.
** 순차적으로 데이터를 가져오게 되면 로딩 시간이 길어질 수도 있습니다.
Automatic fetch() Request Deduping
자동 fetch 요청 중복 제거
트리의 여러 컴포넌트에서 동일한 데이터를 가져와야 하는 경우 Next.js는 동일한 입력이 있는 get 요청을 자동으로 캐싱해둡니다. 이 최적화를 통해 렌더링 패스 중에 동일한 데이터를 두번 이상 가져오는 것을 방지할 수 있어요!
- 서버에서 캐시는 렌더링 프로세스가 완료될 때 까지 서버 요청의 수명 동안 지속됩니다.
- 이 최적화는 레이아웃, 페이지, 서버 컴포넌트, generateMetadata , generateStaticParams에서 이루어진 data fetch 요청에 적용됩니다.
- 이 최적화는 static generation 중에도 적용됩니다.
클라이언트에서 캐시는 전체 페이지가 다시 로드되기 전 세션 기간 동안 지속 됩니다.(여러 클라이언트 측의 재 렌더링이 포함될 수 있어요)
Good to know
- POST 요청은 자동으로 중복 제거가 되지 않습니다. 캐싱에 대해 자세히 알아보세요!
- fetch를 사용할 수 없는 경우에는 React는 요청 기간 동안 데이터를 수동으로 캐싱할 수 있는 캐시 함수를 제공해줍니다.
Static and Dynamic Data Fetches
데이터에는 정적 데이터와 동적 데이터 두가지 유형이 있습니다.
정적 데이터는 자주 변경되지 않는 데이터를 뜻합니다. (예컨대 블로그 게시물이 있습니다.)
동적 데이터는 자주 변경되거나 사용자에 따라 달라질 수 있는 데이터를 뜻합니다(장바구니 목록이 있습니다.)
기본적으로 Next.js는 정적 가져오기를 자동으로 수행합니다.
즉 빌드 시점에 데이터를 가져와서 캐싱한 후 각 요청에 재사용합니다.
개발자는 정적 데이터의 캐시 및 재검증 방법을 제어할 수 있습니다.
정적 데이터를 사용하면 두가지 이점이 있습니다.
1. 요청횟수를 최소화하여 데이터베이스의 부하를 줄일 수 있습니다.
2. 데이터는 자동으로 캐싱되어 로딩 성능이 향상됩니다.
하지만 데이터가 사용자에 맞게 맞춤화되거나 항상 최신 데이터를 가져오려는 경우에는 요청을 동적으로 표시하고 캐싱 없이 각 요청에서 그때그때 데이터를 가져올 수 있습니다.
정적 및 동적 데이터 가져오기를 수행하는 방법을 알아보세요!
Caching Data
캐싱은 데이터를 특정 위치(콘텐츠 전송 네트워크 등)에 저장하는 프로세스이므로 요청할 때마다 원본 소스에서 다시 가져올 필요가 없습니다.
Next.js Cache는 전 세계에 배포할 수 있는 영구 HTTP 캐시입니다.
즉 캐시는 자동으로 확장되고 플랫폼(vercel 등)에 따라 여러 지역에 걸쳐 공유될 수 있습니다.
Next.js는 fetch()함수의 옵션 객체를 확장하는 것을 통하여 서버의 각 요청이 자체적인 영구 캣이 동작을 설정할 수 있도록 합니다.
컴포넌트 수준 데이터 가져오기와 함께 이를 통해 데이터가 사용되는 애플리케이션 코드 내에서 직접 캐싱을 구성할 수 있습니다.
서버 렌더링 중 Next.js가 fetch를 발견하면 캐시를 확인하여 캐싱해둔 데이터가 있는지 확인합니다.
캐싱해둔 데이터가 있는 경우 캐시된 데이터를 반환합니다.
그렇지 않은 경우에는 향후의 요청을 위해 데이터를 가져와 저장합니다.
Good To Know
fetch를 사용할 수 없는 경우 React는 요청 기간동안 데이터를 수동으로 캐싱할 수 있는 캐시 함수를 제공합니다.
Revalidating Data
Revalidating(재검증) 은 캐시를 지우고 최신 데이터를 다시 가져오는 프로세스입니다.
데이터가 변경되어 전체 애플리케이션을 다시 빌드하지 않고도 애플리케이션에 최신 버전이 표시되도록 하려는 경우에 유용하게 사용할 수 있습니다.
Next.js는 두가지 유형의 Revalidation을 제공합니다.
-Background : 특정 시간 간격으로 데이터를 재검증 합니다.
-on-demand : 업데이트가 있을 때마다 데이터의 유효성을 재검증합니다.
Streaming and Suspense
Streaming과 Suspense는 UI의 렌더링된 단위를 점진적으로 렌더링하고 클라이언트에 점진적으로 스트리밍할 수 있는 리액트의 새로운 기능입니다.
서버 컴포넌트와 중첩 레이아웃을 사용하면 특별히 데이터가 필요하지 않은 페이지의 일부를 즉시 렌더링하고 데이터를 불러오는 페이지의 일부에 대해 로딩 상태를 표시할 수 있습니다.
즉 사용자는 페이지 전체가 로드될 때 까지 기다렸다가 페이지와 상호 작용을 시작할 수 있습니다.
'Next.js Beta Docs 번역' 카테고리의 다른 글
| [Data Fetching] (6) ErrorHandling Next.js Beta Docs (0) | 2023.05.03 |
|---|---|
| [Data Fetching] (5) LoadingUI Next.js Beta Docs (0) | 2023.05.02 |
| [Data Fetching] (4) Linking and Navigating Next.js Beta Docs (0) | 2023.05.01 |
| [Data Fetching] (3) Pages and Layouts Next.js Beta Docs (0) | 2023.05.01 |
| [Data Fetching] (2) Data Fetching Next.js Beta Docs (0) | 2023.05.01 |
