SPA(Single Page Aplication)란?
- 서버로부터 처음에만 한 페이지를 받아오고 이후에는 동적으로 DOM을 구성해서 리랜더링 되는 화면이 바뀌게 한다.
- 즉 최초 한 번 페이지를 전체 로딩한 뒤, 데이터만 변경하여 사용할 수 있는 애플리케이션
- 페이지가 한번 로딩된 이후 데이터를 수정하거나 조회할 때 페이지가 새로 고침되지 않고 다른페이지로 넘어가지 않는다.(처음만 페이지를 받아오고 그 이후 받아와지지 않기 때문에 CSR이란 "방식"을 채택한 것!)
SSR(Server Side Rendering)
- 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식
- 즉 서버로부터 완전하게 만들어진 HTML 파일을 받아와 페이지 전체를 렌더링 하는 방식
장점
- 검색엔진 최적화(SEO)가 가능하다
- 초기 구동 속도가 빠르다
단점
- 서버에 매번 요청을 해야해서 서버의 부하가 커진다
- 매번 새로고침이 되기 때문에 UX가 떨어진다
CSR(Client Side Rendering)
- 클라이언트(브라우저)가 빈 HTML로 화면을 그리고, 이후에 JS에 따라 화면을 채워 넣음
- 즉 사용자의 요청에 따라 필요한 부분만 서버로 부터 응답 받아 렌더링 하는 방식
장점
- 서버에서 필요한 부분만 요청하기 때문에 서버의 부담이 덜하다
- 초기 로딩 이후 구동 속도가 빠름 = UX가 좋다
단점
- 초기 구동 속도가 느리다(= 초기에 모든 리소스를 받아오기 때문)
- 검색엔진 최적화(SEO)에 약하다.
SEO(Search Engine Optimization)
- 검색엔진 최적화(검색 결과에서의 상위 노출)
- 대부분의 웹 크롤러, 봇들은 JS를 실행시키지 못하고 HTML에서만 컨텐츠를 수집하기 때문에 CSR 방식으로는 개발된 페이지를 빈 페이지로 인식하게 됨
- SSR 방식은 View를 서버에서 전부 렌더링하기 때문에 HTML에 모든 컨텐츠가 저장되어 있어 SEO하는데 문제가 없음
주의!
SPA와 MPA는 페이지를 한개쓰냐 여러개 쓰냐의 차이
SSR과 CSR은 렌더링을 어디서 하냐의 차이
SPA != CSR
생각을 기록하자