서버에서 데이터 가져오기
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
'nextjs > next 14 공식 문서 부시기' 카테고리의 다른 글
[next 14 공식문서 부시기] 4.2 Client Components (0) | 2024.02.29 |
---|---|
[next 14 공식문서 부시기] 4.1 Server Components (0) | 2024.02.24 |
[next 14 공식문서 부시기] 3.2 Server Actions 활용 (0) | 2024.02.16 |
[next 14 공식문서 부시기] 3.1 fetch 를 활용한 데이터 요청과 캐싱 및 재검증 과정 (0) | 2024.02.08 |
[next 14 공식문서 부시기] 2.9 Intercepting Routes(경로 가로채기) (0) | 2024.02.07 |