MPA와 SPA
MPA와 SPA의 차이점은 사이트의 페이지 수에 따라 나뉜 개념입니다.
MPA는 multiple-page application의 약자로 페이지가 여러 개 있다는 뜻입니다.
과거 서버에서 만든 정적 HTML을 그대로 프론트엔드에서 내려서 보여주는 단순한 기능만 했을 때는 페이지가 여러 개 였습니다. 그래서 다음 페이지를 이동할 때 서버에서 직접 내려줘야 했기 때문에 UX적으로 매끄럽지 못했습니다.
그러다 AJAX의 도입으로 데이터가 바뀔 때 페이지 전체를 리로드하는 것이 아닌 페이지의 일부만을 바꿀 수 있게 되었습니다.
그러면서 나온 개념이 SPA입니다. single-page application의 약자로 페이지가 하나라는 뜻입니다.
페이지 이동을 할 때 헤더라든지 네비 등 전체적인 레이아웃 틀은 유지되고 일부만 바뀌면서 페이지가 여러 개 있다고 착각을 일으키지만 실제로는 하나의 페이지만 있는 것이 SPA의 개념입니다.
그러면서 나온 것들이 React, Vue, Angular가 될 수 있겠네요.
CSR과 SSR
CSR은 Client Side Rendering이고 SSR은 Server Side Rendering의 약자입니다.
페이지 랜더링을 어디에서 하나의 차이입니다.
CSR은 초기에 모든 데이터를 받고 그 이후에 JS로 페이지를 동적으로 제어하여 자연스러운 UX를 줄 수 있습니다. 하지만 초기에 모든 데이터를 받기 때문에 초기 로딩이 느립니다. JS로 페이지를 동적으로 만들고 제어하기 때문에 크롤링하는 검색엔진 입장에서는 텅텅 빈 HTML을 보게 됩니다. 그래서 SEO 최적화에 불리하단 단점이 있습니다.
SSR은 이런 SEO 단점을 보완한 것으로 SSR은 서버에서 렌더링 한 결과를 그대로 넘겨주어 렌더링 하게 됩니다. 그렇게 되면 각자 페이지를 서버에서 만들어줘서 내려주기 때문에 SEO에는 유리하다는 장점이 있습니다. 하지만 단점 역시 있는데 서버가 계속 페이지를 렌더링 하기 때문에 서버의 부담이 있을 수 있습니다. 그리고 페이지가 렌더링 되었지만 동적인 역할을 하는 JS를 로딩하는데 잠깐의 간극이 있을 수 있어 UX적으로는 매끄럽지 못하다는 단점이 있습니다.
CSR 장점
- UX 친화적임
- 서버의 부담이 적음
- 페이지 이동이 부드러움
CSR 단점
- SEO에 불리함
- 초기 로딩이 느림
SSR의 장점
- SEO에 유리함
- 초기 로딩 속도가 빠름
SSR의 단점
- UX적으로 매끄럽지 못함
- 서버의 부담이 있음
SSG란
SSR의 일종입니다. 서버에서 페이지를 렌더링한다는 점은 동일하지만 어느 시점에 렌더링을 하나의 차이가 있습니다. SSG는 정적으로 미리 렌더링을 해주어 내려주는 역할을 합니다.
