[SPA]
SPA (Single Page Application) 는 말그대로 하나의 페이지로만 구성된 어플리케이션 이다.
싱글 페이지 어플리케이션은 페이지가 CSR 방식으로 렌더링을 한다.
SPA는 하나의 페이지에서 어플리케이션 처럼 동작해야 하기 때문에, HTML,CSS,JS를 한번에 다 받아온다. 즉 첫 요청시 딱 한페이지만 불러오고 페이지 이동시 기존 내부를 수정해서 보여주는 방식이다.
이를 클라이언트 관점에서 말하자면 최초 페이지를 로딩한 시점부터는 페이지 리로딩 없이 필요한 부분만 서버로 부터 받아서 화면을 갱신하는 것이다.
필요한 부분만 갱신하기 때문에 좀더 자연스러운 화면 전환이 가능하다!
하지만 첫 렌더링시 HTML,CSS,JS 파일을 한번에 받아와서 화면을 보여주어야 하기 때문에 첫로딩이 길다는 단점이 있다. 또한 SEO에 최적화가 되어 있지 않다.
[MPA]
MPA는 (Multi Page Application)의 줄임말로 페이지가 여러개 멀티로 보이는 방식이다.
페이지를 다시 보여주어야 하기 때문에 페이지가 전환되었을때 새로고침이 일어나는것 처럼 리로딩이 발생한다.
하지만 MPA는 SEO 에 최적화가 잘 되어있다. 서버로부터 미리 HTML 파일을 서버로 부터 즉각적으로 받아서 화면에 보여주기 때문에 첫 로딩이 짧다.
하지만 HTML 파일을 미리 받고 CSS,와 JS를 받아올때 까지는 사용자는 HTML 파일을 볼수 밖에 없다. hydarate 과정이 지난후 정상적으로 CSS 와 JS 가 동작 한다.
정리하자면 MPA는 여러 페이지를 렌더링 해주는 방식이다. 따라서 페이지를 다시 서버로 부터 요청을 받기 때문에 리로딩 같은 문제들이 생긴다. 또한 화면을 다시 렌더링해서 그려주기 때문에 렌더링 이슈도 발생한다. 하지만 서버로부터 HTML을 미리 받아서 렌더링을 시켜주기 때문에 첫로딩 시긴이 매우 짧다. 또한 HTML을 바로 서버에서 부터 불러오기 때문에 검색엔진 최적화에도 큰 도움이 된다.
