CSR, SSR에 대해 알아보기 전에 SPA와 MPA를 먼저 살펴보려 한다.
공부하기 전 SPA에 대해 알고 있던 것은 Single Page Application의 약자로 하나의 페이지로 구성되어 있고, React 라우터를 통해 SPA를 만들 수 있다 정도..?
하나의 페이지
로 구성된 웹 어플리케이션여러개의 페이지
로 구성된 웹 어플리케이션그렇다면 이 두 가지 개념이 CSR, SSR과 무슨 연관이 있을까?
웹 어플리케이션에 필요한 정적 리소스를 초반 한 번에 모두 다운로드 함
새로운 페이지 요청이 있을 경우 필요한 데이터만 전달 받아 클라이언트에서 페이지 갱신
➡️ 렌더링 방식으로 CSR
채택
새로운 요청이 있을 때마다 서버에서 이미 렌더링 된 정적 리소스를 받아옴
➡️ 렌더링 방식으로 SSR
채택
그러므로 React, Vue, Angular를 사용해 SPA를 만들면 렌더링 방식을 변경하지 않는 이상 자연스럽게 CSR을 사용하게 되고, PHP나 JSP로 MPA를 만들면 자연스럽게 SSR을 사용하게 된다.
정답부터 말하자면 틀렸다❗️
이들은 페이지가 몇 개냐, 렌더링을 어디서 하냐에 따라 달라지는 '다른 개념'이다!
서버에서 즉시 HTML을 만들어서
응답서버에서 페이지들을 모두 만들어둔 뒤
, 요청 시 해당 페이지를 응답초기 로딩 속도가 느리다
.이후 구동 속도는 빠르다
.서버측 부하가 적다
.반응 속도가 빠르고 UX도 우수
하다. 검색 엔진 최적화(SEO)에 불리
하다.SEO에 유리
하다.초기 구동 속도가 빠르다
.TTV(Time To View) !== TTI(Time To Interaction)
👍🏼 장점
👎🏼 단점
👍🏼 장점
👎🏼 단점
초기 렌더링 방식으로 SSR
을 사용하고, 그 이후에는 CSR
을 사용하는 방식정답은 서비스의 성격에 따라 달라진다.
CSR ➡️ 사용자와의 상호작용이 많고 대부분의 페이지가 고객의 개인 정보 데이터를 기준으로 구성되는 서비스
SSR ➡️ 상위 노출 되어야 하고 누구에게나 동일한 내용을 보여주며, 페이지의 데이터가 자주 바뀌는 경우
SSG ➡️ 상위 노출 되어야 하고 누구에게나 동일한 내용을 보여주며, 내용을 업데이트 하는 일이 거의 없는 경우
Universal ➡️ 사용자에 따라 페이지 내용도 달라지고, 빠른 인터렉션과 SEO 모두 가져가야 하는 경우
※ 참고 자료
🎨 신세한탄의 CSR&SSR
CSR vs SSR vs SSG
CSR과 SSR의 장단점 - 스타트업코드