01.2. CSR과 SSR

CSR and SSR

CSR과 SSR

앞서, 브라우저 랜더링이란 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면(view)에 표시해주는 작업을 말했습니다. 즉, 브라우저가 서버로부터 HTML, CSS, JavaScript 문서를 전달받아 브라우저 엔진이 각 문서를 해석해 브라우저 화면을 그려주는 것입니다.

예를 들어서, 크롬 브라우저 주소창에 www.tk.kr을 입력하면, 브라우저는 tk의 서버로부터 tk 웹사이트에 대한 정보를 받아와 브라우저 화면에 tk홈페이지를 그려주는 것입니다.

그런데, 이러한 브라우저의 랜더링 방식에는 크게 두 가지가 있습니다.

• 클라이언스 사이드 랜더링 (CSR)

• 서버 사이드 랜더링 (SSR)

클라이언트 사이드 렌더링(CSR)

• 클라이언트 사이드 랜더링(CSR)은 클라이언트인 브라우저가 랜더링을 처리하는 방식입니다. 즉, 서버에서 받은 데이터를 통해 클라이언트의 브라우저가 화면(view)를 그리는 주체가 되는 셈입니다.

CSR의 장점

• 네이티브 앱과 같은 빠른 상호작용을 구현할 수 있습니다.

  • View 랜더링을 서버가 아닌 브라우저에게 담당시킴으로서 서버 트래픽을 감소시키고, 사용자에게 더 빠른 인터렉션을 제공해줍니다.

  • 새로고침이 발생하지 않아 사용자가 앱과 비슷한 경험을 할 수 있습니다.

CSR의 단점

• 첫 페이지 로딩 속도가 서버 사이드 랜더링에 비해 다소 느린편입니다.

  • 서버에 첫 요청 시 전체 페이지에 대한 모든 문서 파일을 받다 보니 SSR(서버사이드렌더링)에 비해 초기 로딩 속도가 느린편입니다.

• 검색엔진최적화(SEO)에 대한 추가 보완 작업이 필요합니다.

  • 포탈사이트 검색엔진 크롤러가 웹사이트에 대한 데이터를 제대로 수집하지 못하는 경우가 발생할 수 있습니다. 구글 검색엔진의 경우 자바스크립트 엔진이 내장되어 있어 크롤링이 되지만, 네이버, 다음의 경우 검색엔진이 제대로 크롤링하지 못하기 때문에 별도의 보완작업이 필요합니다. (예: sitemap 문서 작성)

서버 사이드 렌더링(SSR)

• 서버 사이드 렌더링은 클라이언트(브라우저)가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식입니다. 클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면(View)을 만들어 제공하는 것입니다. 즉, 서버가 화면(View)를 그리는 주체가 됩니다.

SSR의 장점

• 첫 페이지 로딩 속도가 CSR에 비해 더 빠른 편입니다.

  • 해당 첫 페이지에 해당하는 페이지의 문서만 브라우저에게 전달하기 떄문에 초기에 전부 받아오는 CSR에 비해 빠르다고 할 수 있습니다.

• 검색엔진 최적화(SEO)가 가능합니다.

  • CSR은 하나의 최상위 DOM안에 애플리케이션을 내포하고 있습니다. 이를 SPA라고 하는데, 그렇기 때문에 에플리케이션의 정보들을 크롤링하기란 쉽지가 않습니다.

  • 그에 반해 SSR은 매 페이지마다 DOM 트리가 다르기 때문에, HEAD 의 META정보등을 조정할 수 있게 됩니다.

SSR의 단점

• 초기 로딩 이후 페이지 이동 시 속도가 CSR에 비해 느린 편입니다.

  • 페이지 마다 서버에게 필요한 데이터를 요청하고 서버가 응답해주면서 브라우저를 그려주는 방식이다 보니 속도가 CSR에 비해 느립니다.