Next.JS 렌더링 방식 정리(v12 & v13)

v13

컴포넌트 수준에서 렌더링 환경을 선택

📌 클라이언트 컴포넌트

클라이언트 컴포넌트를 사용하면 애플리케이션에 클라이언트 측 인터랙션을 추가할 수 있다.
서버에서 미리 렌더링 되고 클라이언트에서 hydrated 된다.
클라이언트 컴포넌트는 기존의 페이지 라우터의 컴포넌트가 항상 작동하던 방식이다.

작동방식

next.js가 빌드 중에 컴포넌트를 하나씩 확인하다가 클라이언트 컴포넌트를 만남
정적으로 만들 수 있는 부분을 확인 → 정적 HTML 프리렌더링
- 빌드 시에 클라이언트 컴포넌트도 프리렌더링 되기 때문에 내부의 코드가 실행된다.
HTML 전송 → JS 하이드레이션(해당 컴포넌트가 상호작용하기 위한 부분적인 코드)

📌 서버 컴포넌트

서버 컴포넌트를 사용하면 개발자가 서버 인프라를 더 잘 활용할 수 있다.

클라이언트의 JavaScript 번들 크기에 영향을 미쳤던 대규모 종속성을 서버에만 유지하여 성능을 개선할 수 있다.
JavaScript 번들 크기가 줄어 초기 페이지 로딩이 빨라진다.
추가 자바스크립트는 클라이언트 컴포넌트를 통해 애플리케이션에서 클라이언트 측 인터랙티브가 사용될 때만 추가된다.

캐싱 전략에 따라서 SSG, ISR, SSR로 나뉜다.

generateStaticParams(): SSG

export default async function DetailPage({ params: { slug } }: Props) {
  //todo: 서버 파일(데이터베이스)에 있는 제품 정보를 읽어와서 보여준다.
  const product = await getProduct(slug);
  if (!product) notFound();

  return (
    <>
      <h1>{product.name} 제품 설명 페이지</h1>
      <p>{product.name} 제품 설명</p>
      <Link href="/products">목록으로 이동</Link>
    </>
  );
}

export async function generateStaticParams() {
  //todo: 모든 제품의 페이지들을 미리 만들어 둔다.(SSG)
  const products = await getProducts();
  return products.map(({ id }) => ({ slug: id }));
}

revalidate: ISR

export const revalidate = 60; // revalidate this page every 60 seconds

서버 컴포넌트 fetch(): SSG, ISR, SSR

💡 fetch는 Web API지만 React 18 버전에서 서버 컴포넌트에서도 사용할 수 있도록 구현됐다.

  const res = await fetch("https://meowfacts.herokuapp.com", {
    next: { revalidate: 3 },
  });

3초마다 fetch

  const res = await fetch("https://meowfacts.herokuapp.com", {
    next: { revalidate: 0 },
  });

  const res = await fetch("https://meowfacts.herokuapp.com", {
      cache: "no-cache",
  });

요청 시 매번 fetch === SSR

📌 Fetching Data on the Server

가능하면 서버 컴포넌트에서 데이터를 가져오는 것이 좋습니다. 서버 컴포넌트는 항상 서버에서 데이터를 가져옵니다. 이렇게 하면 다음과 같이 할 수 있습니다:

백엔드 데이터 리소스(예: 데이터베이스)에 직접 액세스 할 수 있습니다.
액세스 토큰 및 API 키와 같은 민감한 정보가 클라이언트에 노출되는 것을 방지하여 애플리케이션을 더욱 안전하게 보호할 수 있습니다.
동일한 환경에서 데이터 가져오기 및 렌더링. 이렇게 하면 클라이언트와 서버 간의 주고받는 통신은 물론 클라이언트의 메인 스레드 작업도 줄어듭니다.
클라이언트에서 여러 번의 개별 요청 대신 한 번의 왕복으로 여러 데이터 가져오기를 수행합니다.
클라이언트-서버 워터폴 감소.
지역에 따라 데이터 가져오기를 데이터 소스와 더 가까운 곳에서 수행하여 지연 시간을 줄이고 성능을 개선할 수도 있습니다.

v12

v12에서 페이지 컴포넌트는 클라이언트 사이드에서 실행된다.
- 정적인 데이터를 모아서 프리렌더링 된 HTML 페이지는 만드는 것은 동일하다.
next.js에서 제공하는 props 생성 함수는 서버에서 실행된다.
- getStaticProps 함수를 사용하면 페이지 전체가 SSG로 동작한다.
- revalidate를 설정하면 ISR로 동작한다.

export async function getStaticProps() {
  const products = await getProducts();
  return { props: { products }, revalidate: 10  };
}

getServerSideProps 함수를 사용하면 페이지 전체가 SSR로 동작한다.

export async function getServerSideProps() {
  const products = await getProducts();
  return { props: { products } };
}

저작자표시 비영리 동일조건 (새창열림)

v13

📌 클라이언트 컴포넌트

작동방식

📌 서버 컴포넌트

서버 컴포넌트를 사용하면 개발자가 서버 인프라를 더 잘 활용할 수 있다.

캐싱 전략에 따라서 SSG, ISR, SSR로 나뉜다.

📌 Fetching Data on the Server

v12

티스토리툴바