개념 설명
Next.js에서 리퀘스트 메모이제이션은 한 번의 서버 렌더링 사이클 동안 발생하는 동일한 API 요청을 최적화하는 기술. 서버 컴포넌트 구조에서 여러 컴포넌트가 동일한 데이터를 필요로 할 때, 네트워크 중복 호출을 방지하고 성능을 향상시키는 것이 핵심
- 동작 원리: 동일한 URL과 옵션을 가진
fetch요청이 들어오면, 첫 번째 요청의 결과를 메모리에 저장하고 이후 요청에는 저장된 값을 반환 - 생명 주기: 오직 하나의 페이지를 렌더링하는 동안만 유효. 브라우저에서 서버로 보낸 하나의 요청이 완료되어 응답이 전송되면 메모리에서 즉시 삭제됨
- 차이점: 서버 가동 중 영구적으로 보관되는 '데이터 캐시(Data Cache)'와 달리, 이는 일시적인 렌더링 최적화 도구임
사용 상황 예시
서버 컴포넌트 도입 이후, 부모 컴포넌트에서 데이터를 fetch하여 자식들에게 Props로 전달하는 방식(Prop Drilling)이 비효율적으로 변모. 각 컴포넌트가 필요한 데이터를 직접 요청하는 구조가 권장됨
- 사용자 정보 조회: 네비게이션 바, 사이드바, 프로필 페이지 등 여러 곳에서 동일한
getUser()함수를 호출할 때 사용 - 환경 설정 로드: 사이트의 메타데이터나 설정 정보를 여러 컴포넌트에서 동시 다발적으로 참조하는 상황에 적합
- 데이터 일관성 유지: 동일 렌더링 트리 내에서 모든 컴포넌트가 정확히 같은 시점의 데이터를 보장받아야 할 때 필수적
기본 문법
Next.js의 확장된 fetch API를 사용하면 별도 설정 없이 자동 적용. fetch가 아닌 데이터베이스 호출이나 외부 라이브러리(Axios 등)를 사용할 경우 React의 cache 함수를 별도로 활용해야 함
// 1. fetch를 이용한 자동 메모이제이션
async function getItem(id) {
const res = await fetch(`https://api.example.com/item/${id}`)
return res.json()
}
// 2. React cache를 이용한 수동 메모이제이션 (DB 호출 등)
import { cache } from 'react'
import db from './database'
export const getItemFromDB = cache(async (id) => {
const item = await db.item.findUnique({ id })
return item
})자주 하는 실수
- HTTP 메서드 오해: 기본적으로
GET요청에만 적용되며,POST,DELETE등 서버 상태를 변경하는 요청은 메모이제이션 대상에서 제외됨 - 라이브러리 혼동: Axios나 기타 외부 HTTP 클라이언트는 Next.js의
fetch확장을 공유하지 않으므로 수동으로cache처리를 하지 않으면 중복 요청이 발생함 - 유효 기간 착각: 페이지 리로드나 다른 사용자의 요청 시에도 유지될 것이라 기대하지만, 이는 오직 현재 렌더링 프로세스 내에서만 유효함
핵심 요약
- 렌더링 사이클 내 동일한 GET 요청의 중복 네트워크 비용 절감
- Props 전달 없이 각 컴포넌트에서 독립적인 데이터 페칭 환경 제공
- 렌더링 종료 시 즉시 소멸하며 영구 보관되는 데이터 캐시와 구별 필요
출처: 한 입 크기로 잘라먹는 Next.js(v15)
