4관문. Request Memoization

관문 4 / 7

동일 렌더 사이클에서 중복 fetch가 자동으로 제거되는 원리를 확인하고 활용하라.

📖 이론 비급

Request Memoization: 중복 fetch 제거

Next.js는 서버 컴포넌트 렌더 사이클 동안 동일 URL의 fetch를 자동으로 중복 제거한다. 여러 컴포넌트가 같은 엔드포인트를 호출해도 실제 네트워크 요청은 한 번만 발생한다.

주의: 이는 단일 요청 사이클에만 적용된다. 요청 간 캐시는 cache 옵션으로 제어한다. cache: 'force-cache' (기본): 빌드 시 캐시 cache: 'no-store': 항상 최신 데이터 next: { revalidate: 60 }: 60초마다 갱신

⚔️ 수련 코드

// 두 컴포넌트가 같은 URL을 요청하지만 실제 fetch는 한 번만 발생한다
async function getUser(id) {
  // 같은 렌더 사이클에서 중복 호출은 자동으로 중복 제거됨
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`, {
    // TODO: 다양한 cache 옵션을 시도해보라
    // cache: 'force-cache' | 'no-store'
    // next: { revalidate: 60 }
  });
  console.log('fetch 호출됨!'); // 실제로 몇 번 출력되는지 확인
  return res.json();
}

async function UserName({ userId }) {
  const user = await getUser(userId);
  return <span>{user.name}</span>;
}

async function UserEmail({ userId }) {
  const user = await getUser(userId); // 중복 호출이지만 실제 fetch는 한 번
  return <span>{user.email}</span>;
}

export default async function UserCard({ userId = 1 }) {
  return (
    <div>
      <UserName userId={userId} />
      <UserEmail userId={userId} />
      {/* 콘솔에서 'fetch 호출됨!'이 몇 번 출력되는지 확인하라 */}
    </div>
  );
}

Open Sandbox