SPA, MPA, CSR 그리고 SSR

sanha_OvO·2022년 3월 7일

CS frontend

Frontend

목록 보기

6/7

🖥 MPA(Multi Page Application)

여러 개의 페이지로 구성된 어플리케이션.

새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스(HTML, CSS, JavaScript)가 다운로드된다.

페이지 이동하거나 새로고침하면 전체 페이지를 다시 렌더링한다.

👍 MPA 장점

MPA는 완성된 형태의 HTML 파일을 서버로부터 전달받는다. 따라서 검색엔진이 페이지를 크롤링하기에 적합 → SEO 측면에서 유리함
서버에서 이미 렌더링되있는 상태로 가져오기 때문에 첫 로딩 매우 짧다 → 다만 로직을 담당하는 JS파일을 들고오기 전에 기능이 작동하지 않음

👎 MPA 단점

매 페이지 요청마다 새로고침 발생. 페이지 이동시 불필요한 템플릿도 중복해서 로딩되어 서버 렌더링에 따른 부하가 일어남
모바일 앱 개발시 추가적인 백엔드 작업 필요 → 개발이 복잡해질 수 있다.
서버에서 프론트엔드 및 백엔드를 전부 관리하기 때문에 협업 어려움

🖥 SPA(Single Page Application)

한 개의 페이지로 구성되어 있는 어플리케이션.

사이트 최초 진입시에만 모든 리소스를 받아오고 이 후 데이터를 Fetch할 때만 서버와 통신

즉, Virtual Dom에 의해 필요한 부분만 갱신

👍 SPA 장점

프론트엔드 서버와 백엔드 서버의 분리
전체 페이지를 업데이트 할 필요가 없기 때문에 빠르고 ‘깜빡’ 거림이 없다: 필요한 리소스만 부분적으로 로딩하기 때문에 성능상에 우위를 가질 수 있으며, 새로고침을 최소화하여 좋은 사용자 경험(UX)을 줄 수 있다
SPA의 Application은 서버에게 정적리소스를 한 번만 요청하고, 받은 데이터는 캐시에 전부 저장하여 필요없는 리렌더링을 줄인다.
서버의 템플릿 연산을 클라이언트로 분산하여 서버의 부하를 줄일 수 있음
컴포넌트별 개발 용이 (생산성)

👎 SPA 단점

JavaScript 파일을 번들링해서 한 번에 받기 때문에 초기 구동 속도가 느리다
SSR에서는 사용자에 대한 정보를 서버측에서 세션으로 관리를 하지만 CSR 방식에서는 클라이언트측의 쿠키말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않다
검색엔진최적화(SEO)가 어렵다

SSR(Server Side Rendering)

사용자의 브라우저에 띄울 화면은 서버에서 렌더링을 한 이후에 완성된 페이지를 응답하게 됨

CSR(Client Side Rendering)

페이지 진입 시 최초에 한번만 모든 리소스를 클라이언트 측에 전달하고, 해당 리소스들을 통해 클라이언트 측에서 렌더링을 진행하는 방식

🤔 그럼에도 불구하고 SSR을 고려하는 이유

위에서 알아본 것 처럼 SPA가 등장하고 그 특성때문에 CSR을 많이들 사용하게 되었다.

다만 위에서 서술했던 것 처럼 초기에 많은 리소스를 받아와야 하기 때문에 페이지 초기 진입시 사용자에게 불편한 경험을 줄 수 있다는 것과 SEO(Search Engine Optimization)에 유리한 점을 가지는 SSR을 고려하게 된다.

일반적인 검색엔진 봇이 SPA 어플리케이션의 페이지를 볼 때 아래 코드와 같은 소스를 보게 된다.

<html>
<head>
  <title>Single Page Application</title>
  <link rel="stylesheet" href="app.css" type="text/css">
</head>
<body>
  <div id="app"></div>
  <script src="app.js"></script>
</body>
</html>