비전공자 관점에서 보는 MPA, SPA, CSR, SSR

 

 

MPA & SPA : 웹 어플리케이션을 구성하는 형태

MPA(Multiple Page Application)

- 전통적인 방식, 다수의 페이지로 구성되어 요청마다 정해진 페이지를 반환

SPA(Single Page Application)

- 단일 페이지, 해당 페이지 자체에서 화면을 재구성 ex) React

 

 

 

 

CSR & SSR : 렌더링 방식

 

CSR

- 클라이언트 사이드(브라우저)에서 HTML 문서를 렌더링

- SPA의 방식

- 최초 요청 시 받아온 HTML 문서는 거의 비어있으며, 그 후 JS 등 다른 파일을 로드하여 브라우저 단에서 렌더링을 실시해 화면을 구성.

 

특징

1. 로딩시간 - 초기 로딩이 완료되기 까지 오래 걸림
2. SEO - 빈 HTML 문서가 넘어오므로 최적화가 어려움
3. 인터랙션 속도 - 번들링된 js 파일에 모든 렌더링 관련 로직이 있기 때문에 초기로딩을 제외하고 매우 빠른 속도
4. 페이지 이동 - 새로고침이나 깜빡임 발생 x

 

SSR

- 서버 사이드에서 HTML 문서를 렌더링

- MPA의 방식

- 하드코딩된 정적 페이지들을 요청에 따라 반환. 즉 이미 서버 사이드에서 렌더링이 완료된 최종 문서를 반환

 

특징

1. 로딩시간 - CSR에 비해 매우 짧음
2. SEO - 이미 렌더링된 문서가 전달되므로
3. 보안 - 사용자 정보를 서버측 세션으로 관리하기에 용이
4. 페이지 이동 - 새로고침 현상과 대기시간 발생

 

마무리

SPA 형태에 SSR을 지원하도록 설정하는 프레임워크

: Vue의 Nuxt.js / React의 Next.js, Gatsby.js

-  SPA 형태에서 두 가지 렌더링 방식을 혼합해서 사용!

 

 

 

참고 : 

https://velog.io/@longroadhome/FE-CSRClient-Side-Rendering-vs-SSRServer-Side-Rendering-feat.-React%EB%A5%BC-%EC%A4%91%EC%A0%90%EC%9C%BC%EB%A1%9C

[FE] CSR(Client-Side-Rendering) vs SSR(Server-Side-Rendering) (feat. React를 중점으로)