IT용어

SSR (Server-Side Rendering)

미니임 2026. 2. 27. 21:47

 

1. 개요 (Overview)

**Server-Side Rendering (SSR)**은 웹 페이지의 내용을 서버에서 미리 렌더링하여 완전한 HTML 문서를 클라이언트로 전송하는 방식입니다. 사용자가 페이지를 요청할 때마다 서버는 필요한 데이터를 가져와 HTML을 동적으로 생성하고, 브라우저는 전달받은 HTML을 즉시 화면에 출력합니다.

전통적인 웹 방식(PHP, JSP 등)과 유사하지만, 현대적인 SSR은 리액트(React)나 뷰(Vue) 같은 라이브러리와 결합하여 Universal Rendering(Isomorphic) 형태로 발전했습니다.

2. SSR의 작동 원리 (Workflow)

  1. User Request: 사용자가 브라우저에 URL을 입력합니다.
  2. Server-Side Rendering: 서버는 해당 페이지에 필요한 데이터를 API나 DB에서 조회합니다.
  3. HTML Generation: 서버는 가져온 데이터를 바탕으로 HTML 내용을 구성합니다.
  4. Response: 서버는 완성된 HTML 스트링을 브라우저로 보냅니다.
  5. FCP (First Contentful Paint): 브라우저는 HTML을 즉시 그려 화면에 내용을 보여줍니다. (사용자는 이때 콘텐츠를 볼 수 있지만 상호작용은 불가능합니다.)
  6. Hydration: 브라우저가 JavaScript 파일을 다운로드하고 실행하여 기존 HTML에 이벤트 리스너를 결합합니다.
  7. Interactive State: 이제 사용자가 버튼 클릭 등 상호작용을 할 수 있게 됩니다.

3. 주요 기술 스택 (Tech Stack)

프레임워크 (Frameworks)

  • Next.js (React 기반): 가장 대중적인 SSR 프레임워크로, getServerSideProps 등을 통해 강력한 SSR 기능을 제공합니다.
  • Nuxt.js (Vue 기반): Vue.js 생태계에서 SSR을 표준으로 제공하는 프레임워크입니다.
  • SvelteKit (Svelte 기반): 최신 트렌드인 Svelte를 이용한 고성능 SSR 프레임워크입니다.
  • Remix: 데이터 로딩과 웹 표준에 집중한 차세대 React SSR 프레임워크입니다.

런타임 및 서버 (Runtime & Backend)

  • Node.js: SSR 로직을 실행하기 위한 핵심 런타임입니다.
  • Express / Fastify: Node.js 위에서 SSR 렌더러를 호스팅하기 위한 웹 서버 프레임워크입니다.

4. 특징 및 장단점 (Characteristics)

장점 (Pros)

  1. 우수한 SEO (검색 엔진 최적화): 검색 엔진 봇들이 완성된 HTML을 읽을 수 있어 검색 노출에 유리합니다.
  2. 빠른 초기 로딩 (FCP): 빈 페이지가 아닌 내용이 채워진 HTML이 오기 때문에 사용자가 체감하는 초기 로딩 속도가 빠릅니다.
  3. 성능 최적화: 저사양 기기에서 브라우저가 수행해야 할 연산(JavaScript 실행) 부담을 서버가 분담합니다.

단점 (Cons)

  1. 서버 부하 증가: 모든 요청마다 서버에서 렌더링 과정을 거쳐야 하므로 트래픽이 몰릴 경우 CPU 사용량이 증가합니다.
  2. TBT (Total Blocking Time): 화면은 보이지만 JavaScript가 실행되기 전까지는 상호작용이 되지 않는 '어색한 시간(Hydration gap)'이 발생할 수 있습니다.
  3. 개발 복잡도: 서버와 클라이언트 환경 모두에서 코드가 동작해야 하므로 window나 document 객체 사용에 주의해야 합니다.

5. SSR vs CSR 비교

구분SSR (Server-Side Rendering)CSR (Client-Side Rendering)

렌더링 주체 서버 브라우저 (클라이언트)
초기 로딩 속도 빠름 상대적으로 느림
페이지 이동 매번 서버 요청 (깜빡임 발생 가능) 빠름 (JS로 내부 교체)
SEO 매우 좋음 추가 설정(Prerender 등) 필요
서버 자원 많이 사용함 적게 사용함

6. 주요 활용 사례 (Use Cases)

  1. 이커머스(E-commerce) 플랫폼: 제품 상세 페이지가 검색 엔진에 잘 노출되어야 하고, 가격/재고 상태가 실시간으로 반영되어야 할 때 필수적입니다.
  2. 뉴스 및 미디어 사이트: 콘텐츠 위주의 사이트로서 빠른 기사 열람이 중요하고 공유 시 메타 태그(OG Tag)가 정확히 보여야 하는 경우입니다.
  3. 마케팅 페이지 및 블로그: 불특정 다수에게 검색 결과로 노출되어야 하는 페이지에 적합합니다.
  4. 사용자 개인화가 필요한 페이지: 로그인 상태에 따라 초기 화면이 완전히 달라져야 하는 대시보드 등에 활용됩니다.

7. 최신 트렌드: 하이브리드 전략

최근에는 단순한 SSR을 넘어 상황에 맞게 렌더링 방식을 섞어 쓰는 전략이 대세입니다.

  • SSG (Static Site Generation): 변하지 않는 페이지는 빌드 시 미리 만들어 둠.
  • ISR (Incremental Static Regeneration): 정적 페이지를 일정 주기마다 서버에서 갱신함.
  • Streaming SSR: 서버에서 HTML을 한꺼번에 보내지 않고 조금씩 쪼개서 스트리밍하여 LCP(Largest Contentful Paint)를 개선함.
반응형