SPA란?Single Page Application의 약자로 한개의 페이지를 가진 어플리케이션이다.
SPA의 장점은 다음과 같다
- 사용자 친화적
- 초기 렌더링 후 데이터만 받기때문에 서버 요청이 적음
- 프론트, 백 분리로 개발업무 분업화 및 협업 용이
- 개발이 상대적으로 효율적
SSR이란?Server Side Rendering의 약자로 서버에서 데이터까지 모두 포함하여 페이지를 구성한 후 브라우저에 전달한다.
클라이언트가 페이지를 이동 또는 클릭으로 인한 다른요청이 생길때마다 이 과정을 반복하기 떄문에 화면이 바뀌지 않아도 계속 다시 렌더링이 된다.
장점은 다음과 같다.
- 초기 로딩 속도가 빠르다
- 모든 검색엔진에 대한 SEO(검색엔진 최적화)가 가능하다.
단점은 다음과 같다.
- 페이지 요청 시 매번 새로고침이 되기 때문에 UX 저하
- 서버에서 매번 요청을 하기 때문에 트래픽, 서버 부하가 커짐
CSR 이란?Client Side Rendering의 약자로 HTML 및 static파일들의 각종 리소스를 받아온다.
이후에는 서버에 데이터만 요청을 하고 자바스크립트로 View를 컨트롤 한다.
초기에는 SSR보다 많은 리소스 요청으로 인해 렌더링 속도가 느리지만 이후에는 CSR의 렌더링 속도가 더욱 빠르다.
장점은 다음과 같다.
- 첫 로딩시 리소스만 다 받으면 이후에는 빠르게 렌더링 되기 때문에 UX가 뛰어나다.
- 서버에 요청하는 횟수가 훨씬 적기 때문에 서버 부담이 덜하다.
단점은 다음과 같다.
- 모든 리소스 파일들이 로드될 때까지 기다려야한다.
- SEO(검색엔진 최적화) 문제가 발생할 수 있다.