[TIL] 230201 SPA

SPA?

Single Page Application - 한 개의 페이지로 이뤄진 앱

MPA(Multi Page Application) 과 상반된 개념

왜 SPA가 좋은가?

 

MPA는 어떠한 이벤트가 발생할때마다 웹페이지가 Reload 되어 Re-rendering되 데이터를 많이 잡아 먹는 문제가 있다.

왜냐하면 SSR을 사용하기 때문! 하지만,

 

SPA를 사용하면 필요한 부분만 수정해 웹페이지가 Reload 되는 문제가 없다. SPA에는 대부분 CSR을 권장하고 사용하고 있다.

[CSR] / [SSR]
SSR - Server Side Rendering
서버쪽에서 랜더링 준비를 끝마친 상태로 클라이언트에 전달됨

CSR - Client Side Rendering
랜더링이 클라이언트 쪽에서 일어남

SPA 장점

1. 딱 한개의 페이지 싱글 페이지로 구성된 앱
2. 서버에 1회 리소스
3. 필요한 데이터만 받아와 새로고침 없이 데이터 수정
4. 자연스러운 UX 구현
5. Angular, Vue가 비슷한 기술
6. React를 사용하면 안드로이드/iOS 앱까지 만들 수 있음 (Expo에 대해 배워야함)

SPA 단점

1. 싱글 페이지 이기 때문에 SEO에 취약함
2. 이것을 보안하기 위해 Next.js가 등장 (ReactJS 베이스)

컴포넌트

1. 재사용이 가능한 블럭 이라고 생각하면 됨.
2. 헤더/바디/푸터 안에 많은 컴포넌트들이 존재

• SPA 기반: 컴포넌트 단위로 변경사항을 반영 (Re-rendering 없음)
• MPA 기반: 하나의 변경사항을 위해 전체 페이지 리로딩 (Re-rendering 됨)