SSR
의미
- SSR(Server Side Rendering) : 웹 페이지를 브라우저 대신 서버에서 렌더링하는 방식
특징
- 서버에서 웹 페이지를 브라우저로 보내기 전에 완전히 렌더링함
- 렌더링 과정
- 웹 페이지를 처음 렌더링 할 때
- 브라우저가 서버의 URI로 GET요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송
- 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링됨
- 웹 페이지의 내용에 데이터베이스의 데이터가 필요한 경우
- 서버가 데이터베이스의 데이터를 불러옴
- 서버가 웹 페이지를 완전히 렌더링 된 페이지로 변환함
- 서버가 브라우저에 응답으로 보냄
- 브라우저에서 다른 경로로 이동할 때
- 서버가 웹 페이지를 처음 렌더링할 때와 동일한 작업을 다시 수행
- 웹 페이지를 처음 렌더링 할 때
장점
- SEO(Search Engine Optimization)에 유리
- 모든 콘텐츠가 HTML에 포함되어 있기 때문에 효율적인 검색엔진 최적화 가능
- 웹 페이지의 첫 화면 렌더링이 빠름
- 브라우저에 웹페이지가 도착했을 때 이미 렌더링이 완료된 상태이기 때문
단점
- blinking 이슈
- 새로운 데이터가 필요할 때마다 새롭게 렌더링된 웹사이트를 서버로부터 받기 때문임
- 사용자가 많을수록 서버에 부담
- 서버가 데이터 요청을 받을 때마다 필요한 데이터를 가져와서 HTML을 만듦
- 사용자와 상호작용하기까지 시간이 걸림 (TTV !== TTI)
- HTML와 CSS 파일이 실행되어도, 사용자와 상호작용을 담당하는 JavaScript 파일이 실행되기까지 시간이 걸릴 수 있기 때문
TTV와 TTI : 웹 사이트의 성능을 판단하는 기준 중 하나
TTV(Time To View) : 화면이 보여지기 전까지 걸리는 시간
TTI(Time To Interact) : 사용자와 상호작용하기까지 걸리는 시간
cf. SSG
- SSG(Static Site Generation) a.k.a Static Rendering
- 서버에서 요청하는 즉시 웹 페이지를 만드는 SSR와는 달리, 서버에서 요청하기 전에 웹 페이지를 미리 만들어두는 방식으로 데이터가 바뀔 일이 거의 없는 페이지에 적합함
- 한편, SSR은 데이터가 달라져 미리 웹 페이지를 만들기 어려울 때 더 적합함
CSR
의미
- CSR(Client Side Rendering) : 웹 페이지를 서버 대신 클라이언트에서 렌더링하는 방식
- 대표적인 클라이언트인 웹 브라우저에서 렌더링이 됨
특징
- 서버에서 전달받은 파일을 바탕으로 브라우저에서 웹 페이지를 완전히 렌더링함
- 렌더링 과정
- 웹 페이지를 처음 렌더링 할 때
- 브라우저의 요청을 서버로 보내면 서버는 웹 페이지의 골격이 될 단일 페이지(Single Page)와 JavaScript 파일을 클라이언트에 보냄
- 클라이언트가 웹 페이지를 받으면, 웹 페이지와 함께 전달된 JavaScript 파일을 활용해 브라우저의 웹 페이지를 완전히 렌더링 된 페이지로 바꿈
- 웹 페이지 내용에 데이터베이스의 데이터가 필요할 때
- 브라우저가 Fetch와 같은 API를 사용하여 데이터베이스에 저장된 데이터를 가져와서 웹 페이지에 렌더링함
- 브라우저에서 다른 경로로 이동할 때
- 맨 처음 서버로부터 전달받은 웹 페이지 파일과 동일한 파일에 필요한 데이터를 전달 받아 다시 렌더링함
- 웹 페이지를 처음 렌더링 할 때
장점
- 빠른 라우팅
- 다른 경로가 요청될 때, 동적으로 라우팅을 관리하기 때문에 사용자와 웹사이트 간 상호 작용이 많은 경우 강력한 사용자 경험을 제공
단점
- SEO(Search Engine Optimization)에 불리
- HTML에 콘텐츠가 별로 없고, javascript에 대부분의 내용이 포함되어 있음
- 웹 페이지의 첫 화면 렌더링이 느림
- 브라우저에서 렌더링이 실행되고, javascript 파일 크기가 크기 때문
정리하기
SSR과 CSR의 차이점
| 기준 | SSR | CSR |
|---|---|---|
| 웹페이지의 렌더링 위치 | 서버 | 클라이언트(ex. 브라우저) |
| 데이터베이스의 데이터가 필요할 때 | 서버가 데이터베이스의 데이터를 불러온 후 웹페이지를 다시 렌더링해서 보냄 | 브라우저가 API를 사용하여 데이터베이스에 저장된 데이터를 가져와서 웹 페이지를 렌더링 |
| 다른 경로 요청 | 서버가 웹 페이지를 다시 보냄 | 페이지를 새로고침 하지 않고, 동적으로 라우팅을 관리 |
| 장점 | SEO 유리, 웹 페이지 첫 화면 렌더링이 빠름 | 빠른 라우팅 |
| 단점 | Blinking 이슈, TTV ≠ TTI | SEO 불리, 웹 페이지의 첫 화면 렌더링이 느림 |
언제 어떤 방법을 쓰는가
SSR
- SEO가 우선순위인 경우, 일반적으로 SSR을 사용
- 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우, 단일 파일의 용량이 작은 SSR 이 적합
- 웹 페이지가 사용자와 상호작용이 적은 경우, SSR 을 활용
CSR
- SEO 가 우선순위가 아닌 경우, CSR을 이용
- 사이트에 풍부한 상호 작용이 있는 경우, CSR 은 빠른 라우팅으로 강력한 사용자 경험을 제공
- 웹 애플리케이션을 제작하는 경우, CSR을 이용해 더 나은 사용자 경험(빠른 동적 렌더링 등)을 제공
참고사항
- SPA와 MPA는 페이지 구성 방식에 따른 구분이고, CSR과 SSR은 렌더링 방식에 따른 구분임
- 보통 SPA로 페이지 구성을 하면 CSR 렌더링 방식을 따르고, MPA로 페이지 구성을 하면 SSR 렌더링 방식을 따름
참고하면 좋은 자료
드림코딩, 서버사이드 렌더링
우아한TECH, CSR&SSR
