MPA, SPA?
출처 - https://lvivity.com/single-page-app-vs-multi-page-app
간단하게 설명하자면
MPA 는 Multi-Page-Application 의 약자로,
인터렉션이 발생할 때마다 서버로부터 새로운 html을받아와서 페이지 전체를 새로 렌더링합니다.
SPA 는 Single-Page-Application 의 약자로,
최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 새로 렌더링하는 방식입니다.
요즘 트렌트인 React, Vue 등이 SPA에 속합니다.
SSR
SSR은 MPA에서 사용하는 html파일을 받아와 페이지 전체를 렌더링 하는 방식입니다.
어떤 요소의 변경을 요청하면 페이지 전체의 html파일을 다시 렌더링합니다.
장점
- 각각의 페이지가 존재하기 때문에 검색엔진에서 컨텐츠를 색인하는데 최적화 되어있다.
- 서버로부터 화면을 렌더 하기 위한 필수적인 요소를 먼저 가져오기 때문에 이후에 설명할 클라이언트 사이드 렌더링 보다 초기로딩 속도가 빠르다.
단점
- 요청마다 페이지를 새로고침 하기때문에 깜빡임이 발생한다.
- 동일한 이유로 서버에 부하가 많이 걸린다.
CSR
CSR은 SPA에서 사용하는 필요한 부분만 응답 받아 렌더링 하는 방식입니다.
변경된 부분과 관련된 리소스만 응답, 렌더링합니다.
장점
- 초기 렌더링을 제외한 속도가 빠르다.
- 필요한 부분만 렌더링 하기때문에 서버에 부하가 적다.
- 깜빡임이 발생하지 않기때문에 사용자 친화적이다.
단점
- 초기에 모든 JS파일을 받아오기 때문에 초기 렌더링이 오래걸린다.
- 검색엔진에서 컨텐츠를 색인하는데 불리하다.
렌더링 방식을 선택하는 기준
출처 - https://miracleground.tistory.com
요즘 대부분 개발에 이용하는 프레임워크는 SPA 방식이기에 기본적으로 CSR방식이다.
하지만 위의 상황에서 SSR을 사용해야하는 상황이라면 선택적으로 SSR방식을 적용해야한다.
공부기록