SSG, SSR, CSR
웹 애플리케이션에서 SSR, SSG, 그리고 CSR은 페이지 렌더링 방식과 관련된 중요한 개념이다.
각 방식은 사용자 경험, 성능, 검색 엔진 최적화(SEO) 등 다양한 측면에서 장단점을 가지고 있으니 하나씩 정리해보자.
SSR(Server Side Rendering)
SSR은 서버에서 HTML을 렌더링한 뒤, 완성된 HTML 파일을 클라이언트(browser)로 보내는 방식이다.
작동방식
- 사용자가 웹 페이지를 요청하면 서버가 해당 요청을 처리.
- 서버는 필요한 데이터를 백엔드에서 가져와 HTML로 렌더링.
- 렌더링된 HTML이 클라이언트로 전송.
- 클라이언트는 브라우저에서 HTML을 표시.
장점
- 빠른 첫 번째 로드:
완전한 HTML(Ready to Render)이 제공되기 때문에 브라우저가 콘텐츠를 바로 표시 가능. - SEO 친화적:
HTML이 서버에서 렌더링되어 검색 엔진 크롤러가 페이지 콘텐츠를 쉽게 읽을 수 있음. - 초기 페이지 로드에 유리:
데이터가 준비된 상태에서 페이지를 로드하기 때문에 초기 렌더링이 빠름.
단점
- 서버 부하 증가:
매 요청마다 서버가 HTML을 렌더링해야 하므로 서버의 처리 부하가 높고 나머지 로딩 시간이 느리다. - 인터랙션 속도 감소:
초기 로드 이후, 클라이언트 측에서 동작하려면 추가적인 JavaScript가 로드되어야 함.
SSG(Static Site Generation)
SSG는 애플리케이션을 빌드 시 미리 HTML 파일을 생성해 두는 방식이다.
빌드된 정적 HTML 파일이 서버에 저장되며, 사용자가 요청하면 즉시 전달된다.
작동 방식
- 빌드 단계에서 정적 HTML로 페이지를 생성.
- 사용자가 요청하면 서버에서 미리 생성된 HTML을 바로 제공.
장점
- 매우 빠른 로딩 속도:
이미 생성된 정적 HTML을 제공하므로, 서버 부하가 적고 클라이언트 로드가 빠름. - SEO친화적:
콘텐츠가 미리 렌더링되어 검색 엔진이 쉽게 크롤링 가능. - 안정적:
서버 부하가 적으며, CDN을 통해 캐싱 가능.
* CDN(Content Delivery Network): 사용자에게 콘텐츠(HTML, CSS, JavaScript 파일, 이미지, 동영상 등)를 더 빠르고 효율적으로 제공하기 위해 전 세계에 분산된 서버 네트워크를 사용하는 시스템
단점
- 동적 데이터 처리 어려움:
데이터가 실시간으로 변경되는 경우 적합하지 않음. - 빌드 시간 증가:
콘텐츠가 많아질수록 빌드 시간이 길어짐.
CSR(Client Side Rendering)
CSR은 클라이언트(browser)에서 JavaScript를 사용해 HTML을 생성하는 방식이다.
React, Angular, Vue와 같은 프레임워크가 주로 사용된다.
작동 방식
- 사용자가 웹 페이지를 요청하면 서버는 최소한의 HTML 및 JavaScript 파일만 전송.
- 클라이언트는 JavaScript를 실행해 필요한 데이터를 가져오고, HTML을 생성하여 화면에 표시.
장점
- 빠른 사용자 인터랙션:
브라우저에서 상태를 유지하며 동적으로 렌더링되기 때문에 사용자 경험이 부드러움. - 유연한 데이터 처리:
실시간 데이터를 쉽게 처리 가능. - 빠른 페이지 전환 속도:
클라이언트에서 JavaScript가 페이지를 렌더링하므로 전환이 빠름.
단점
- SEO에 불리함:
초기 요청시 HTML이 비어있고 JavaScript로 채워지기 때문에 검색 엔진 크롤러가 콘텐츠를 제대로 인식하지 못할 가능성이 있음. - 초기 로딩 속도 느림:
JavaScript 로드 및 실행 후 렌더링이 이루어지기 때문에 초기 로딩이 느려질 수 있음. - JavaScript 의존성 증가:
JavaScript가 비활성화된 브라우저에서는 제대로 작동하지 않음.
비교
정리
| 특성 | SSR | SSG | CSR |
|---|---|---|---|
| 초기 로드 속도 | 보통(서버 렌더링 시간 필요) | 빠름(정적 파일 제공) | 느림(JavaScript 실행 필요) |
| SEO | 적합 | 적합 | 낮음 |
| 실시간 데이터 | 가능 | 어렵거나 불가능 | 매우 적합 |
| 서버 부하 | 높음 | 낮음 | 낮음 |
| 빌드 시간 | 없음 | 오래 걸림 | 없음 |
사용 사례
- SSR:
뉴스 사이트, 블로그 등 SEO가 중요하고 초기 콘텐츠 로딩이 필요한 경우. - SSG:
정적 페이지(포트폴리오, 문서 사이트, 마케팅 페이지)와 같이 콘텐츠가 자주 변경되지 않는 경우. - CSR:
대화형 웹 어플리케이션(대시보드, 소셜 미디어, 채팅 등)에서 실시간 데이터 처리가 필요한 경우.
