SSR(Server Side Rendering) 과 CSR(Client Side Rendering) (SPA, MPA)

곰탁 2022. 2. 23. 16:31

90년대 중반까지 모두 Static sites

서버에 모든 html이 있었고, 사용자가 서버에 배포되어 있는 html 문서를 보는 형식이였다.

페이지 전체가 업데이트 되는 방식.

96년 iframe 태그가 도입됨.

문서를 받아와서 사용할 수 있게 됨.

98년

fetch API의 원조 XMLHttpRequest 서버에 필요한 데이터만 받아와서 JS로 페이지에 업데이트 하는 형식.

2005년

AJAX도입으로 SPA가 트렌드로 됨.

CSR

서버에서 HTML 파일을 보내고, 앱에서 필요한 js 링크만 들어있음.

HTML에 들어있는게 없어서 빈화면만 보이게 됨.

링크된 주소로 JS를 받게 되는데 여기에 필요한 로직 또는 라이브러리 프레임워크가 다 포함이 되어 있음.

굉장히 사이즈가 커서 다운로드 속도가 걸림.

초기 로딩속도가 오래걸림.

TTV TTI의 간격이 없음.

SEO에 노출되지 않아서 단점이다.

현재는 구글에서 JS까지 서치 중.

여전히 SEO는 좋지 않은 상태.

SSR

웹사이트에 접속하면 서버에 필요한 데이터를 모두 가져와서 HTML을 만들고 그걸 조금 제어할 수 있는 소스코드와 클라에 보냄.

페이지 로딩이 빨라지고, HTML에 컨텐츠가 담겨있어서 SEO가 효율적이다.

서버 과부하가 쉽게 될 수 있음.

깜빡임은 존재함.

사용자가 TTV TTI의 간격이 있음.