MPA와 SPA
. 전통적인 방식
. 다수의 HTML Page
. MPA는 SSR(Server Side Rendering) 방식으로 렌더링한다.
. 새로운 페이지를 요청할 때마다 서버에서 렌더링된 정직 리소스(HTMl, CSS, JS)가 다운로드 된다.
. 즉 페이지를 이동하거나 내용 변경이 필요할 경우 전체 페이지를 다시 렌더링한다.
. Angular, React, Vue 등 프론트엔드 프레임워크들의 발전으로 크게 유행
. 한 개의 HTML Page
. SPA는 CSR(Client Side Rendering) 방식으로 렌더링한다.
. 초기에 단 한번만 리소스(HTMl, CSS, JS)를 로딩하고, 그 후에는 서버에서 데이터만 받아온다.
. 즉 페이지를 이동하거나 내용 변경이 필요한 경우 페이지 리로딩 없이 필요한 부분만 서버로부터 데이터를 받아 수정해서 브라우저에 보여주는 방식
. SPA = 서버로부터 처음에만 페이지를 받아오고 이후에는 동적으로 DOM을 구성하여 화면을 렌더링한다.
. CSR = 동적으로 DOM을 구성하여 화면을 렌더링한다.
즉 SPA는 최초 하나의 페이지를 서버로부터 받아오는 방식이며, 동적 DOM과 데이터의 처리를 위해 CSR라는 렌더링기법을 사용하는 것이라고 이해하면 된다.
SSR과 CSR
무엇을 선택해야 하는가?
정답은 없다. SSR과 CSR의 장단점을 고려해서 서비스에 맞는 유연한 선택을 해야 한다.