[next 14 공식문서 부시기] 3.3 데이터 가져오기 패턴

서버에서 데이터 가져오기

Server Components 를 사용하여 서버에서 데이터를 가져오는 것을 추천하며 다음과 같은 장점을 가지고 있습니다.

• 백엔드 데이터 리소스(예: 데이터베이스)에 직접 액세스할 수 있습니다.
• 액세스 토큰 및 API 키와 같은 민감한 정보가 클라이언트에 노출되는 것을 방지하여 애플리케이션을 더욱 안전하게 유지가능
• 동일한 환경에서 data fetch 및 render 과정이 통합 되므로 클라이언트와 서버 간의 불필요한 통신은 줄고 물론 브라우저의 메인스레드 작업도 감소합니다.
• 한 요청에 대한 다수
• 클라이언트에서 여러 개별 요청을 수행하는 대신 단일 왕복으로 여러 데이터 가져오기를 수행합니다.

Fetching data where it's needed

 

트리의 여러 components 에서 동일한 데이터(예: 현재 사용자)를 사용해야 하는 경우 전역적으로 데이터를 가져오거나 구성 요소 간에 props 을 전달할 필요가 없습니다.

 

동일한 데이터에 대해 여러 번 요청하는 경우 성능에 미치는 영향을 걱정하지 않고 데이터가 필요한 components 에서 fetch 또는 React cache 를 사용할 수 있습니다. fetch 요청이 자동으로 메모되기 때문에 가능합니다

병렬 및 순차적으로 데이터 가져오기

React components 내에서 데이터를 가져올 때 병렬 및 순차적으로 데이터를 가져오는 두 가지 패턴이 존재합니다.

순차적으로 데이터 가져오기

중첩된 components 가 있고 각 components에서 자체적으로 데이터를 요청하는 데이터 가져오기는 순차적으로 발생합니다.(의존적인 관계이므로)

병렬적으로 데이터 가져오기

components 외부에서 요청을 정의한 다음 components 내부에서 두 요청을 병렬로 시작하여 시간이 절약되지만 두 Promise가 모두 해결될 때까지 사용자는 렌더링된 결과를 볼 수 없습니다.

데이터 사전로드

preload 패턴을 사용한다면 폭포수를 방지할 수 있습니다. 선택적으로 preload 기능을 활용해 병렬 데이터 가져오기(parallel data fetching)를 더욱 최적화할 수 있습니다.

 

import { getItem } from '@/utils/get-item'

export const preload = (id: string) => {
  // void evaluates the given expression and returns undefined
  // https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/void
  void getItem(id)
}
export default async function Item({ id }: { id: string }) {
  const result = await getItem(id)
  // ...
}

preload 함수안에서 비동기적으로 데이터를 가져오는 getItem 함수를 void 연산자와 함께 호출함으로써 반환값을 기다리지 않고 실행되어 실질적으로 랜더링과 비동기 데이터 가져오기 과정이 병렬적으로 함께 진행됩니다.

cache 기능, preload 패턴 및 server-only 패키지 결합 패턴

cache 기능, preload 패턴 및 server-only 패키지를 결합하여 앱 전체에서 사용할 수 있는 데이터 가져오기 유틸리티를 만들 수 있습니다.

 

위 방식을 사용하면 데이터를 가져오고 응답을 캐시하며 이 데이터 가져오기가 서버에서만 발생하도록 보장할 수 있습니다.

 

// utils/get-item.ts
import { cache } from 'react'
import 'server-only'

export const preload = (id: string) => {
  void getItem(id)
}

export const getItem = cache(async (id: string) => {
  // ...
})

---

참고

https://nextjs.org/docs/app/building-your-application/data-fetching/patterns