[Next.js] 동적 렌더링 최적화하기

Next.js를 사용하면 서버에서 가변 값을 처리해 동적으로 페이지를 렌더링할 수 있다. 예를 들어, 아래와 같은 요구사항이 있다고 가정해보자.

1. 클라이언트에게 템플릿 변경이 가능한 페이지를 제공한다.
2. 클라이언트로부터 템플릿 변경 요청이 들어오면, admin 서버를 통해 템플릿 ID를 갱신한다.
3. 변경된 템플릿 ID를 기반으로 해당 템플릿으로 페이지를 렌더링한다.

React로 개발했다면, 일반적으로 클라이언트에서 admin 서버의 API를 호출해 변경된 ID 값을 가져오고, 그 ID에 매핑된 컴포넌트를 렌더링했을 것이다. 하지만 이런 방식은 클라이언트가 모든 템플릿의 리소스를 로드해야 한다는 단점이 있다. 템플릿 종류가 많아질수록 리소스 크기가 비효율적으로 커지는 문제가 발생할 수 있다.

Next.js를 사용하면 이런 문제를 효과적으로 해결할 수 있다. 서버 사이드 렌더링(SSR)을 활용하면 서버에서 필요한 템플릿을 결정한 뒤 클라이언트에 해당 템플릿의 리소스만 전달할 수 있다. 이렇게 하면 불필요한 리소스 로드를 방지하고 최적화된 렌더링을 구현할 수 있다.

다음은 내가 작성했던 코드이다.

import { notFound } from 'next/navigation';

import { templateMap } from '@/configs/templates';
import { SignageInfo } from '@/types/common';

export default async function Page({ params }: { params: { uuid: string } }) {
  // admin 서버에서 템플릿 정보를 fetch
  const res = await fetch('URL 경로', { cache: 'no-store' });
  if (!res.ok) {
    return notFound();
  }

  // 템플릿 ID를 기반으로 적합한 템플릿 컴포넌트 선택
  const data: SignageInfo = await res.json();
  const SelectedTemplate = templateMap[data.typeId];

  // 선택한 템플릿만 렌더링
  return <SelectedTemplate />;
}

코드 설명

1. admin 서버에서 템플릿 정보 가져오기
   fetch를 통해 admin 서버에서 템플릿 정보를 받아온다. 이 작업은 서버에서 실행되기 때문에 클라이언트는 API 호출의 부담을 가지지 않는다.
2. 템플릿 ID 기반 컴포넌트 매핑
   API 응답으로 받은 템플릿 ID를 templateMap에 매핑하여 적합한 템플릿 컴포넌트를 선택한다.
3. 필요한 템플릿만 렌더링
   선택된 템플릿만 클라이언트로 전달되므로, 다른 템플릿에 대한 리소스는 로드되지 않는다.

결론

극단적인 예로, 템플릿의 종류가 10,000개라고 가정해 보자. 이 경우, 클라이언트로 모든 템플릿을 전송한 뒤 그중 하나를 선택해 렌더링하도록 한다면 엄청난 양의 리소스를 불필요하게 로드하게 된다. 반면, Next.js를 사용하면 서버에서 필요한 템플릿만 사전 렌더링해 클라이언트로 전달할 수 있다. 이는 Next.js의 서버 사이드 렌더링(SSR)이 가진 강력한 장점으로, 리소스 사용을 최소화하고 성능을 극대화할 수 있는 핵심 이유다.