비실이의 개발 성장기

[Web] Server-Side Rendering(SSR) / Client-Side Rendering(CSR) 본문

기타 Web 관련 공부

[Web] Server-Side Rendering(SSR) / Client-Side Rendering(CSR)

DubbingLee 2020. 8. 19. 21:17

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 에 요청하게 됩니다. 이로 인해 웹 페이지 초기 로딩 지연시간이 발생합니다.

  • 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

 

Server-side web frameworks

This article has shown that web frameworks can make it easier to develop and maintain server-side code. It has also provided a high level overview of a few popular frameworks, and discussed criteria for choosing a web application framework. You should now

developer.mozilla.org

https://ko.wikipedia.org/wiki/%EB%A0%8C%EB%8D%94%EB%A7%81

 

렌더링 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 하나의 3차원 장면에 여러가지 렌더링 기법을 적용하고 있는 모습. POV-Ray 3.6을 이용하여 만든 그림 렌더링 또는 이미지 합성(rendering 또는 image synthesis)은 컴퓨터

ko.wikipedia.org

https://en.wikipedia.org/wiki/Web_template_system

 

Web template system - Wikipedia

System in web publishing that lets web designers and developers work with web templates to automatically generate custom web pages The basic process for a server-side web templating system: content (from a database), and "presentation specifications" (in a

en.wikipedia.org

https://en.wikipedia.org/wiki/Template_processor

 

Template processor - Wikipedia

From Wikipedia, the free encyclopedia Jump to navigation Jump to search Software designed to combine templates with a data model to produce result documents A diagram illustrating all of the basic elements and processing flow of a template engine. A templa

en.wikipedia.org

developer.mozilla.org/en-US/docs/Glossary/SPA

 

SPA (Single-page application)

An SPA (Single-page application) is a web app implemention that loads only a single web document, and then updates the body content of that single document via JavaScript APIs such as XMLHttpRequest and Fetch when different content is to be shown.

developer.mozilla.org

 

 

 

# 잘못된 내용은 댓글로 남겨주세요

Comments