SSR과 CSR
Server-side Rendering (SSR)
- 브라우저에 웹페이지를 렌더링하는 기존의 전통적인 방법
- 동적 컨텐츠를 서버에서 처리
- 동적 컨텐츠를 처리하는 과정 : 사용자가 요청한 동적 컨텐츠를 찾아낸 다음, 그것을 HTML 형태로 변환, 변환한 HTML content를 전송
- 사용자의 또다른 request가 들어오면, 서버는 그에 맞는 HTML을 다시 만들어서 브라우저에게 전송하므로 브라우저는 전체 페이지를 reload시켜야 하는 번거로움이 있음
- 서버의 메모리 및 컴퓨팅 자원에 많은 부담을 주어, 렌더링할 동적 컨텐츠가 없는 static site와 비교했을 때, 더 오랜 페이지 로딩 시간을 유발할 수 있음
장점
- 첫 페이지 로딩이 빠르므고, 사용자가 화면을 볼 수 있는 시점이 CSR보다 빠르다
- 검색 노출이 쉽다
단점
- 사용자가 필요한 화면의 부분만 업데이트되는 것이 아닌, 전체를 reload하기 때문에 CSR보다 서버에 부담이 간다
- 사용자에게 웹페이지는 보여지나, 버튼이 클릭되지 않는 현상이 발생할 수 있다. 이는 HTML 렌더링은 되었지만, JS파일이 아직 다운로드되지 않았을 때 발생하는 현상이다
과정
- 서버는 사용자가 요청한 데이터를 HTML에 렌더링하고, 렌더링된 HTML을 브라우저에게 전송
- 브라우저는 서버에게 받은 HTML로 웹페이지를 만든다. 이제 사용자는 웹페이지를 볼 수 있다. 그리고 브라우저는 JS(JavaScript)파일을 다운받는다.
- 브라우저는 JavaScript 프레임워크(React, Angular, Vue 등)가 사용된 JS파일을 실행시킨다.
- 사용자는 이제 웹페이지에서 버튼을 누르거나 하는 행위로 서버와 데이터를 주고받을 수 있다.
Client-side Rendering (CSR)
- 동적 컨텐츠를 컴파일하고 HTML content를 생성하고 브라우저에 전송하는 역할은 사용자(client)가 담당
장점
- 첫 페이지 로딩 이후의 페이지를 빠르게 렌더링할 수 있다.
- 서버에 page 전체를 요청하지 않기 때문에 서버의 부답을 줄일 수 있다
단점
- 첫 페이지 로딩 시, 웹페이지를 렌더링하는 시간이 SSR보다 길다
- 검색 노출이 어렵다. 브라우저 측에서 화면(view)를 완성시키기 때문에 Googlebot 같은 검색엔진이 크롤링을 제대로 할 수 없다
과정
- 서버는 우선 브라우저에게 컨텐츠가 렌더링되지 않은 HTML을 전송한다.
- 브라우저는 JS파일을 다운받는다. 아직까지 사용자는 웹페이지를 볼 수 없다.
- 브라우저는 JavaScript 프레임워크(React, Angular, Vue 등)가 사용된 JS파일을 실행시킨다. 그리고 API를 이용하여, 서버에게 사용자가 요청하는 컨텐츠를 요청한다.
- 서버는 API 요청을 받고, 그에 해당하는 데이터를 브라우저에게 전송한다. 브라우저는 서버에게 받은 데이터를 이용하여 동적 컨텐츠를 렌더링한다. 이후, 사용자는 이제 웹페이지를 볼 수 있고, 버튼을 누르거나 하는 행위로 서버와 데이터를 주고받을 수 있다.
참고자료
The Benefits of Server Side Rendering Over Client Side Rendering Client-side Rendering vs. Server-side Rendering | 라디아