[Web] SSR vs CSR

SSR과 CSR?

SSR(Server Side Rendering)

서버측에서 렌더링 준비를 마친 채로 클라이언트에게 전달하는 방식

클라이언트가 서버에 페이지 요청 
> 서버는 렌더링 가능한 HTML 파일을 생성 
> 클라이언트는 서버로부터 렌더링 준비된 HTML 파일을 받게 되고, 즉시 렌더링 
> 클라이언트가 Javascript를 다운로드 받음(다운받는 사이에 유저는 페이지를 볼 수는 있지만 조작은 불가능)  
> 브라우저가 Javascript 실행 
> 사용자가 페이지 조작 가능

⚠ 그림에서 TTV(Time To View)는 화면까지의 도달 시간, TTI(Time To Interactive)는 반응을 하기까지의 시간이다.

CSR(Client Side Rendering)

클라이언트측에서 페이지를 렌더링 하는 방식

클라이언트가 서버에 페이지 요청 
> CDN이 HTML파일과 Javascript로 접근할 수 있는 링크를 클라이언트로 보낸다 
> 클라이언트는 HTML과 Javascript를 다운로드 받는다(SSR과 달리 유저는 페이지를 볼 수 없음) 
> 다운로드가 완료되면 Javascript가 실행되고, API가 호출된다 
> 서버가 API에 응답한다 
> 사용자에게 페이지가 보이게 되며 조작도 함께 가능한 상태로 바뀐다.

 

SSR과 CSR의 차이

1. 첫 페이지의 로딩 시간

- SSR은 서버에서 렌더링 준비를 마친 HTML파일을 먼저 보내주기 때문에 CSR보다 더 빠르게 첫 페이지를 볼 수 있다.

 

2. 나머지 페이지의 로딩 시간

- 첫 페이지는 SSR이 더 빠르지만, 그 후 나머지 페이지는 CSR이 더 빠르다. SSR은 페이지를 이동할 때 한 페이지를 다시 불러오지만, CSR은 그때그때마다 필요한 부분만 불러오기 때문이다.

 

3. SEO

-SSR은 CSR에 비해 SEO에 더 유리하다. 

SEO?
검색 엔진 최적화로, 웹 사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정이다. 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해 검색 결과의 상위에 나올 수 있게 한다. 자동화된 로봇인 '크롤러'가 웹 페이지를 읽는다.

CSR은 자바스크립트를 동작시켜 동적으로 컨텐츠가 생성되기 때문에 크롤러가 읽기 어렵다. 하지만, SSR은 서버에서 렌더링 준비를 모두 마친 HTML 파일을 넘겨주기 때문에 SEO에 더 유리하다. 

 

SSR과 CSR의 구현방법

SSR: JSP, PHP 등 서버 사이드 스크립트 언어 기반의 템플릿 엔진을 이용해 동적인 웹을 만드는 방식에서 사용

CSR: React.js, Vue.js, Angular, Backbone.js 등과 같은 Single Page Application(SPA)에서 사용

 

그래서 SSR+CSR? 🧐 

SEO에 유리하고 첫 페이지 로딩이 빠른 SSR과 나머지 페이지 로딩 시간이 빠른 CSR의 장점을 결합한 SSR+CSR 프레임워크가 등장했다. Next.js(React로 구현), Nuxt.js(Vue.js로 구현) 등이 있으며, 이와같은 프레임워크들은 첫 렌더링은 SSR로 구현하고, 그 다음부터는 CSR로 구현한다.

 

---

출처:

https://2dubbing.tistory.com/86 [비실이의 개발 성장기:티스토리]

https://proglish.tistory.com/216 [Blog 프로그래밍]

https://wonkooklee.github.io/thumbnail_maker/ [썸네일]