SPA vs MPA (CSR, SSR)

🔎Web

SPA vs MPA (CSR, SSR)

IOTrue 2022. 12. 29. 14:00

🔎 SPA 방식, MPA 방식

✅ SPA 방식

SPA : Single Page Application
단 하나의 페이지로 이루어진 어플리케이션

-어플리케이션 내에서 페이지 이동 시 JS를 통해서 현재 보고 있는 DOM의 내용을 모두 제거하고

이동할 페이지에 맞는 컨텐츠로 DOM을 그린 후

브라우저 상의 URL을 변경하여 페이지를 이동한 것 같은 느낌을 주는 방식

-어떤 페이지를 접속하더라도 HTML, CSS, JS를 동일한 파일 하나만 접속한 페이지에 맞게 화면을 구성한다.

-최근 JS 프레임워크들은 SPA를 기본으로 하고 있다. (React, Vue, Angular 등)

-쉽게 말하면 기본 뼈대만 있고, 각 페이지에 맞는 컨텐츠로 DOM을 그린 후 재출력하는 방식이다.

-그래서 페이지 이동을 해도 화면 깜빡임이 없다!

<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

SPA 방식의 기본 페이지의 코드는 이런 방식으로 되어 있다

✅ MPA 방식

MPA : Multiple Page Application
여러 개의 페이지로 이루어진 어플리케이션

-각 화면마다 HTML, CSS, JS등의 파일들이 존재한다.

-페이지 별로 해당 페이지에 맞는 HTML, CSS, JS 파일 등을 서버로부터 받아서 화면을 구성한다.

-페이지 이동시 화면 깜빡임이 있다!

<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <div>작성되어 있는 컨텐츠</div>
    ...
    ...
    ...
  </body>
</html>

MPA 방식의 기본 페이지의 코드는 이미 작성되어 있다

그리고 CSR, SSR 이라는 게 있다.

🔎 CSR 방식, SSR 방식

✅ CSR 방식

CSR : Client Side Rendering

-처음에 브라우저가 서버로부터 HTML과 static 파일들을 받아오고,

사용자의 요청에 따라 js를 통해 페이지 컨텐츠에 맞는 view를 동적으로 렌더링하는 방식.

-서버는 파일 전달자 역할만 한다.

-서버로부터 처음에만 페이지를 받아오고 이후부터는

클라이언트 혼자 화면을 그릴 수 있으므로 빠른 화면 전환이나 인터랙션이 가능하다.

-SEO에 취약하다 (하지만 각 프레임워크들은 SEO 취약을 보완하는 기술들을 선보이고 있다)

-페이지를 요청할 때에만 해당 데이터와 컨텐츠를 가져오기 때문에 페이지 전환이 빠르다

✅ SSR 방식

SSR : Server Side Rendering

-사용자의 요청에 따라 서버로부터 HTML과 data가 함께 있는 템플릿을 받아온다.

-이미 DOM이 다 구성된 파일을 브라우저가 받기 때문에 초기 구동 속도가 빠르다.

-사용자가 요청할 때마다 브라우저의 새로고침이 일어나는 방식.

💡 CSR, SSR 정리

CSR 방식, SSR 방식 두 가지 방식 중

절대적으로 빠르거나 느리거나 좋고 나쁨은 없다.

이용하는 서버와 사용자의 이용 환경에 따라 다르기도 하고

실행되는 기타 요소들에 따라 다를 수 있기 때문이다.

고객 데이터를 보호해야 하는 경우나 비용에 민감할 경우 CSR를 선택할 수 있고,

정적 콘텐츠와 기본 데이터가 많은 경우에는 SSR을 선택할 수도 있고,

두 가지를 섞어서 서비스를 구성해야 할 수도 있다.

즉, 프로젝트나 서비스에 맞는 방법을 사용하는 것이 바람직하다.

❗ 결론

-CSR 방식, SSR 방식 : 렌더링을 어디서 하는지의 차이

-SPA 방식, MPA 방식 : 페이지를 한 개 사용하는지 여러 개를 사용하는지의 차이

참고

https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8