랜더링(Rendering)

우선 랜더링(Rendering)은 웹에서 브라우저 화면에 표시하기 위해 HTML, CSS, JavaScript 등을 사용하여 컴퓨터 그래픽으로 변환하는 과정이다. 웹 페이지가 사용자의 브라우저에 의해 요청되면, 웹 서버는 해당 페이지의 파일을 브라우저로 전송한다. 이러한 과정을 일반적으로 랜더링이라 한다.

이번에 Next js를 공부하면서 정적 생성 페이지과 서버 사이드 랜더링의 차이에 대해 궁금하여 공부하고 기록을 남긴다.

공식 홈페이지 설명 : https://nextjs.org/learn/basics/data-fetching/two-forms

정적 생성 페이지

공식 홈페이지 : https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation

정적 생성 페이지(Static Generation)란, 사전에 페이지를 생성하여 빌드 시점에서 해당 페이지의 HTML을 생성하는 방식이다. 그래서 Next.js는 정적 생성을 사용하여 미리 페이지를 렌더링하고, 이후 클라이언트 요청 시에는 사전에 생성된 HTML을 제공하는 방식이 존재한다.

정적 생성은 데이터가 변경되지 않거나 변경 주기가 긴 페이지에 적합합니다. 예를 들면, 블로그 글, 제품 목록 등의 경우가 사용에 좋다.

사용 예시

import React from 'react';

export default function BlogPost({ title, content }) {
  return (
    <div>
      <h1>{title}</h1>
      <p>{content}</p>
    </div>
  );
}

export async function getStaticPaths() {
  // 미리 정적으로 생성할 페이지 경로들을 반환.
  return {
    paths: [
      { params: { slug: 'blog-post-1' } },
      { params: { slug: 'blog-post-2' } },
    ],
    fallback: false, // 존재하지 않는 경로는 404 페이지 표시
  };
}

export async function getStaticProps({ params }) {
  // params.slug를 기반으로 필요한 데이터를 가져옴.
  // 이 데이터는 페이지가 정적으로 생성될 때 빌드 시점에 호출.
  const { slug } = params;
  const response = await fetch(`https://api.example.com/blog/${slug}`);
  const data = await response.json();

  return {
    props: {
      title: data.title,
      content: data.content,
    },
    revalidate: 60, // 60초마다 정적 페이지를 재생성.
  };
}

이 코드는 정적 생성 페이지 예시다. 블로그에 글을 포스팅하면 정적 생성 페이지를 만든다. 크게 함수 2개를 보면 된다.

첫 번째 함수 getStaticPaths 함수는 미리 정적으로 생성할 페이지 경로들을 반환한다. 코드에선 blog-post-1과 blog-post-2의 경로를 정적으로 생성한다.

두 번째 함수 getStaticProps 함수는 경로에 해당하는 데이터를 가져와 페이지가 정적으로 생성될 때 빌드 시점에 호출된다. 코드에서는 slug를 기반으로 API에서 해당 블로그 포스트의 title과 content를 가져온다. 여기서 revalidate 옵션은 정적 페이지를 재생성하는 주기를 설정한다.

서버 사이드 랜더링

공식 홈페이지 : https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering

서버 사이드 랜더링, SSR(Server-side Rendering)은 서버 측에서 페이지를 동적으로 렌더링하는 방식이다. 클라이언트 요청마다 서버에서 페이지를 렌더링하고 초기 데이터를 가져와 HTML을 생성한 후 클라이언트에 전달한다.

매 요청마다 페이지를 동적으로 생성하기 때문에 항상 최신 데이터를 제공할 수 있다. 이는 데이터가 자주 변경되거나 개인화된 콘텐츠가 있는 경우에 유용하다. 예를 들면 은행 로그인이 될 수 있다.

사용예시

import React from 'react';

export default function UserProfile({ user }) {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

export async function getServerSideProps({ params }) {
  // params.id를 기반으로 필요한 데이터를 서버 측에서 가져옴.
  const { id } = params;
  const response = await fetch(`https://api.example.com/users/${id}`);
  const data = await response.json();

  return {
    props: {
      user: data,
    },
  };
}

서버 사이드 랜더링 코드의 예시다. 여기서는 하나의 함수를 중점으로 보면 된다.

getServerSideProps 함수는 클라이언트 요청마다 서버에서 호출되어 필요한 데이터를 가져온다. 위 코드에서는 id를 기반으로 API에서 해당 사용자의 데이터를 가져옵니다. 그리고 이 데이터를 props 객체로 반환했다.

정리하기

이번에는 정적 생성 페이지와 서버 사이드 랜더링에 대해 공부했다. 서버 사이드 랜더링은 Next js를 공부하면서 계속해서 나오는 개념이라 어느 정도 이해는 하고 있었다. 그러나 정적 생성 페이지라는 개념이 등장하고 뭐가 다른 건지 모르겠어서 이번 기회에 확실하게 정리를 했다.

핵심은 미리 준비하냐 하지 않느냐의 차이이다. 정적 생성 페이지는 미리 호출될 페이지를 준비하고 SSR은 사용자에 호출에 따라 서버에서 호출해준다고 이해하고 있으면 좋을 거 같다.