서버 사이드 렌더링 vs 클라이언트 사이드 렌더링 (SSR과 CSR)
서버 사이드 렌더링(SSR) 은 서버 측에서 렌더링하는 방식이다. 클라이언트가 서버에 컨텐츠를 요청하면, 서버는 페이지에 필요한 데이터를 즉시 얻어와 모두 삽입하고, CSS까지 모두 적용해 렌더링 준비를 마친 HTML과 JS 코드를 응답한다. 브라우저에서는 JS 코드를 다운로드하고, HTML에 JS를 연결한다.
이처럼 모든 데이터가 이미 HTML에 담긴 채로 브라우저에 전달되기 때문에 SEO에 유리하다. 또한 JS 코드를 다운로드 받고 실행하기 전에 사용자가 이미 렌더링된 HTML을 볼 수 있으므로, JS 다운로드를 기다려야 하는 CSR에 비해 초기 구동 속도가 빠르다.
클라이언트 사이드 렌더링(CSR) 은 클라이언트 측에서 렌더링하는 방식이다. 클라이언트가 서버에 컨텐츠를 요청하면, 서버는 빈 뼈대만 있는 HTML을 응답한다. 클라이언트는 연결된 JS 링크를 통해 서버로부터 다시 JS 파일을 다운로드 받은 뒤, JS를 통해 동적으로 페이지를 만들어 브라우저에 보여준다.
빈 뼈대만 있는 HTML을 받아오기 때문에 웹 크롤러 봇 입장에서 색인할만한 콘텐츠가 존재하지 않아 SEO에 불리하다는 단점이 있다. 또 브라우저가 JS 파일을 다운로드하고, 동적으로 DOM을 생성하는 시간을 기다려야 하기 때문에 초기 로딩 속도가 느리다는 단점이 존재한다. 하지만 초기 로딩 이후 페이지 일부를 변경할 때에는 서버에 해당 데이터만 요청하면 되기 때문에 이후 구동 속도가 빠르다. 서버는 HTML 뼈대를 넘겨주는 역할만 수행하면 되므로 서버 측의 부하가 적고, 클라이언트 측에서 연산과 라우팅 등을 직접 처리하기 때문에 반응속도가 빠르고 UX도 우수하다는 장점이 있다.
| SSR 적용 | CSR 적용 |
|---|---|
| SEO가 중요한 웹사이트 | 실시간 상호작용이 많은 애플리케이션 |
| 초기 로딩 속도가 중요한 경우 | 서버 부하를 줄여야 하는 경우 |
| 네트워크가 느린 환경 | 단일 페이지 애플리케이션(SPA) |
| 콘텐츠 중심 웹사이트 | 동적 데이터 처리가 많은 웹사이트 |