* SPA, MPA, CSR, SSR

 

Single Page Application

 

• SPA 는 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식
• CSR(Client Side Rendering) 방식으로 렌더링한다.
• 단 한 번만 리소스(HTML, CSS, JavaScript) 를 로딩한다. 그 후에는 데이터를 받아올 때만 서버와 통신한다.
• 즉, 첫 요청 시 딱 한페이지만 불러오고 페이지 이동 시 기존 페이지의 내부를 수정해서 보여준다.
• 이를 클라이언트 관점에서 말하자면 최초 페이지를 로딩한 시점부터는 페이지 리로딩 없이 필요한 부분만 서버로 부터 받아서 화면을 갱신하는 것이다.
  필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 사용자 경험(UX)을 제공할 수 있다.
• Angular, React, Vue 등 프론트엔드 기술들이 나오면서 크게 유행하고 있다.

 

 

 

😁  SPA 장점

1. 자연스러운 사용자 경험 (UX)

    

   - 전체 페이지를 업데이트 할 필요가 없기 때문에 빠르고 '깜빡' 거림이 없다.

 

2. 필요한 리소스만 부분적으로 로딩 (성능)

 

   - SPA의 Application은 서버에게 정적 리소스를 한 번만 요청한다. 그리고 받은 데이터는 전부 저장해놓는다. (캐시)

 

3. 서버의 템플릿 연산을 클라이언트로 분산 (성능)

 

4. 컴포넌트별 개발이 용이 (생산성)

 

5. 모바일 앱 개발을 염두에 둔다면 동일한 API를 사용하도록 설계 가능 (생산성)

 

😥 SPA 단점 

 

1. JavaScript 파일을 번들링해서 한 번에 받기 때문에 초기 구동 속도가 느리다.

  => Webpack의 code splitting으로 해결 가능

 

2. 검색엔진최적화(SEO0가 어렵다 

  => SSR 로 해결 가능

 

 

 

Multi Page Application 

 

• MPA 는 서버에 미리 여러 페이지를 두고, 유저가 네비게이션 시 요청에 적합한 페이지를 전달.
• 미리 서버에서 전체 페이지를 빌드해 브라우저로 전송됨.
• 서버에 라우팅을 처리하는 기능이 있고, 서버에서 여러 페이지를 관리함.
• 페이지 요청마다 모든 리소스를 다시 받아오므로, 페이지 간 데이터를 재활용하기 힘듦.

 

😁 MAP 장점

 

1. SEO 관점에서 유리하다.

 

  - MPA는 완성된 형태의 HTML 파일을 서버로부터 전달받는다. 따라서 검색 엔진이 페이지를 크롤링하기에 적합하다.

 

2. 첫 로딩이 매우 짧다.

 

   - 서버에서 이미 렌더링해서 가져오기 때문.

 

😂 MPA 단점

 

1. 새로운 페이지를 이동하면 '깜빡'인다. (UX)

 

  - 새로운 페이지를 요청할 때마다 전체 페이지를 다시 렌더링하기 때문/

 

2. 페이지 이동 시 불필요한 템플릿도 중복해서 로딩 (성능)

 

3. 서버 렌더링에 따른 부하

 

✅ SSR vs. CSR

 

• SSR이 렌더링 하는 방식 

웹에 시작부터 MPA가 있었다. 사실 MPA라는 용어도 SPA와 비교를 위해 등장한 인상이 강하다. 웹의 초기부터 SPA에 대한 구현체들이 나오기 전까지는 전통적인 웹사이트들은 모두 MPA 형태로 서비스해 왔다.

 

MPA는 페이지를 이동할 때마다 새로운 페이지를 요청한다. 모든 템플릿은 서버 연산을 통해서 렌더링하고 완성된 페이지 형태로 응답한다. 이 과정을 서버 사이드 렌더링(SSR)이라고 부른다.

 

서버 사이드 렌더링의 장점은 SEO이다. 전통적인 MPA의 경우 브라우저에서 JavaScript 코드가 동작하기 전에도 완성된 형태의 템플릿 (HTML에 데이터가 삽입된 상태)을 서버로 부터 전달받는다. 이 때문에 검색로봇이 페이지를 크롤링하기에 매우 적합하다.

 

 

• CSR이 렌더링 하는 방식 

최초에 한번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다, 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링하는 방식이다. SEO가 어렵다는 큰 단점이 있다.

 

 

❕ 출처 

 

https://hanamon.kr/spa-mpa-ssr-csr-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EB%9C%BB%EC%A0%95%EB%A6%AC/