웹 렌더링의 2가지 접근 (CSR,SSR) 부수기
안녕하세요! 오늘은 웹 개발자라면 꼭 알고 있어야할 CSR & SSR 개념에 대해 알아보며 정리해보고자 합니다.
SPA (SINGLE PAGE APPLICATION)
react & angular & vue 와 같은 프레임워크를 사용해 개발되는 방식
하나의 페이지로 구성된 웹 APP
MPA (MULTI PAGE APPLICATION)
탭을 이동할 때 마다 서버로부터 새로운 HTML을 받아와 렌더링 (전통적인 방식)
전환시마다 화면이 깜빡이는 현상 발생 → AJAX 등장 이후 원하는 부분만 클라이언트쪽에서 렌더링해 UX 개선.
CSR (CLIENT-SIDE RENDERING)
일반적으로 SPA에서 차용하는 방식
초반에 모두 다운로드 → 이후 새로운 페이지 요청에 데이터만 갱신하여 해결
SSR (SERVER-SIDE RENDERING)
일반적으로 MPA에서 차용하는 방식
새로운 요청이 있을 때마다 → 렌더링 방식으로 SSR사용
CSR : 클라이언트 측에서 렌더링하는 방식
SSR: 서버측에서 렌더링하는 방식
(어느쪽에서 rendering을 준비하는지에 대한 개념)
- SSG (StaticSiteGeneration) : 미리 다 만들어 놓은 페이지를 요청시에 응답 ( 바뀔 일이 없는 캐싱이 필요한 페이지에 적합 )
동작과정
CSR :
유저가 웹사이트에 방문 → 브라우저가 서버에 콘텐츠 요청 → 빈 HTML을 response로 보냄 → 브라우저가 연결된 js링크를 통해 서버에서 js 다운로드 (동적으로 DOM 생성) → 브라우저에 렌더링
- 브라우저가 js 다운로드 & 동적 DOM 생성하기 위해 초기 로딩 속도가 느림
- 하지만 이후 request에 따라 서버에서 해당 데이터만 response 받아 사용하면 되기 때문에 이후 구동 속도는 매우 빠른 편
- 또한 서버 부하가 적고, UX가 쾌적한 편
하지만 브라우저가 가진 웹 크롤러는 HTML을 읽어 검색 가능한 색인을 만들어내는데, 웹 크롤러봇 입장에선 CSR HTML은 텅텅 비어있는 상태
CSR은 검색엔진 최적화에 불리하다는 치명적인 단점이 있습니다.
(구글봇은 JS를 실행할 수 있기 때문에 CSR 크롤링이 가능하다는 주장이 있음. 하지만 아직 실험단계, SSR 고려 권장)
SSR:
유저가 웹사이트 방문 → 서버에 콘텐츠 요청 → 렌더링 준비를 마친 HTML, JS CODE를 response를 전달 → 브라우저는 HTML 렌더링 → js코드를 다운로드 → HTML에 JS 로직 연결
- 모든 데이터 HTML에 담겨 전달되기 때문에 SEO에 유리
- JS다운로드를 기다려야하지 않기 때문에 초기 구동속도가 빠름
- TTV(TIMETOVIEW) !== TTI(TIMETOINTERACTION)
(인터렉션가능한 페이지가 아닌 상태로 초기 노출)
CSR + SSR / SSG 도입
- without framework
2. with framework
실제 현업에서 2가지 방법을 다른 프로젝트에 각각 사용하고 있습니다.
프레임워크를 사용하다보면 블랙박스 영역이 생기기 마련이기 때문에 개인적으론 서버 관련 지식이 조금이라도 있다면 전자의 방식이 더 매력적이라고 생각합니다.
CSR + SSR
- Isomorphic App, Universal Rendering
서버와 클라이언트에 동일한 코드가 동작
서버와 클라이언트가 같은 코드로 돌아가기 때문에 window와 같은 객체를 해결하지 못할 수 있지만,
초기 로딩속도 보완, SEO 개선, CSR의 장점을 그대로 가져갈 수 있어 매우 유용합니다.
그렇다면 어떤 방식을 사용해야할까?
답은 “서비스에 따라 다르다.” 입니다.
- 만약 서비스가 사용자와의 상호작용이 많고, 대부분 페이지가 고객의 개인정보 기반이라면 SEO보다 데이터 보호측면이 중요. (모든 서비스에 SEO가 필요하지 않다) → CSR이 적합
- 만약 회사 홈페이지와 같은 노출에 신경써야하는 페이지나 누구에게나 같은 페이지를 공유해야하는 서비스라면 (+ 업데이트도 자주 필요한)→ SSR이 적합
- 만약 노출에 신경써야하지만, 자주업데이트 되지않는 고정된 페이지라면 → SSG가 적합
… 그리고 이를 모두 고려해야한다면
각자의 서비스에 적합한 방식으로 렌더링을 설계하고, 구현해보는 경험이 매우 중요한 것 같습니다 ( 결국 다 만지게 될테지만요 )
어떠셨나요!? 도움이 되셨다면 박수로 응원해주시공 오늘도 행코하세요~!!!
