[React] 클라이언트 사이드 렌더링(CSR) & 서버 사이드 렌더링(SSR)
CSR, SSR에 대해 알아보기 전에 SPA와 MPA를 먼저 살펴보려 한다.
공부하기 전 SPA에 대해 알고 있던 것은 Single Page Application의 약자로 하나의 페이지로 구성되어 있고, React 라우터를 통해 SPA를 만들 수 있다 정도..?
📌 SPA와 MPA
SPA
- Single Page Application
하나의 페이지로 구성된 웹 어플리케이션- AJAX의 등장 후 클라이언트에서 원하는 부분만 동적으로 갈아끼울 수 있어 화면 깜빡임이 없다.
- 최근 대부분 웹 페이지 구성 방식
MPA
- Multi Page Application
여러개의 페이지로 구성된 웹 어플리케이션- 탭을 이동할 때마다 서버로부터 새로운 HTML을 받아와 페이지 전체를 새로 렌더링한다.
- 전통적인 웹 페이지 구성 방식
그렇다면 이 두 가지 개념이 CSR, SSR과 무슨 연관이 있을까?
📌 CSR과 SSR
1. SPA, MPA와의 관계
SPA
-
웹 어플리케이션에 필요한 정적 리소스를 초반 한 번에 모두 다운로드 함
-
새로운 페이지 요청이 있을 경우 필요한 데이터만 전달 받아 클라이언트에서 페이지 갱신
➡️ 렌더링 방식으로
CSR채택
MPA
-
새로운 요청이 있을 때마다 서버에서 이미 렌더링 된 정적 리소스를 받아옴
➡️ 렌더링 방식으로
SSR채택
그러므로 React, Vue, Angular를 사용해 SPA를 만들면 렌더링 방식을 변경하지 않는 이상 자연스럽게 CSR을 사용하게 되고, PHP나 JSP로 MPA를 만들면 자연스럽게 SSR을 사용하게 된다.
🤔 그렇다면 SPA === CSR, MPA === SSR 일까?
정답부터 말하자면 틀렸다❗️
이들은 페이지가 몇 개냐, 렌더링을 어디서 하냐에 따라 달라지는 '다른 개념'이다!
2. CSR, SSR의 개념 (feat. SSG)
CSR
- Client Side Rendering
- 클라이언트 측에서 렌더링하는 방식
SSR
- Server Side Rendering
- 서버 측에서 렌더링하는 방식
- 요청 시
서버에서 즉시 HTML을 만들어서응답 - 데이터가 자주 바뀌어서 이미 만들어두기 어려운 페이지에 적합
SSG
- Static Site Generation (Static Rendering)
- 서버에서 HTML을 보내준다는 측면에서는 SSR과 비슷
서버에서 페이지들을 모두 만들어둔 뒤, 요청 시 해당 페이지를 응답- 바뀔 일이 거의 없는 페이지에 적합
3. CSR, SSR의 동작 과정
CSR의 동작 과정과 특징
- 유저가 웹 사이트에 방문 → 브라우저가 서버에 콘텐츠 요청 → 서버는 빈 뼈대만 있는 HTML으로 응답 → 브라우저가 서버로부터 다시 자바스크립트 파일 다운로드 → 자바스크립트를 이용해 동적으로 페이지 생성
- 브라우저가 자바스크립트를 다운로드 받고 동적으로 DOM을 생성하는 시간을 기다려야 하므로
초기 로딩 속도가 느리다. - 초기 로딩 후 페이지 일부만 변경 시 해당 데이터만 요청하면 되므로
이후 구동 속도는 빠르다. - 서버는 빈 뼈대만 넘겨주므로
서버측 부하가 적다. - 클라이언트 측에서 연산, 라우팅 등을 모두 수행하므로
반응 속도가 빠르고 UX도 우수하다. - 서버에서 빈 HTML을 넘겨주기 때문에
검색 엔진 최적화(SEO)에 불리하다.
SSR의 동작 과정과 특징
- 유저가 웹 사이트 방문 → 브라우저가 서버에 콘텐츠 요청 → 서버에서 페이지에 필요한 데이터를 얻어와 렌더링 준비를 마친 HTML과 자바스크립트 코드를 응답으로 전달 → 전달 받은 페이지 띄움 → 브라우저가 자바스크립트 코드 다운로드 받음 → HTML에 자바스크립트 로직 연결
- 서버에서 전달한 HTML에 모든 데이터가 담겨져 있으므로
SEO에 유리하다. - 자바스크립트 코드를 다운로 받고 실행하기 전에 사용자가 화면을 볼 수 있으므로
초기 구동 속도가 빠르다. - 그러나 이 시점에는 사용자 입력에 대한 반응이 없을 수 있다. →
TTV(Time To View) !== TTI(Time To Interaction)
4. CSR과 SSR의 장단점
CSR
-
👍🏼 장점
- 화면 깜빡임이 없음
- 초기 로딩 이후 구동 속도가 빠름
- TTV, TTI 사이 간극이 없음 (매끄러운 사용자 경험)
- 서버 부하 분산
-
👎🏼 단점
- 초기 로딩 속도 느림
- SEO에 불리
SSR
-
👍🏼 장점
- 초기 구동 속도 빠름
- SEO에 유리
-
👎🏼 단점
- 화면 깜빡임이 있음
- TTV, TTI 사이 간극이 있음 (사용자 경험이 나쁨)
- 서버 부하가 있음
5. CSR + SSR
Universal Rendering
초기 렌더링 방식으로 SSR을 사용하고, 그이후에는 CSR을 사용하는 방식- 초기 로딩 속도와 SEO를 해결하면서, CSR의 장점을 그대로 가져갈 수 있다.
📌 그렇다면 무엇을 써야 할까?
정답은 서비스의 성격에 따라 달라진다.
-
CSR ➡️ 사용자와의 상호작용이 많고 대부분의 페이지가 고객의 개인 정보 데이터를 기준으로 구성되는 서비스
-
SSR ➡️ 상위 노출 되어야 하고 누구에게나 동일한 내용을 보여주며, 페이지의 데이터가 자주 바뀌는 경우
-
SSG ➡️ 상위 노출 되어야 하고 누구에게나 동일한 내용을 보여주며, 내용을 업데이트 하는 일이 거의 없는 경우
-
Universal ➡️ 사용자에 따라 페이지 내용도 달라지고, 빠른 인터렉션과 SEO 모두 가져가야 하는 경우
※ 참고 자료
🎨 신세한탄의 CSR&SSR
CSR vs SSR vs SSG
CSR과 SSR의 장단점 - 스타트업코드
