요청 받은 내용을 브라우저에 표시하는 것을 의미.
Client Side Rendering은, SPA*로 최초에 Html을 비롯해 CSS, JavaScript 등 각종 리소스를 받아온 뒤, 이후에는 서버에 데이터만 요청하고 자바스크립트로 뷰를 컨트롤 하는 방식을 말한다.
SPA? Single Page Application으로 최초 한번 페이지 전체를 로딩한 이후부터는 데이터만 변경하여 사용할 수 있는 웹 어플리케이션. (기본적으로 SPA는 CSR이지만 반드시 그런 것은 아니다.)
즉, CSR은 웹페이지의 렌더링이 클라이언트(브라우저) 측에서 일어나는 것을 의미하는데, 동작 순서는 다음과 같다.
라우팅(새로운 페이지로 이동)을 하더라도 HTML 자체가 바뀌는 것이 아니라 JS 차원에서 새로운 화면을 그려내게 된다. 결국 최초의 호출 때만 HTML, JS, CSS를 요청하고 이후에는 화면에서 변화가 일어나야 하는 만큼의 데이터만 요청하기 때문에(ex. JSON) 백엔드 호출을 최소화 할 수 있다, 는 장점이 있다.
그러나 장점이 있다면 반면 단점도 있기 마련이다.
앞서 말했듯 CSR은 최초로 불러온 HTML의 내용은 비어있고 이후에 JS가 로딩되며 페이지를 그리기 때문에 SEO(Search Engine Optimization)에 불리한 측면을 가지고 있었다.
Google bot과 Search console에 검색 노출이 되지 않음. (브라우저가 없기 때문에, HTML만 가져와서 검색에는 뜨지 않음)
페이지를 읽고, 자바 스크립트를 읽은 후 화면을 그리는 시간까지 모두 마쳐야 콘텐츠가 사용자에게 보여지기 때문에 초기구동 속도가 느리다.
따라서, SEO가 중요한 비지니스 모델들은 이에 대한 대안을 고민하게 되고 그 과정에서 대안으로 제시 된 것이 SSR(Server Side Rendering)이다.
Server Side Rendering이란, 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다.
여기에서 유의해야 할 점이 있다.
개발자라면 '서버'라는 단어를 들었을 때 자연스럽게 Backend 서버를 떠올릴 것이다. 데이터베이스와 연결되어 있고, 리소스를 요청하면 맞는 리소스를 반환해주는 그런 것말이다. 하지만 여기서 말하는 서버는 'Frontend 서버'를 의미한다.
프론트엔드에서는 html, css, javascript 등을 개발하기도 하지만, 이것 역시 독립적으로(Backend와 포트를 달리하여 띄움) 서버가 뜬다. 자칫 잘못하면 SSR을 이해할 때 'Backend에서 처리하게 되는건가?'과 같은 생각을 할 수 있지만, 정확히는 Frontend에서 그런 작업을 수행하는 것이다.
SSR의 동작 순서는 다음과 같다.
/
를 입력index.js
파일을 다운로드 받음 (hydration)go to second
링크를 클릭/second
로 라우팅하고 second 페이지 코드를 생성잠깐!!!
이 쯤에서 웹의 역사를 잘 알고 있는 사람이라면 한 가지 의문점이 생길 수 있다.
과거 2세대 웹에서 사용했던 JSP, PHP, Django Template 같은 것들 바로 SSR이 아니었나요 🤔 ???
▶ 맞습니다 🙆🏻♀️
그렇다면 우리는 SSR을 하기 위해서 과거의 방법으로 돌아가야 하나요???
▶ 아닙니다 🙅🏻♀️
기존의 CSR for SPA의 장점에 + SEO에 취약한 단점을 보완하기 위해서, SPA 환경에서 CSR과 SSR을 함께 사용할 수는 없는걸까? 🤔
▶ 답은, 사용할 수 있습니다!!! 🙆🏻♀️
SPA 환경에서 첫 렌더는 SSR으로 그 이후 렌더부터는 CSR으로 렌더링 함으로써, 두 가지 방식을 섞어서 사용할 수 있다.
React에서는 NextJS를, Vue에서는 NustJS를 통해서 SPA에서 SSR이 가능한 환경을 쉽게 구축할 수 있다. 나는 기존에 NextJS를 사용하고 있었기 때문에, 이 시리즈의 다음 글에서는 NextJS에 대해서 알아보도록 할 것이다!