SPA(Single Page Application)

한 개의 페이지로 구성된 어플리케이션 입니다.
웹 어플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드합니다.
그 후 새로운 페이지 요청을 받을 경우 페이지 갱신에 필요한 데이터만 전달 받아 페이지를 갱신합니다.
SPA가 렌더링하는 방식을 CSR(Client Side Rendering) 이라고 합니다.

SPA의 예시로는 Angular, React, Vue 등이 있습니다.

CSR (Client Side Rendering)

최초 요청시에 HTML과 CSS등 각종 리소스를 받아옵니다. 이 때 SSR보다 많은 리소스를 요청하기 때문에 렌더링 속도는 SSR이 훨씬 빠릅니다.
이후 다른 페이지로 이동시에는 SSR보다 빠른 페이지 전환 속도와 더 나은 사용자 경험을 제공합니다.

MPA(Multiple Page Application)

여러 개의 페이지로 구성된 어플리케이션 입니다.
새로운 페이지를 요청할 때 마다 서버에서 렌더링된 정적 리소스(HTML, CSS, JavaScript)가 다운로드 됩니다.
MPA는 SSR(Server Side Application)방식으로 렌더링합니다.

MAP의 예시로는 jsp, php등으로 구축된 웹사이트가 해당됩니다.

SSR(Server Side Rendering)

많은 웹사이트들은 페이지를 이동할 때 마다 서버에 새로운 페이지에 대한 요청을 하는 SSR방식을 택하고 있습니다.
서버에서 렌더링을 마치고 데이터가 결합된 HTML파일을 내려주는 방식입니다.

MPA의 장단점

장점

• 완성된 형태의 HTML파일을 서버로부터 전달받기 때문에 크롤링하기 적합하고, 첫 로딩 시간이 짧습니다.

단점

• 새로운 페이지로 이동할 때 마다 리로딩이 발생하기 때문에 화면이 깜빡거립니다.
• 불필요한 템플릿도 중복해서 로딩하기 때문에 성능면에서 좋지 않습니다.
• 모바일 앱 개발시 추가적인 백엔드 작업이 필요해 개발이 복잡해질 수 있습니다.

SPA의 장단점

장점

• 자연스러운 사용자 경험을 제공합니다.
• 필요한 리소스만 부분적으로 로딩해서 성능면에서 MPA보다 좋습니다.
• 서버의 템플릿 연산을 클라이언트로 분산합니다.

단점

• JavaScript파일을 한 번에 받기 때문에 초기 구동속도가 느립니다.
• 검색엔진 최적화가 어렵습니다.(SSR을 사용하면 해결 가능)
• 프론트엔드에 비즈니스 로직이 최소화되어 보안 문제가 있습니다.
  (SSR에서는 세션으로 사용자의 정보를 저장하지만 CSR방식에서는 쿠키말고는 정보를 저장할 공간이 마땅치 않습니다.)

※주의할 점

SPA방식이라고 해서 모두 CSR인 것은 아닙니다.

Vue를 위해 SSR을 지원하는 프레임워크가 Nuxt.js입니다.