CSR(Client Side Rendering)과 SSR(Server Side Rendering)

SPA와 MPA

• SPA (Single Page Application) : 하나의 HTML 파일을 기반으로 JS를 이용해 화면의 컨텐츠를 동적으로 바꾸는 방식의 웹 어플리케이션 (전통적인 렌더링 방식 : CSR)

• MPA (Multiple Page Application) : 사용자가 페이지를 요청할 때마다, 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션 (전통적인 렌더링 방식 : SSR)

CSR

 

CSR에선 브라우저가 서버에 HTML과 JS 파일을 요청한 후, 로드되면 사용자의 상호작용에 따라 JS를 이용해서 동적으로 렌더링을 시킨다.

 

장점

• 첫 로딩만 기다리면, 동적으로 빠르게 렌더링 → 사용자 경험(UX)이 좋음
• 서버에게 요청하는 횟수 훨씬 적음 → 서버의 부담이 덜 함

단점

• 모든 스크립트 파일이 로드될 때까지 기다려야 함
  • 리소스를 청크(Chunk) 단위로 묶어서 요청할 때만 다운받게 하는 방식으로 완화시킬 수 있음. 하지만 완벽히 해결할 수는 없음
• 검색엔진의 검색 봇이 크롤링을 하는데 어려움을 겪음 → 검색엔진 최적화(Search Engine Optimization) 문제 발생
  • 구글 봇의 경우는 JS를 지원하지만, 다른 검색엔진의 경우 그렇지 않기 때문

SSR

 

SSR에선 브라우저가 페이지를 요청할 때마다 해당 페이지에 관련된 HTML, CSS, JS 파일 및 데이터를 받아와서 렌더링을 시킨다.

 

장점

• 초기 로딩 속도가 빠름 → 사용자가 컨텐츠를 빨리 볼 수 있음
• JS를 이용한 렌더링이 아님 → 검색엔진 최적화(SEO)가 가능

단점

• 매번 페이지를 요청할 때마다 새로고침 → 사용자 경험이 SPA에 비해서 좋지 않음
• 서버에 매번 요청 → 서버의 부하가 큼

 

출처 : github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/csr-ssr.md