서버사이드렌더링(SSR)과 클라이언트사이드렌더링(CSR)

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

클라이언트가 요청을 하면 Server측에서 렌더링하여 HTML 파일을 만들어 클라이언트에게 제공하는 방식이다.

Spring의 JSP나, Thymeleaf 가 대표적인 SSR방식으로 클라이언트의 요청이 들어왔을때,

Controller에서 해당 요청을 처리하여 작성한 HTML형태의 JSP 파일에 사용자의 요구에 맞는 여러 데이터나 화면을 동적으로 생성하여 WAS(Web Application Server)를 통해 Servlet으로 변환하여 처리한다.

쉽게 말해 HTML 파일에 JAVA 코드를 통해 데이터를 넣어 동적인 HTML을 클라이언트로 전송한다.

Node.js의 경우 EJS(Embedded JavaScript Template)을 통하 SSR방식으로 View를 전송할수있다.

EJS 모듈을 사용하여 .ejs 형태의 view를 클라이언트를 통해 전송하는 동일한 방식이다.

node.js express에서 ejs 템플릿 엔진을 통해 특정 경로 url의 요청에 views/main.ejs 라는 파일을 전송하는 것이다.

클라이언트사이드렌더링(Client-Side-Rendering)이란?

클라이언트에서 렌더링을 맡는 방식으로 서버로 부터 받은 데이터를 기반으로 브라우저에서 동적인 웹 화면을 구성한다.

즉, Server에서 데이터를 가지고 HTML파일을 동적으로 만들어 전송하는게 아니라 동적인 화면구성을 위한 데이터만 받아서 브라우저에서 렌더링을 하는 방식이다.

대표적으로 React가 있으며 React는 Single Page Application으로 단일 페이지 index.html에 여러 컴포넌트들을 사용한다.

Node.js 와 React

그렇다면 Node.js와 React를 함께 사용한다는것은 JavaScript 런타임 환경에서 Node.js를 통해 Server를 구축하고 (백엔드) 프론트 엔트는 React 프레임워크를 통해서 CSR 방식으로 구축한다는 것이다.

또한 Node.js와 React는 별개의 Port로 독립적으로 운영되며, React는 렌더링을 위해 단순히 Node.js의 엔드포인트 api를 통해 데이터를 요청하기만 하면 되는 것이다.

다음의 아키텍처를 통해 직관적으로 이해할수있다.

SpringBoot + JSP 또는 Thymeleaf의 조합과 다르게

Node.js와 React는 백엔드와 프론트엔드가 별개의 서버로 나누어져있고, RestAPI를 통해 데이터를 주고받는것이다.

Rest API

사실, Spring을 공부할때에는 Restful API에 대한 중요성이나 의미를 크게 느끼지 못하였는데,

Node.js를 공부하면서 Rest API의 중요성을 알게되었다.

SpringBoot는 기본적으로 Tomcat 서버를 내장하고있으며 백엔드단을 개발하면서 동시에 Front단도 개발을 하였기때문에 Client-Server간에 데이터형식의 중요성을 크게 느낄일이 없었다.

내가 보낸 Client측 요청 데이터를 Server에서 받아서 바로 JSP로 그려주면 되기때문이었다.

그런데 Node.js와 React를 통해 백엔드와 프론트엔드가 분리된 환경에서 url으로 데이터를 주고받고,

또 CSR방식으로 브라우저에서 렌더링을 하려고하니 url 엔드포인트를 기반으로 데이터 형식을 맞춰주는것이 중요하다고 생각이 들었다.

개발 블로그