20221123 CSR과 SSR의 차이점

SPA(SinglePageApplication) : 하나의 페이지로 구성된 웹 어플리케이션

 

MPA(MultiPageApplication) : 탭을 이동할 때마다 서버로부터 새로운 HTML을 새로 받아와서 새로 렌더링 하는 전통적인 방식

 

렌더링 방식

• SPA -> CSR
• MPA -> SSR

 

Client와 Server 중 어느 쪽에서 렌더링을 준비하느냐에 따라서 나뉨  👇👇

 

CSR(ClientSideRendering) : Client

- CSR은 클라이언트 측에서 HTML을 반환한 후에, JS가 동작하면서 데이터만을 주고받아 클라이언트에서 렌더링을 진행하는 것이다. 

 

SSR(ServerSideRendering) : Server

- SSR은 사용자가 웹 페이지에 접근할 때, 서버에 각각 페이지에 대해 요청하고 서버에서 HTML, JS 파일 등을 모두 다운로드하여 화면에 렌더링 하는 방식이다

 

SSG(StaticSiteGeneration)

- 미리 다 만들어두니까 바뀔 일이 거의 없는 페이지에 적합

 

 

한 줄 요약

 

- 초기 로딩 속도 측면에서는 SSR이 CSR에 비해 다운로드하는 파일이 많지 않아서 속도가 빠름 하지만 서버 부담 측면에서는 SSR은 서버와 잦은 응답을 필요로 하기 때문에 서버에 부담이 되고 UX측면이 떨어짐, CSR은 데이터 요청이 있을 때만 서버에 요청하기 때문에 서버 부담이 적다.