Static Generation / Server-side Rendering

Next.js는 React의 서버 사이드 렌더링 프레임워크로, Static Generation(정적 생성)과 Server-side Rendering(서버 사이드 렌더링, SSR)이라는 두 가지 주요 렌더링 방식을 제공합니다.

각각의 방식은 퍼포먼스, SEO, 사용자 경험 측면에서 장단점이 존재하며, 어떤 방식을 선택하느냐에 따라 아키텍처와 구현 방식이 크게 달라질 수 있습니다. 

 

Static Generation (정적 생성)

정적 생성은 빌드 타임에 HTML 파일을 생성하는 방식입니다.

페이지는 getStaticProps 또는 getStaticPaths와 함께 사전에 렌더링되며, 요청 시 서버는 이미 생성된 HTML을 단순히 서빙합니다.

예시 

// pages/posts/[id].tsx
import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';

interface Post {
  id: string;
  title: string;
  content: string;
}

export const getStaticPaths: GetStaticPaths = async () => {
  const res = await fetch('https://myapi.com/posts');
  const posts: Post[] = await res.json();

  const paths = posts.map(post => ({
    params: { id: post.id },
  }));

  return { paths, fallback: false };
};

export const getStaticProps: GetStaticProps<{ post: Post }> = async (context) => {
  const { id } = context.params as { id: string };
  const res = await fetch(`https://myapi.com/posts/${id}`);
  const post: Post = await res.json();

  return { props: { post } };
};

export default function PostPage({ post }: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

• 퍼포먼스 최상: 정적 파일이 CDN에 캐시되어 빠르게 응답 가능
• 빌드 타임 데이터: 요청 시점에 데이터를 업데이트할 수 없음 (단, ISR로 보완 가능)
• CDN 친화적

 

 

---

Server-side Rendering (SSR)

SSR은 요청 시점에 HTML을 생성하여 클라이언트에 전달하는 방식입니다.

사용자마다 다른 데이터를 제공해야 할 경우에 유용합니다.

예시

// pages/profile.tsx
import { GetServerSideProps, InferGetServerSidePropsType } from 'next';

interface Profile {
  username: string;
  age: number;
}

export const getServerSideProps: GetServerSideProps<{ profile: Profile }> = async (context) => {
  const token = context.req.cookies.token;
  const res = await fetch('https://myapi.com/profile', {
    headers: { Authorization: `Bearer ${token}` },
  });

  const profile: Profile = await res.json();

  return { props: { profile } };
};

export default function ProfilePage({ profile }: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return (
    <div>
      <h1>Welcome, {profile.username}</h1>
      <p>Age: {profile.age}</p>
    </div>
  );
}

 

• 요청마다 최신 데이터 제공
• 퍼포먼스 상대적으로 느릴 수 있음 (서버에서 HTML 생성 후 응답)
• 개별 사용자 맞춤형 콘텐츠 제공 가능

 

Static vs SSR 

항목	Static Generation	Server-side Rendering
렌더링 시점	빌드 타임	요청 시점
퍼포먼스	매우 빠름 (CDN 캐시)	느릴 수 있음 (서버 요청 필요)
SEO	좋음	좋음
사용자별 맞춤	어려움 (ISR로 일부 가능)	매우 쉬움
사용성	블로그, 마케팅 페이지	대시보드, 로그인 기반 페이지

---

ISR (Incremental Static Regeneration) 

Next.js는 revalidate 옵션을 통해 빌드 후에도 일정 주기로 페이지를 재생성할 수 있게합니다.

export const getStaticProps: GetStaticProps = async () => {
  const res = await fetch('https://myapi.com/data');
  const data = await res.json();

  return {
    props: { data },
    revalidate: 60, // 60초마다 갱신
  };
};

ISR은 정적 생성과 SSR의 장점을 절충한 하이브리드 전략입니다.

 

 

---

 

• 변경이 거의 없는 데이터는 Static Generation
• 로그인 상태나 실시간 데이터를 요하는 페이지는 SSR
• Static으로 처리하되, 일정 주기로 데이터를 최신화하고 싶다면 ISR

Next.js에서는 프로젝트 요구사항과 트래픽 패턴, 사용자 경험을 고려하여 최적의 렌더링 전략을 선택하는 것이 중요합니다.