무릇 기술 용어들이 그렇듯 SSR, CSR 그리고 그와함께 따라오는 SPA, MPA, SEO같은 단어들은 볼때부터 숨이 막힌다
이번에도 부숴볼예정
일단은, SPA MPA부터
SPA:Single Page App
MPA:Multi Page App
쉽죠..?이해하고 할 것도 없음. 걍 단어 그대로 SPA는 리앵뷰처럼 index.html한놈만 가지고 있는 것임. 그래서 가상돔으로 이리저리 해주는게 SPA이다.. html이 여러장인 녀석을 보고 MPA라고 부르기로 사회적 합의를 봤나 봅니다
그럼 CSR, SSR은 뭔데????????????
1) CSR:Client Side Rendering
이놈은 초기 로드시 빈 html과 모든 로직이 담긴 js를 로드함.
그 후 텅텅 빈 html를 js를 이용해서 그림을 그림.
클라이언트 단에서 렌더링을 한다하여 클라이언트 사이드 렌더링이라고 부릅니다.
이렇게 구동하면, js를 이용해서 DOM을 그려서 원하는 부분만 업데이트를 한다.
이말이 무슨말인지 생각을 해봤는데
리액트 컴포넌트 단위로 업데이트 하는 것처럼..원하는 부분만 업데이트 할 수 있게 하는것..인듯?
단점..
1. 한번에 html 한장과 js 수십수백장을 로드하기에 처음 로드가 오래걸리고,
2. 페이지에 대한 정보가 html에 담겨있지 않기 때문에 seo에도 안걸림(seo:search engine optimization, 구글링하면 띄울 거리 잡는놈)
2) SSR:Server Side Rendering
서버에서 js까지 먹인 html 파일을 보내줌
클라이언트에서 요청 할 때마다 html파일을 보내주는 것임.
mpa랑 짝지임
요청할 때마다 필요한 html파일을 받을 수 있기때문에, 초기에 모든것을 받지 않아도 돼서 초기 로드는 빠르다. html이 많으니까 seo에 걸릴 거리도 많다.
하지만 단점..
링크 이동시 새로운 html을 받아야하기에, 화면 깜빡임이 생긴다.
그리고 그 html에는 기존의 푸터, 헤더같은 재활용된 컴포넌트까지 포함된다. 그래서 당연히 csr보다 페이지간 이동은 느리다.
그럼 이녀석들 언제 쓰면 될까요
웹 애플리케이션, 예를들어 내가 매일 들어가는 이카운트 같은놈은 interaction이 많다.
모달도 많고 textarea며 input이며..게다가 그 많은 상호작용속에도 헤더는 굳건히 버텨야한다.
그런경우에 ssr을 쓰게된다면.. 너무 느리지 않을까 그럴 때는 csr을 써줘야하는것..
반면 내가 매일 들어가는 또다른 웹사이트, homecuisine (https://homecuisine.co.kr/)의 경우는, 사실 사용자가 댓글을 다는 행위 외에는 크게 상호작용이 일어날 데가 없고, 우리는 그저 이윤정 선생님의 화려한 레시피를 품은 포스트들을 보면서 침이나 삼킬 뿐이다.. 이윤정 선생님은 글도 길게 쓰시고 고화질 사진도 많이 올리시기에, mpa가 제격이다. 게다가 이런 이로운 레시피는 널리 알려야하기에 seo가 잡아주면 좋겠지?
결론은
SSR과 CSR, SPA와 MPA 모두 어려워 보이지만 사실 찔빱쉬운놈들이었고,
SSR이라고 무조건 나쁜것, CSR이라고 무조건 좋은 것도 아니었다.
결국 개발자는 UX를 생각해야하는구나..라는 결론에 도달했다..끝
