Rendering 이란?
컴퓨터 프로그램을 사용하여 모델 또는 이들을 모아놓은 장면인 씬 파일(scene file)로부터 영상을 만들어내는 과정을 말한다.
(위키백과 - 렌더링)
SSR / CSR 에서 말하는 렌더링은 인용 문구에서 말하는 scene 파일들을 이용해 영상을 만들지는 않습니다.
하지만, 렌더링 엔진을 사용해 소스 코드들로 부터 웹 페이지를 만들어낸다는 면에서 의미는 동일하다고 생각됩니다.
Server-Side Rendering(SSR) 이란?
PHP, JSP, ASP, Node.js 등 Server-Side Script 언어 기반의 템플릿 엔진을 이용해 동적인 웹 콘텐츠(html) 문서를 만드는 방식 입니다.
다음 코드는 Node.js 템플릿 엔진인 EJS 문법으로 작성 된 .ejs 파일 내용의 일부분 입니다.
<body>
<h1>User list</h1>
<ul>
<% users.forEach(function(user){ %>
<%- include('user/show', {user: user}); %>
<% }); %>
</ul>
</body>
html <ul> 태그 중간에 템플릿 문법이 사용된 것을 확인할 수 있습니다.
Client 에서 요청이 들어오면 Server 에서 화면 구성에 필요한 데이터를 구성한 뒤, 템플릿엔진이 .ejs 파일과 데이터를 가지고 렌더링 합니다.
렌더링이 완료되면 다음과 같이 변환되고 결과물을 Client 로 서빙합니다.
<body>
<h1>User list</h1>
<ul>
<li>kim</li>
<li>lee</li>
<li>park</li>
</ul>
</body>
SSR 장점
- 웹 페이지 초기 로딩 지연시간을 줄일 수 있습니다.
- SSR 방식은 Server 에서 화면 구성에 필요한 데이터를 가지고 렌더링을 진행한 뒤, 결과물인 html 을 Client 로 서빙 합니다. Client 에서는 초기 웹 페이지 구성에 필요한 데이터를 요청하지 않아도 됩니다.
- SEO(Search Engine Optimization) 가 많은 양의 웹 콘텐츠 정보를 수집하게 되므로, 검색사이트 상위 노출에 유리합니다.
- 검색엔진 봇이 웹 사이트 정보를 수집하고자 Server 에 요청하면, Server 는 콘텐츠 정보를 포함한 html 을 제공하므로 검색엔진 봇은 많은 정보를 수집할 수 있게 됩니다.
SSR 단점
- Server 에서 데이터를 이용해 동적으로 html 을 생성하기에 Server 부담이 발생합니다.
Client-Side Rendering(CSR) 이란?
Client(Web Browser) 에 내장된 javascript 엔진이 동적으로 html element 를 생성한 뒤, root element 에 추가하여 웹 콘텐츠를 만드는 방식 입니다.
CSR 방식은 React, Angular, Vue 와 같은 Single Page Application(SPA) 에서 사용합니다.
CSR 장점
- Server 부담을 줄일 수 있습니다.
- CSR 방식을 이용하면 Server 는 Client 에서 요청한 데이터만 제공하면 됩니다. 템플릿 엔진을 이용한 웹 페이지 렌더링을 하지 않으므로 SSR 방식보다 적은 부담이 발생합니다.
CSR 단점
- 웹 페이지 초기 로딩 지연시간이 발생합니다.
- CSR 방식은 Server 로 부터 html 파일을 서빙 받은 뒤, AJAX 를 통해 화면 구성에 필요한 데이터를 Server 에 요청하게 됩니다. 이로 인해 웹 페이지 초기 로딩 지연시간이 발생합니다.
- CSR 방식은 Server 로 부터 html 파일을 서빙 받은 뒤, AJAX 를 통해 화면 구성에 필요한 데이터를 Server 에 요청하게 됩니다. 이로 인해 웹 페이지 초기 로딩 지연시간이 발생합니다.
- SEO(Search Engine Optimization) 가 웹 콘텐츠 정보를 수집하지 못해, 검색사이트 상위 노출에 불리하게 됩니다.
- CSR 방식의 경우, 초기 html 에는 별다른 정보가 없습니다.
- 그러므로 검색엔진 봇이 수집하는 콘텐츠 정보가 적어, SSR 방식으로 개발된 웹 사이트에 비해 상대적으로 검색 노출에 불리하게 됩니다.
<!-- Client-Side Rendering 을 하는 html 예시 -->
<html>
<head> ...생략 </head>
<body>
<div id="root"></div>
</body>
</html>
참고
https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Web_frameworks
https://ko.wikipedia.org/wiki/%EB%A0%8C%EB%8D%94%EB%A7%81
https://en.wikipedia.org/wiki/Web_template_system
https://en.wikipedia.org/wiki/Template_processor
developer.mozilla.org/en-US/docs/Glossary/SPA
# 잘못된 내용은 댓글로 남겨주세요
'Dev study 정리' 카테고리의 다른 글
javascript 이벤트 루프 / 태스크 큐 / 콜 스택 알아보기 (0) | 2020.07.04 |
---|---|
[Web & HTTP] CORS / SOP 학습 (2) | 2020.07.01 |
호이스팅(Hoisting) 정리 (0) | 2019.03.03 |
실행 컨텍스트 (Execution context) 정리 (0) | 2019.03.03 |
일급 객체 (First-class citizen) (1) | 2018.11.06 |