csr vs ssr

spa와 mpa 오늘날 

서버에 이미 잘 만들어진 html이 있고 사용자가 브라우저에서 주소로 접속하면 서버에 이미 배포되어 있는 html 문서를 받아와 보여주는 형식. 

페이지 내에서 

angular react vue - csr 시대로 접어든다. 

클라이언트 측에서 다 해먹는 것. 

html 은 텅텅 - 빈 화면

seo 

구

웹사이트

----------------------------------

spa - 하나의 페이지로 구성된 웹 어플리케이션. 

map - 탭을 이동할 때마다 새로운 html을 받아와 페이지 전체를 다시 렌더링하는 법

 

mpa의 단점이 있어 ajax가 등장하면서부터 원하는 부분만 클라이언트에서 동적으로 갈아끼울 수 있고 화면 깜빡임도 없는 spa를 사용하게 되었다. 

 

csr과 ssr에 대해 알아보자. 

spa에선 csr을 

mpa에선 ssr을 차용한다. 

 

spa는 웹 어플리케이션에 필요한 정적 리소스를 초반에 한 번에 모두 다운로드하고그 이후 새로운 페이지 요청이 있을 때 페이지 갱신에 필요한 데이터만 전달받아서 클라이언트에서 페이지를 갱신하기 때문에 자연스럽게 렌더링 방식으로 csr을 사용하게 되고 map는 새로운 요청이 있을 때마다 서버에서 이미 렌더링된 정적 리소스를 받아 오기 때문에 렌더링 방식으로 ssr을 사용하게 된다. 

spa는 csr , mpa는 ssr일까?? 아니다. 

csr이 가장 좋은 방식인가?

 

csr은 client side rendering 의 약자. 클라이언트 쪽에서 렌더링

ssr은 server side rendering의 약자. 서버쪽에서 렌더링

 

ssg - static site generation (static rendering) -> 서버에서 html을 보내준다는 측면에서는 ssr과 비슷하지만 언제 만들어 주느냐에 차이가 있다. ssr은 요청시 서버에서 즉시 html 을 만들어 응답하기 때문에 데이터가 달라지거나 자주 바뀌어서 미리 만들어두기 어려운 페이지에 적합하고 ssg는 페이지들을 서버엣 모두 만들어둔 뒤에 요청시에 해당 페이지를 응답하는 것이기 때문에 바뀔 일이 거의 없어서 캐싱 해두면 좋은 페이지에 사용하면 적합하다. 

 

csr -> 유저가 웹사이트에 방문 -> 브라우저가 서버에 콘텐츠를 요청하고 서버는 빈 뼈대만 있는 html을 응답으로 보내준다. 브라우저가 연결된 js 링크를 통해 서버로부터 다시 js 파일을 다운로드 받고 js를 이용해 동적으로 페이지를 만들어서 브라우저에 띄워준다. 

 

이때 csr 과정에서 중요한 포인트들을 몇 가지 살펴보겠다. 

먼저 js 파일을 다운로드 받아 동적으로 페이지를 만들어서 띄워주는 부분. csr은 브라우저가 js 파일을 다운로드 받고 동적으로 dom을 생성하는 시간을 기다려야 하기 때문에 초기 로딩 속도가 느리다. 

 

하지만 초기 로딩 이후 페이지 일부만 변경할 때에는 서버에 해당 데이터만 요청하면 되기 때문에 이후 구동 속도는 빠르다는 특징이 있다. 

 

서버가 빈 뼈대만 있는 html을 넘겨주는 역할만 수행하면 되기 때문에 서버측에 부하가 적다. 이밖에도 클라이언트 측에서 연산, 라우팅 등을 모두 직접 처리하기 때문에 반응 속도가 빠르고 ux도 우수하다는 장점이 있다. 

 

브라우저들이 가지는 웹 크롤러는 html을 읽어서 검색 가능한 색인을 만들어 내는데 웹 크롤러 봇 입장에서 본 html은 텅텅 비어있다. 

검색 엔진이 색인을 할만한 컨텐츠가 존재하지 않는다는 것이다. 

이때문에 csr은 검색엔진 최적화에 불리하다는 치명적인 단점이 있다. 

물론 남다르게 똑똑한 구글의 크롤러 봇은 자바스크립트를 실행할 줄 안다. 

그래서 csr 웹 크롤링도 가능하다고 한다. 하지만 아직 완벽한 단계가 아니고 구글 측에서도 여전히 크롤러 봇이 js를 실행하기 전에 더욱 빠르게 크롤링할 수 있도록 또, 자바스크립트를 실행할 수 없는 다른 크롤러 봇들을 위해 ssr을 고려해보라는 말을 덧붙이고 있다. 

 

 

ssr -> 유저가 웹사이트에 방문 -> 브라우저가 서버에 콘텐츠를 요청하고 서버에서는 즉시 페이지에 필요한 데이터를 얻어와 모두 삽입하고 css까지 모두 적용해서 렌더링 준비를 마친 html과 js 코드를 브라우저에 응답으로 전달.

 

브라우저에선 바로 전달받은 페이지를 띄운다. 6:30