지난 회차 수업에서는 SPA 환경에서의 CSR에 어떤 기술이 녹아있으며, 그것들이 웹 서비스에 어떤 진전을 가져왔는지 알아봤습니다. 재미있으셨길 바랍니다 :)
CSR은 웹 사이트 패러다임에 대단히 큰 변화를 가져왔지만 모든 기술에는 양면이 있습니다. 이제 CSR의 장단점을 조금 더 들춰볼 차례인데요. 그 특징을 좀 더 도드라지게 들여다보려면, 반대편에 있는 기술인 SSR이 어떻게 돌아가는 기술인지 간략하게 체크해볼 필요가 있습니다.
[https://www.patterns.dev/posts/server-side-rendering/](https://res.cloudinary.com/ddxwdqwkr/video/upload/v1617495417/patterns.dev/serverside-rendering-1.mov)
https://www.patterns.dev/posts/server-side-rendering/
SSR이란 무엇일까요? 간단히 말하자면 제공하고자 하는 웹 서비스의 화면을 서버 측에서 그리는 방법을 통칭하는 용어입니다. 웹 서비스는 결국 화면으로 보여줘야하고 그걸 그리기는 그려야겠는데, 클라이언트 단에서 그리냐 서버 단에서 그리냐의 차이가 있을 뿐입니다.
기억에 잘 남는 음식 예시를 하나 들어보죠. 배민에서 낙곱새를 하나 시켰다고 가정해보겠습니다. 보통 낙곱새를 배달 주문하면 1) 비조리 포장, 2) 조리 포장 두 가지 옵션이 있습니다.
낙곱새의 폭력적인 비주얼…
비조리형 포장으로 배달을 시키면 낙곱새 재료들을 불만 올리면 먹을 수 있는 형태로 포장해주시죠. 배달을 통신으로, 음식 재료를 페이지를 그리는데 필요한 asset들로, 음식을 조리하는 것을 브라우저가 렌더링하는 것으로 놓고 생각해보면 CSR과 구조적으로 동일합니다.
그렇다면 식당에서 낙곱새를 조리한 다음 배달하는 방식은 SSR이라고 할 수 있겠네요. 식당(서버)에서 음식을 조리(렌더링)가 완료된 다음 손님(브라우저)에 배달(응답)하니까요.
조금 억지 같기는 하지만 이렇게도 생각해볼게요.
여러분이 낙곱새집 사장님이라고 가정해보겠습니다. 가게를 오픈했으니 많은 손님들한테 소문이 났으면 좋겠구요. 그런데 여러분이 차린 가게는 배달 전문이라서 매장에 손님이 들어와서 음식을 먹을 수는 없습니다. 길가를 오가던 행인들은 배달부가 들고다니는 포장용기만을 볼 수 있을 뿐입니다. 입 소문 내기는 어렵겠네요.
반면 홀이 있는 식당의 경우에는 지나다니는 행인들이 매장에서 식사를 하고 있는 손님들이 먹는 음식을 볼 수 있습니다. 배달 전문 매장에 비해 더 많은 정보를 얻을 수 있는 만큼 행인들이 “야 저기 낙곱새 맛있겠다”며 입소문을 내기도 쉽겠네요.
여기서 행인들을 구글, 네이버 등이 운영하는 검색엔진으로, 배달 전문 매장은 CSR, 홀 매장은 SSR로 바꿔놓고 생각해보겠습니다.
(검색 엔진 크롤러가 노크 한다)
(끼익) ← 문이 열린다 (페이지 요청)
(빈 집) ← 첫 페이지
(조사 못하고 크롤러 퇴장)
(js 파일 다운로드 되며 페이지 로드) ← 뒷북
⇒ 검색 노출 안 됨 🙅🏻♂️
(검색 엔진 크롤러가 노크 한다)
(끼익) ← 문이 열린다 (페이지 요청)
(주인이 검색 엔진을 맞이하며) "검색 엔진님 어서오세요. 저희 사이트는..." ← 첫 페이지
(조사를 마친 크롤러 퇴장)
⇒ 검색 노출 됨 🙆🏻♀️
크롤러 입장에서 렌더링(조리)이 되지 않은 정보값이 없는 페이지를 보고 색인(Indexing, 검색 엔진 사전에 등록)해둘 수가 없다는 자명한 사실을 이해하고 나면 SSR, SSG가 SEO(Search Engine Optimization)에 왜 유리한지 받아들이기 쉽습니다.
검색이 된다는 것은 어딘가의 DB에 정보가 적재되어 있다는 것이고, 정보가 적재되어 있다는 뜻은 가져갈 원본 정보가 있었다는 뜻입니다.