[Next.js] 정적 생성(Static Generation)과 서버사이드 렌더링(Server-side Rendering)

정적 생성(Static Generation)과 서버사이드 렌더링(Server-side Rendering)

들어가며

• 사전 렌더링 방법인 정적 생성(Static Generation)과 서버사이드 렌더링(Server-side Rendering)에 대해 정리해본다.

 

정적 생성(Static Generation)

개념

• 웹 페이지를 미리 생성하여 HTML 파일로 저장하는 방식
• 웹 사이트의 빌드 단계에서 모든 페이지가 사전에 렌더링되며, 사용자가 페이지를 요청할 때 서버에서 미리 생성된 HTML 파일을 즉시 제공하는 방식
• 빠른 로딩 속도와 서버 부하 감소를 위해 사용
• SSG(Static Site Generation)이라고도 한다.

 

장점

• 페이지가 미리 생성되어 있으므로, 사용자는 빠르게 페이지를 볼 수 있다. (빠른 페이지 로딩)
• 요청 시마다 서버에서 페이지를 렌더링하지 않으므로 서버 부하가 적다. (서버 부하 감소)
• 서버 사이드에서 데이터를 처리하지 않기 때문에 보안 위협이 줄어든다. (보안성)

 

단점

• 페이지가 미리 생성되기 때문에 실시간 데이터 변경이 어렵다. (실시간 데이터 반영 어려움)
• 사이트의 페이지 수가 많을 경우 빌드 시간이 길어질 수 있다. (빌드 시간 증가)

 

적용 예시

• 블로그, 포트폴리오 사이트 등 자주 변경되지 않는 컨텐츠에 적합하다.

 

예시 코드

• @getStaticProps@ 함수를 사용하여 구현할 수 있다.
  • 이 함수는 빌드 타임에 데이터를 가져와 페이지를 생성한다.

// pages/index.js
import React from 'react';

const HomePage = ({ posts }) => {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

// 빌드 타임에 호출
export async function getStaticProps() {
  // 데이터를 가져오는 API 호출
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

export default HomePage;

 

⇒ 빌드 시 @getStaticProps@ 함수가 실행되어 외부 API에서 데이터를 가져와 정적 HTML 페이지를 생성한다.

 

서버사이드 렌더링 (Server-side Rendering)

개념

• 사용자가 페이지를 요청할 때마다 서버에서 HTML을 생성하여 반환하는 방식
• 각 요청에 대해 서버에서 페이지를 동적으로 생성한다.

 

장점

• 각 요청 시마다 페이지가 생성되므로, 최신 데이터를 제공할 수 있다. (최신 데이터 제공)
• 검색 엔진이 서버에서 생성된 HTML을 바로 크롤링할 수 있어 SEO에 유리하다. (SEO 최적화)

 

단점

• 각 요청마다 서버에서 페이지를 생성해야 하므로 서버 부하가 커질 수 있다. (서버 부하)
• 페이지 생성 시간이 추가되어 사용자에게 페이지가 제공되기까지의 시간이 길어질 수 있다. (로딩 시간 증가)

 

적용 예시

• 뉴스 사이트, 소셜 미디어 등 자주 변경되는 컨텐츠에 적합하다.

 

예시 코드

• @getServerSideProps@ 함수를 사용하여 구현할 수 있다.
  • 각 요청마다 서버에서 데이터를 가져와 페이지를 렌더링한다.

// pages/index.js
import React from 'react';

const HomePage = ({ posts }) => {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

// 각 요청마다 호출되어 서버사이드 렌더링
export async function getServerSideProps() {
  // 데이터를 가져오는 API 호출
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

export default HomePage;

 

⇒ 사용자가 페이지를 요청할 때마다 @getServerSideProps@ 함수가 실행되어 외부 API에서 데이터를 가져와 페이지를 동적으로 생성한다.

 

정리

ⓒ TOTHENEW

특징	정적 생성	서버사이드 렌더링
페이지 생성 시점	빌드 타임에 사전 생성	요청 시마다 동적 생성
로딩 속도	매우 빠름	상대적으로 느림
서버 부하	낮음	높음
최신 데이터 반영	어려움	쉬움
SEO	유리	유리

 

• 정적 생성과 서버사이드 렌더링은 각각의 장단점이 있으며, 웹 애플리케이션의 요구사항에 따라 적절한 방법을 선택해야 한다.
• 또한, 최근에는 두 방법을 혼합한 하이브리드 접근법도 많이 사용되고 있다.
  • 예를 들어, 기본적으로는 정적 생성을 사용하되, 특정 페이지에 대해서만 서버사이드 렌더링을 적용하는 방식을 사용한다.

 

참고 사이트

Server-side Rendering vs Static Site Generation in Next.js | TO THE NEW Blog