웹 페이지가 사용자에게 어떻게 보여지는지(렌더링)에 대한 방식은 크게 **서버사이드 렌더링(SSR)**과 클라이언트사이드 렌더링(CSR) 두 가지로 나눌 수 있습니다. 이 두 방식은 웹 애플리케이션의 성능, 사용자 경험(UX), 그리고 검색 엔진 최적화(SEO)에 큰 영향을 미칩니다.
| 특징 |
CSR (클라이언트사이드 렌더링) |
SSR (서버사이드 렌더링) |
| 렌더링 주체 |
클라이언트 (브라우저) |
서버 |
| 첫 요청 응답 |
빈 HTML + JavaScript 파일 |
완성된 HTML 파일 |
| 초기 로딩 속도 |
느릴 수 있음 (JS 다운로드/실행 시간 필요) |
빠름 (즉시 콘텐츠 표시) |
|
|
|
| SEO |
불리할 수 있음 (JS 실행 어려움) |
매우 유리함 (완성된 HTML 제공) |
| 페이지 전환 |
부드러움 (부분 업데이트) |
새로고침 발생 (전통적 방식), 부드러움 (하이브리드) |
| 서버 부하 |
낮음 |
높음 |
| 주로 사용되는 앱 |
SPA (Single Page Application) |
MPA (Multi Page Application), Universal App (SPA+SSR) |
| 적합한 상황 |
사용자 상호작용 多, 실시간 업데이트, 앱 같은 UX |
SEO 중요, 초기 로딩 속도 중요, 정적 콘텐츠Sheets로 내보내기 |
현대의 웹 개발에서는 이 두 가지 방식의 장점을 모두 취하기 위해 유니버설 렌더링(Universal Rendering) 또는 하이브리드 렌더링 방식을 많이 사용합니다. 이는 초기 로딩 시에는 SSR을 사용하여 빠른 콘텐츠 표시와 SEO를 확보하고, 이후에는 CSR로 전환하여 동적이고 부드러운 사용자 경험을 제공하는 방식입니다. Next.js, Nuxt.js와 같은 프레임워크가 바로 이러한 하이브리드 렌더링을 쉽게 구현할 수 있도록 돕습니다.
1. 클라이언트사이드 렌더링 (CSR: Client-Side Rendering)
개념: 웹 페이지의 렌더링(화면에 내용을 그리는 과정)을 **클라이언트(사용자의 웹 브라우저)**에서 수행하는 방식입니다.
동작 원리:
- 최초 요청: 사용자가 웹사이트 URL을 입력하면, 브라우저는 서버에 페이지를 요청합니다.
- 빈 HTML 응답: 서버는 내용이 거의 비어있는 HTML 파일 (주로
<div id="root"></div>와 같은 기본 컨테이너와 JavaScript 파일을 로드하는 스크립트 태그만 포함)을 응답으로 보냅니다.
- JavaScript 다운로드 및 실행: 브라우저는 받은 HTML을 파싱하고, 연결된 JavaScript 파일을 다운로드합니다.
- 클라이언트에서 렌더링: 다운로드된 JavaScript 코드가 실행되면서, 서버로부터 필요한 데이터를 비동기적으로 가져오고 (API 호출), 이 데이터를 바탕으로 DOM(Document Object Model)을 동적으로 생성하고 조작하여 웹 페이지의 모든 콘텐츠를 화면에 그립니다.
- 페이지 상호작용: 이제 사용자는 페이지의 모든 기능을 정상적으로 사용할 수 있습니다. 이후 페이지 이동이 발생하면, 서버에 새로운 HTML을 요청하는 것이 아니라 JavaScript가 해당 부분만 업데이트합니다.
장점:
- 빠른 페이지 전환 및 부드러운 사용자 경험: 초기 로딩 이후에는 페이지 이동 시 필요한 데이터만 가져오고, 나머지 UI는 클라이언트에서 즉시 렌더링되므로 매우 부드럽고 빠른 상호작용이 가능합니다. (MPA의 깜빡임 없음)
- 서버 부하 감소: 서버는 정적인 파일 제공 및 데이터(API) 제공에만 집중하고, 복잡한 렌더링 작업은 클라이언트에게 위임하므로 서버의 부담이 줄어듭니다.
- 모바일 앱과 유사한 UX: 동적이고 반응적인 사용자 경험을 제공하여 모바일 앱과 유사한 느낌을 줍니다.
단점:
- 느린 초기 로딩 속도 (하얀 화면): 사용자가 처음 페이지에 접속할 때 JavaScript 파일을 다운로드하고 실행하여 DOM을 구성하는 시간이 필요하므로, 첫 화면이 나타나기까지 시간이 걸릴 수 있습니다. (빈 화면을 보는 시간)
- SEO(검색 엔진 최적화) 문제: 검색 엔진 봇은 JavaScript를 완전히 실행하지 못하는 경우가 많으므로, 페이지의 콘텐츠를 제대로 파악하지 못해 검색 결과에 노출되기 어려울 수 있습니다. (최근에는 구글 등 주요 검색 엔진이 JS 실행 능력을 향상시켰지만, 여전히 SSR이 더 유리할 수 있습니다.)
- 보안 취약점 증가 가능성: 핵심 로직이 클라이언트 측에 노출될 수 있어 보안에 더 많은 주의가 필요합니다.
적합한 경우: