SPA 장점
1. 페이지 변환이 자연스럽다.
당연함. 처음 접속할 때 다 다운받아 놓음. 깜박임 X
2. 필요한 리소스만 부분적으로 로딩
캐시로 저장해놓기 때문에 성능면에서 좋음!
3. 컴포넌트 별 개발 용이
SPA 단점
- 정적 파일을 번들링해서 초기에 한번에 받기 때문에
최초 접속 시 속도가 느림- 검색 엔진 최적화 (SEO)가 어려움
(SSR로 해결 가능함)- 보안 이슈
SSR에선 사용자에 대한 정보를 세션으로 관리하지만,
CSR에선 쿠키말고는 저장할 공간이 마땅치 않음
MPA 장점
1. 검색 엔진 최적화 (SEO)가 쉬움
서버로부터 view(HTML)를 리턴받기 때문에,
검색 엔진이 크롤링하기 쉬움!
2. 초기 로딩 시간이 짧음
아무래도 첫 페이지만 렌더링해서 가져오니까~
MPA 단점
- 새로운 페이지로 이동 시 페이지가 깜빡 거림
- 페이지 이동시 불필요한 템플릿도 중복해서 로딩
(성능 저하)- 서버 렌더링에 따른 부하
위에서 봤듯이 SPA는 클라이언트에서 대부분 렌더링하고,
MPA는 서버에서 렌더링해서 제공해주기 때문에
SPA == CSR
, MPA == SSR
라고 공식처럼 생각하기 마련이다.
근디 SPA도 SSR로 구현할 수 있다!
Nuxt 맛보기 해봤는데 이것도 글로 남겨야겠다.
React - Next.js
Vue - Nuxt.js
Angular - Angular Universal
Server Side Rendering
Wireshark
를 이용해서 동작을 확인해보았다.응답에 view(HTML) 가 포함되어 있음
Client Server Rendering