SSR(Server Side Rendering)

2025-04-10 TIL - SSR(Server Side Rendering)

SSR(Server Side Rendering)

SSR(Server Side Rendering) 방식은 서버에서 완성된 정적 HTML을 클라이언트에 내려주는 방식이다. 클라이언트는 해당 HTML을 파싱만 하여 화면을 빠르게 렌더링할 수 있다.

반면, CSR(Client Side Rendering) 방식은 브라우저가 서버로부터 비어 있는 뼈대 HTML을 받아온 후, 필요한 자바스크립트 번들을 다운로드하고 실행하여 화면을 동적으로 구성하는 방식이다.

Next.js에서는 SSR 방식으로 정적인 HTML을 먼저 내려주어 초기 화면을 빠르게 렌더한 후, hydration을 통해 이벤트 리스너 부착 등의 자바스크립트 작업을 수행하여 화면을 동적으로 전환한다.

---

SSR의 장점

• SEO(검색 엔진 최적화)에 유리하다. 정적인 HTML이 먼저 제공되므로 검색 엔진 크롤러가 콘텐츠를 쉽게 수집할 수 있다.

• 초기 로딩 속도가 빠르다. CSR처럼 번들을 다운로드하고 실행하는 과정 없이 화면을 바로 렌더링할 수 있기 때문이다.

• SEO와 초기 속도가 중요한 블로그, 커머스, 마케팅 페이지에 적합하다.

---

SSR의 단점

• 클라이언트 사이드 라우팅이 어렵다. 전통적인 SSR 방식에서는 매 페이지마다 서버 요청이 발생하므로, CSR에 비해 부드러운 전환 경험이 떨어질 수 있다.

• 서버 부하 증가. 요청마다 HTML을 서버에서 생성해야 하므로, 방문자가 많을 경우 서버 비용이 증가할 수 있다.

• Next.js SSR의 한계

  1. hydration을 통해 화면이 동적으로 전환되기까지 시간이 걸린다.
     → TTV(Time to View)와 TTI(Time to Interactive) 사이에 격차가 생기고, 그 사이 사용자 상호작용이 무시될 수 있다.

  2. 클라이언트/서버 사이드 로직을 분리해야 하므로 구현 복잡도가 증가한다.

---

🚀 Next.js에서 SSR 구현 방법

1. Pages Router에서 getServerSideProps 사용

// pages/index.js
export async function getServerSideProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return { props: { data } };
}

export default function Home({ data }) {
  return <div>{data.title}</div>;
}

• 요청 시마다 서버에서 데이터를 받아 페이지를 렌더링

• 로그인 세션 기반 페이지, 실시간 데이터가 필요한 페이지 등에 유용

✅ 2. App Router에서 Server Component 기반 SSR

Next.js 13부터 도입된 App Router에서는 Server Component를 활용하여 SSR을 더욱 자연스럽게 구현할 수 있다.

// app/page.tsx
import { cookies } from "next/headers";

export default async function Page() {
  const token = cookies().get("token")?.value;
  const res = await fetch("https://api.example.com/data", {
    cache: "no-store",
  });
  const data = await res.json();

  return <div>{data.title}</div>;
}

• 컴포넌트 자체가 서버에서 실행되며 SSR을 수행

• getServerSideProps 없이도 서버사이드 렌더링이 가능함

• 쿠키, 헤더 등도 next/headers를 통해 쉽게 접근 가능

최신 트렌드에서는 App Router + Server Component 사용을 권장하며, getServerSideProps는 주로 Pages Router에서 유지보수용으로 사용됨.

🔍 SSR, CSR, SSG, ISR 비교표

렌더링 방식	HTML 생성 시점	특징	대표 사용처
CSR	클라이언트 실행 시	초기 로딩 느림, 빠른 페이지 전환	SPA, 대시보드
SSR	요청 시 서버에서	SEO 강점, 실시간 데이터	커머스, 마케팅
SSG	빌드 타임	빠르고 안정적, 자주 안 바뀌는 콘텐츠	블로그, 문서
ISR	백그라운드 재생성	실시간성과 성능 절충	Next.js 마케팅 페이지

📌 참고 자료

• [드림코딩] 서버사이드 렌더링 (개발자라면 상식으로 알고 있어야 하는 개념 정리 ⭐️)