MPA vs SPA

MPA(multi page application)

여러 페이지로 구성된 웹 어플리케이션. 사용자의 인터렉션이 발생할 때마다 서버로부터 새로운 html을 받아와서 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식.

SPA(Single Page Application)

하나의 페이지로 구성된 웹 어플리케이션. 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 데이터(JSON)를 바인딩하는 방식.

• TTFB (Time To First Byte)
  • 페이지를 요청했을 때 서버에서 데이터의 첫 번째 바이트가 도착하는 시점.
• FCP (First Contentful Paint)
  • 페이지가 로드되기 시작하고 컨텐츠의 일부가 화면에 렌더링 되는 순간.
• FMP (First Meaningful Paint)
  • 브라우저가 페이지의 주요 컨텐츠들을 화면에 렌더링하기 시작하는 순간.
• TTI(Time to Interactive)
  • 페이지가 완전히 상호작용(interactive) 가능한 순간.

SSR

SSR의 과정