대중적인 CSR과 SSR의 의미
우리는 CS공부를 하면서 CSR과 SSR의 의미를 대충이라도 접했을것이다
그 CSR과 SSR의 의미를 알기 위해서 먼저 Rendering의 의미를 알아야 한다.
CSR이란?
우리가 CS공부를 하면서 알고있던 CSR의 대중적인 의미는 다음과 같다.
CSR ( Client Side Rendering )
Rendering이 Client측에서 주도적으로 일어나는 방식을 의미한다.Rendering이 클라이언트 측에서 일어난다는 뜻이다.
즉 서버는 HTTP Request를 받으면, Request에 해당하는 Html과 CSS,JS를 서버에서 전달 받아 클라이언트에서 렌더링을 한다는 의미이다.
SSR이란?
SSR ( Server Side Rendering )
Rendering이 Server 측에서 일어나는 방식을 의미한다.말 그대로 비즈니스 로직을 거쳐서 필요한 정보들을 받은 뒤, HTML 파일에 필요한 정보들을 Rendering? 하여 HTML 파일을 생성한 뒤, 클라이언트에게 Html, Css, Js를 전달하는 방식이다.
스프링의 Thymeleaf를 예를 들어 설명을 하겠다.
해당 유저의 정보를 DB에서 불러온 뒤, Welcome Page에서 해당 유저의 이름과 함께 환영 메세지를 보여주는 Html 페이지를 구성하는 Html 문서는 다음과 같다.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
</head>
<body>
환영합니다 <span th:text = "${username}">welcome</span> 님!
</body>
</html>
해당 요청을 처리하는 Servlet은 다음과 같다고 해보자.
package web.controller;
import java.io.IOException;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.WebContext;
import org.thymeleaf.templatemode.TemplateMode;
import org.thymeleaf.templateresolver.ServletContextTemplateResolver;
public class HelloServlet extends HttpServlet {
private static final String TEMPLATE_ENGINE_ATTR = "web.controller.TemplateEngineInstance";
public static void storeTemplateEngine(ServletContext context, TemplateEngine engine) {
context.setAttribute(TEMPLATE_ENGINE_ATTR, engine);
}
public static TemplateEngine getTemplateEngine(ServletContext context) {
TemplateEngine engine = new TemplateEngine();
ServletContextTemplateResolver resolver = new ServletContextTemplateResolver(context);
resolver.setPrefix("/WEB-INF/thymeleaf/");
resolver.setTemplateMode(TemplateMode.HTML);
engine.setTemplateResolver(resolver);
storeTemplateEngine(context, engine);
return (TemplateEngine) context.getAttribute(TEMPLATE_ENGINE_ATTR);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
//skip the biz logic
String username = "홍길동";
TemplateEngine engine = getTemplateEngine(request.getServletContext());
WebContext context = new WebContext(request, response, request.getServletContext());
context.setVariable("username", username);
engine.process("hello.html", context, response.getWriter());
}
}
그렇다면 유저가 해당 URL로 요청을 하게된다면 다음과 같은 프로세스가 진행된다.
- 요청에 해당하는 Servlet이 Web.xml을 통해 Select된다.
- 해당 Serlvet에 정의된 Method에 따라서 doGet, doPost 등의 메서드가 실행이 된다.
- 비즈니스 로직이 실행이 되며, username에 해당하는 값을 얻어온다.
- 얻어온 username을 이용해서 attribute를 설정 한 뒤, dispatcher에게 넘긴다.
- 서버측에서 thymeleaf 라이브러리를 통해 해당 hello.html에 있는 th:text구문을 servlet에서 설정해준 username의 값으로 파싱하여 html 파일을 생성한다.
- 파싱된 html, css, js파일을 클라이언트에게 전송하여 Rendering하여 보여준다.
- 결과 :
Rendering??
SSR에서 말한 Rendering은 클라이언트측일까 Server측일까? Server Side Rendering이기 떄문에 Server측에서 Rendering이 되는것일까?
Rendering의 의미를 위키백과에서 알아보자.
컴퓨터 프로그램을 사용하여 모델 또는 이들을 모아놓은 장면인 씬 파일(scene file)로부터 영상을 만들어내는 과정을 말한다.
(위키백과 - 렌더링)즉 브라우저가 HTML, CSS, JS파일을 서버측에서 받아와서 브라우저에 모양에 맞게 그려주는것을 Rendering이라고 하는것 같다.
그럼 SSR의 의미대로 Server측에서 html을 랜더링해서 클라이언트 측에 보내준다는 말이 맞는말일까?
개인적인 의견
개인적으로는 Rendering은 HTML, CSS, JS를 통해 브라우저에서 Dom 객체를 생성하며 사용자에게 화면을 꾸며주는것을 의미한다고 생각한다.
하지만 SSR이라고 해서 Dom객체를 생성하는것이 아닌, 해당 태그에 들어갈 내용, 해당 태그가 얼마나 나타날지에 대해서 서버측에서 "파싱" 하여 HTML을 만들어 낸 뒤, Request를 보낸 Client측에 새로 파싱한 HTML, CSS, JS파일을 보내주면, Client측에서 요청한 내용으로 파싱된 해당 파일들을 "Rendering" 해서 사용자에게 보여준다고 생각을 한다.
따라서 SSR은 모순적인 용어라고 생각을 한다.
