서버 사이드 렌더링(SSR): 현대 웹의 렌더링 전략

서론

웹 애플리케이션의 렌더링 방식은 사용자 경험과 성능에 직접적인 영향을 미칩니다. 서버 사이드 렌더링(SSR)은 전통적인 웹 개발 방식에서 시작하여 현대 웹 개발에서도 중요한 위치를 차지하고 있습니다. 본 글에서는 SSR의 개념, 장단점, 그리고 현대적인 구현 방법에 대해 설명하겠습니다.

---

렌더링 방식 비교

1. SSR (Server Side Rendering)

• 서버에서 완성된 HTML을 클라이언트에 전달
• 클라이언트는 HTML 파싱만 수행
• 초기 로딩 속도가 빠름
• SEO에 유리

2. CSR (Client Side Rendering)

• 서버는 빈 HTML 뼈대만 전달
• 클라이언트에서 JavaScript 번들 다운로드
• 동적으로 컨텐츠 생성
• 초기 로딩 속도가 상대적으로 느림

---

SSR의 장점

1. SEO 최적화

• 검색 엔진 크롤러가 컨텐츠를 쉽게 인식
• 초기 로딩 속도가 빠름
• 검색 엔진 순위 상승 가능성 증가

2. 사용자 경험

• 빠른 초기 페이지 로딩
• JavaScript 번들 다운로드/실행 불필요
• 즉각적인 컨텐츠 표시

3. 적합한 사용 사례

• 블로그
• 뉴스 사이트
• 전자상거래 플랫폼
• SEO가 중요한 웹사이트

---

SSR의 단점

1. 전통적인 SSR의 한계

• 클라이언트 사이드 라우팅 제한
• 페이지 전환 시 매끄러운 경험 제공 어려움
• 서버 부하 증가
• 서버 비용 상승 가능성

2. 현대 SSR의 도전 과제

• Hydration 과정에서의 지연
• TTV(Time To View)와 TTI(Time To Interactive) 간격
• 구현 복잡도 증가
• 서버/클라이언트 로직 분리 필요

---

Next.js를 활용한 현대적 SSR

1. Pages Router vs App Router

Next.js는 두 가지 라우팅 방식을 제공합니다:

Pages Router (기존 방식)

// pages/index.js
export async function getServerSideProps() {
  const data = await fetchData();
  return { props: { data } };
}

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

App Router (새로운 방식)

// app/page.js
async function getData() {
  const res = await fetch('https://api.example.com/data');
  return res.json();
}

export default async function Page() {
  const data = await getData();
  return <div>{data.title}</div>;
}

2. React Server Components (RSC)

App Router의 핵심 기능인 React Server Components는 다음과 같은 특징을 가집니다:

서버 컴포넌트의 장점

• 번들 크기 감소 (클라이언트로 JavaScript 전송 불필요)
• 데이터베이스 접근 및 API 호출이 서버에서 직접 가능
• 보안 강화 (API 키, 토큰 등이 클라이언트에 노출되지 않음)
• 캐싱 및 성능 최적화 용이

서버/클라이언트 컴포넌트 구분

// app/components/ServerComponent.js
export default function ServerComponent() {
  // 서버에서 실행
  const data = await fetchData();
  return <div>{data}</div>;
}

// app/components/ClientComponent.js
'use client'; // 클라이언트 컴포넌트 선언

export default function ClientComponent() {
  // 클라이언트에서 실행
  const [state, setState] = useState();
  return <button onClick={() => setState('clicked')}>Click me</button>;
}

3. Streaming과 Suspense

App Router는 Streaming과 Suspense를 통해 더 나은 사용자 경험을 제공합니다:

// app/page.js
import { Suspense } from 'react';

async function SlowComponent() {
  await new Promise(resolve => setTimeout(resolve, 2000));
  return <div>Slow Content</div>;
}

export default function Page() {
  return (
    <div>
      <h1>Fast Content</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <SlowComponent />
      </Suspense>
    </div>
  );
}

4. 성능 최적화 전략

• 정적 생성(Static Generation) 활용
• 증분 정적 재생성(ISR) 적용
• 이미지 최적화
• 코드 스플리팅
• Streaming과 Suspense 활용
• 서버 컴포넌트를 통한 번들 크기 최적화

---

SSR vs CSR: 선택 가이드

1. SSR 선택 시 고려사항

• SEO 중요도
• 초기 로딩 속도 요구사항
• 서버 리소스 가용성
• 개발 팀의 기술 스택

2. CSR 선택 시 고려사항

• 복잡한 사용자 상호작용
• 실시간 데이터 업데이트
• SPA(Single Page Application) 요구사항
• 서버 비용 최소화 필요

---

결론

SSR은 현대 웹 개발에서 여전히 중요한 렌더링 전략입니다. 특히 SEO와 초기 로딩 속도가 중요한 애플리케이션에서는 필수적인 선택이 될 수 있습니다. Next.js와 같은 현대 프레임워크를 활용하면 SSR의 단점을 최소화하면서도 장점을 극대화할 수 있습니다.

인사이트: SSR과 CSR은 상호 배타적인 선택이 아닙니다. 애플리케이션의 요구사항에 따라 두 방식을 적절히 조합하는 하이브리드 접근 방식이 최선의 해결책이 될 수 있습니다.

---

참고 자료

• Next.js Documentation - Server-side Rendering
• Next.js Documentation - App Router
• React Documentation - Server Components
• MDN Web Docs - Server-side website programming
• Web.dev - Rendering on the Web