서론
웹 애플리케이션의 렌더링 방식은 사용자 경험과 성능에 직접적인 영향을 미칩니다. 서버 사이드 렌더링(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 14, Node.js, Express, Flutter 등을 활용한 프로젝트를 다룹니다. 제 블로그에서는 개발 여정, 기술 분석, 실용적 코딩 팁을 공유합니다. 창의적인 솔루션을 실제로 적용하는 과정의 통찰도 나눌 예정이니, 궁금한 점이나 상담은 언제든 환영합니다.