SSR CSR

38기 정관훈·2023년 1월 17일

React next

# 정의

서버 사이드 렌더링(SSR)이란?

서버 사이드 렌더링이란 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미한다.

클라이언트 사이트 랜더링(CSR)이란?

클라이언트 사이드 렌더링이란 초기 웹사이트 접속시 서버로부터 모든 파일을 불러와 클라이언트에서 페이지를 렌더링한 후 보여주는 방식이다.

# 차이점

1. 웹페이지 로드 시간

첫 페이지 로드 시간은 사용자가 웹 사이트를 처음 로드할 때 걸리는 평균시간이다. 첫 로드에서 CSR에서는 브라우저가 기본 HTML, CSS 및 필요한 모든 스크립트를 한 번에 로드한 다음 브라우저에서 사용 가능한 콘텐츠로 HTML을 compile 한다. 이 시간은 보통 미리 컴파일된 HTML과 해당 스크립트를 서버에서 가져오는 것보다 더 많이 걸린다. 즉, SSR이 첫 페이지 로드시간이 덜 걸린다.

두 번째 페이지 로드시간은 한 페이지에서 다른 페이지로 이동하는 데 걸리는 평균 시간이다. 이 시나리오에서는 CSR에 대해서는 모든 지원 스크립트가 사전에 로딩되기 때문에 CSR에 대해서는 로딩시간이 적다. lazy module loading을 할 필요가 없는 한 서버에 요청을 보내지 않기 때문이다. 하지만 SSR의 경우 한 페이지를 로드할 때마다 서버에 Request을 보내는 cycle이 반복된다.

2. 캐싱의 영향

cache는 무거운 web Application의 속도를 향상시키기 위해 Web server 뿐만 아니라 모든 브라우저에서 caching mechanism을 사용하여 클라이언트 컴퓨터에서 재사용가능한 Script를 cahing한다. 이는 SSR뿐만 아니라 CSR에 대한 전반적인 부하 시간을 향상시킨다.

CSR에서는 lazy module 로딩이 필요하지 않는 한, 실질적으로 CSR 기반의 Web Application도 인터넷없이 실행될 수는 있다.(단, API로 데이터를 안부르는 경우) 일단 로드되면 App은 더 이상 서버에 Request를 보낼 필요가 없다. 이는 간단한 Desktop Application처럼 Web Application을 탐색할 수 있게 해준다.

그러나 SSR에서는 서버에 대한 요청이 항상 전송된다.따라서 CSR에 비해 SSR의 페이지 로딩 시간이 의심할 여지 없이 더 높다.캐싱은 캐시에서 브라우저에 의해 스크립트가 검색되기 때문에 SSR에서도 컨텐츠 렌더링 속도를 향상시킨다.아래 이미지는 브라우저가 캐시된 스크립트에 대한 반복적인 요청을 처리하는 방법을 보여준다.

3. SEO에 미치는 영향

비즈니스 웹사이스라면 검색시 노출되어야 소비자가 유입되어 구매까지 이어질 수 있기 때문에 검색엔진을 위한 최적화가 필수이다. 검색엔진은 크롤링을 통해 웹사이트를 읽고 이해하는데, 이 크롤러는 실제 내용보다는 웹사이트의 메타데이터에 더 관심이 많기 때문에, 웹페이지에 검색엔진에 적합한 메타데이터를 반영해야 한다.

CSR에서는 웹페이지 콘텐츠가 자바스크립트를 사용하여 동적으로 생성된다. 이 말인 즉슨, 한 페이지에서 다른 페이지로의 메타데이터변경이 자바스크립트 실행에 의존한다는 것을 의미한다. 과거의 검색엔진의 크롤링에서는 자바스크립트가 실행되지 않는 것을 선호했는데, 최근에는 구글이 자바스크립트 실행을 받아들이면서 트렌트가 바뀌고 있다고 한다.

CSR에서는 페이지 메타데이터가가 다른 페이지로 변경될 수 있도록 설정해줘야할 필요가 있다. 이 때 리액트의 React Helmet이나 @angular/browser의 Meta 같은 라이브러리가 사용된다. 각 페이지마다 메타데이터를 설정하여 Client측에서 렌더링할 수 있도록 설정해주어야 한다.

SSR은 전체 페이지가 Server에서 올바른 메타데이터로 compile된 다음, 최종 HTML가 Front-end로 전송된다. 검색엔진 크롤러 입장에서는 자바스크립트 사용 허용 유무에 관계없이 메타데이터를 읽기만 하면 되기 때문에 CSR보다 SSR이 검색엔진에 최적화된 페이지를 만드는 방법이다.