Next.js N+1 문제 DataLoader로 해결하는 가장 확실한 방법

import { type Post, getPosts, getUser } from "./fetcher";

export const dynamic = "force-dynamic";

export default async function Page() {
  const { posts } = await getPosts();

  return (
    <>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <PostItem post={post} />
          </li>
        ))}
      </ul>
    </>
  );
}

async function PostItem({ post }: { post: Post }) {
  const user = await getUser(post.userId);

  return (
    <>
      <h3>{post.title}</h3>
      <dl>
        <dt>author</dt>
        <dd>{user?.username ?? "[unknown author]"}</dd>
      </dl>
      <p>{post.body}</p>
    </>
  );
}

fetcher.ts

export async function getPosts() {
  const res = await fetch("https://dummyjson.com/posts");
  return (await res.json()) as {
    posts: Post[];
  };
}

// ... Post, User 타입 정의

export async function getUser(id: number) {
  const res = await fetch(`https://dummyjson.com/users/${id}`);
  return (await res.json()) as User;
}

이 페이지가 렌더링될 때 getPosts()가 1번, 그리고 게시물 개수(N)만큼 getUser()가 N번 호출되는데요.

결과적으로 아래와 같이 총 ‘N+1’번의 데이터 페칭이 발생하게 됩니다.

https://dummyjson.com/posts

https://dummyjson.com/users/1

https://dummyjson.com/users/2

https://dummyjson.com/users/3

…

DataLoader를 이용한 해결책
#

이런 N+1 문제를 피하기 위해 API 쪽에서는 보통 https://dummyjson.com/users/?id=1&id=2&id=3처럼 여러 ID를 한 번에 조회하는 기능을 만들어두거든요.

Next.js에서는 바로 이 API와 ‘데이터로더(DataLoader)’ 라이브러리를 함께 사용해서 N+1 문제를 해결할 수 있습니다.

‘데이터로더’는 원래 ‘그래프큐엘(GraphQL)’ 서버에서 널리 쓰이는 라이브러리로, 데이터 요청을 모아서 한 번에 처리(배치 처리)하고 캐싱하는 기능을 제공하는데요.

아주 짧은 시간 동안 여러 번 호출된 dataLoader.load(id)를 하나로 모아, ID 배열을 배치 함수에 넘겨주는 방식으로 동작합니다.

Next.js에서 DataLoader 사용하기
#

서버 컴포넌트들은 서로 병렬로 렌더링되기 때문에, 각 컴포넌트에서 await myLoader.load(id)를 호출해도 데이터로더가 이 요청들을 똑똑하게 모아서 한 번에 처리해주는데요.

앞서 보여드린 예시 코드의 getUser() 함수를 데이터로더를 사용해서 다시 작성해 보겠습니다.

fetcher.ts (개선된 버전)

import DataLoader from "dataloader";
import * as React from "react";

// ...

const getUserLoader = React.cache(
  () => new DataLoader((keys: readonly number[]) => batchGetUser(keys)),
);

export async function getUser(id: number) {
  const userLoader = getUserLoader();
  return userLoader.load(id);
}

async function batchGetUser(keys: readonly number[]) {
  // 실제 dummyjson은 이 기능을 지원하지 않지만, 예시를 위한 코드입니다.
  const res = await fetch(
    `https://dummyjson.com/users/?${keys.map((key) => `id=${key}`).join("&")}`,
  );
  const { users } = (await res.json()) as { users: User[] };
  return users;
}

// ...