MPA vs SPA 그리고 SSR vs CSR

MPA (Multi Page Application)  vs SPA (Single Page Application)

MPA :

• 여러 개의 페이지(.html)로 이루어진 application이다.
• 새로운 페이지를 요청할 때마다 정적 리소스(HTML, CSS, JavaScript)가 다운로드된다.
• 페이지를 이동하거나 새로고침하면 전체 페이지를 다시 렌더링한다. 이 때문에 blinking issue가 있어 UX가 좋지 않다.
• 페이지 별로 meta를 적용할 수 있어 SEO (Search Engine Optimization)에 좋다.

SPA :

• 한 개의 페이지(.html)로 이루어진 application이다.
• 처음 페이지 요청 시, 모든 리소스(HTML, CSS, JavaScript)가 다운로드된다.
• 필요한 부분만 갱신하기 때문에 네이티브 앱과 같은 UX를 제공할 수 있다.
• 페이지가 하나 이기 때문에 페이지 처럼 동작하는 컴포넌트에  SEO를 적용하기 어렵다.

 

SSR (Server Side Rendering) vs CSR (Client Side Rendering)

SSR :

• 서버가 페이지 요청을 받으면 즉시 브라우저에서 즉시 렌더링 가능한 HTML 파일을 만든 후, js 파일과 함께 전송한다.
• HTML은 바로 렌더링이 되지만(TTV(Time to view) 가 짧다), js가 다운로드 되기 전까지  사용자의 이벤트를 처리할 수 없다(TTI(Time to interactive)가 길다).
• 검색 봇이 크롤링할 때, 이미 컨텐츠가 보이는 상황이기 때문에 SEO에 유리하다.
• 페이지에 동적인 요소가 많지 않을 때 선택하기 좋다

CSR:

• CDN은 페이지 요청을 받으면 HTML, CSS, js를 전송한다. 
• 브라우저(client)는 리소스를 다운로드 받는 대로 렌더링 하기 시작하고(TTV(Time to view) 가 길다), 렌더링이 완료되는 동시에 사용자의 이벤트를 처리할 수 있다(TTI(Time to interactive)가 짧다).
• 검색 봇이 크롤링할 때, 컨텐츠가 보이지 않는 상황이 있을 수 있으므로 SEO에 불리하다. 
• 페이지에 동적인 요소가 많을 때, 선택하기 좋다.