CSR vs SSR

eunsonny·2021년 12월 30일
0

SSR과 NextJS

목록 보기
1/3

Rendering 이란?

요청 받은 내용을 브라우저에 표시하는 것을 의미.


Client Side Rendering 이란?

Client Side Rendering은, SPA*로 최초에 Html을 비롯해 CSS, JavaScript 등 각종 리소스를 받아온 뒤, 이후에는 서버에 데이터만 요청하고 자바스크립트로 뷰를 컨트롤 하는 방식을 말한다.

SPA? Single Page Application으로 최초 한번 페이지 전체를 로딩한 이후부터는 데이터만 변경하여 사용할 수 있는 웹 어플리케이션. (기본적으로 SPA는 CSR이지만 반드시 그런 것은 아니다.)

즉, CSR은 웹페이지의 렌더링이 클라이언트(브라우저) 측에서 일어나는 것을 의미하는데, 동작 순서는 다음과 같다.

  • 브라우저는 최초 요청에서 HTML, JS, CSS 확장자의 파일을 차례로 다운로드.
  • 최초로 불러온 HTML의 내용은 비어있음. (HTML, body 태그만 존재)
  • JS 파일의 다운로드가 완료된 다음, 해당 JS 파일이 DOM을 빈 HTML 위에 그리기 시작.

라우팅(새로운 페이지로 이동)을 하더라도 HTML 자체가 바뀌는 것이 아니라 JS 차원에서 새로운 화면을 그려내게 된다. 결국 최초의 호출 때만 HTML, JS, CSS를 요청하고 이후에는 화면에서 변화가 일어나야 하는 만큼의 데이터만 요청하기 때문에(ex. JSON) 백엔드 호출을 최소화 할 수 있다, 는 장점이 있다.

CSR의 장점

  • CSR은 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기 때문에, SSR보다 빠른 인터랙션이 가능하다.
  • page 전체를 요청하지 않고 페이지에 필요한 부분만 변경하게 하기 때문에, 모바일 네트워크에서도 빠른 속도로 렌더링이 가능
  • lazy loading*을 지원해준다.
    lazy loading이란? 페이지 로딩시 중요하지 않은 리소스의 로딩을 늦추는 기술. Ex) 스크롤을 내려야만 해당 이미지가 보이게 하는 것
  • Server Side Rendering이 따로 필요하지 않기 때문에 일관성 있는 코드를 작성할 수 있음.

그러나 장점이 있다면 반면 단점도 있기 마련이다.

앞서 말했듯 CSR은 최초로 불러온 HTML의 내용은 비어있고 이후에 JS가 로딩되며 페이지를 그리기 때문에 SEO(Search Engine Optimization)에 불리한 측면을 가지고 있었다.

CSR의 단점

  • Google bot과 Search console에 검색 노출이 되지 않음. (브라우저가 없기 때문에, HTML만 가져와서 검색에는 뜨지 않음)

  • 페이지를 읽고, 자바 스크립트를 읽은 후 화면을 그리는 시간까지 모두 마쳐야 콘텐츠가 사용자에게 보여지기 때문에 초기구동 속도가 느리다.

따라서, SEO가 중요한 비지니스 모델들은 이에 대한 대안을 고민하게 되고 그 과정에서 대안으로 제시 된 것이 SSR(Server Side Rendering)이다.

Server Side Rendering 이란?

Server Side Rendering이란, 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다.

여기에서 유의해야 할 점이 있다.

개발자라면 '서버'라는 단어를 들었을 때 자연스럽게 Backend 서버를 떠올릴 것이다. 데이터베이스와 연결되어 있고, 리소스를 요청하면 맞는 리소스를 반환해주는 그런 것말이다. 하지만 여기서 말하는 서버는 'Frontend 서버'를 의미한다.

프론트엔드에서는 html, css, javascript 등을 개발하기도 하지만, 이것 역시 독립적으로(Backend와 포트를 달리하여 띄움) 서버가 뜬다. 자칫 잘못하면 SSR을 이해할 때 'Backend에서 처리하게 되는건가?'과 같은 생각을 할 수 있지만, 정확히는 Frontend에서 그런 작업을 수행하는 것이다.

SSR의 동작 순서는 다음과 같다.

  • 유저가 브라우저에 /를 입력
  • 미리 실행되고 있는 FE 서버가 요청을 받고 서버사이드 렌더링
  • 만들어진 html을 브라우저에게 보냄
  • 브라우저가 응답받은 html을 그림
  • html에 기능을 부여할 index.js 파일을 다운로드 받음 (hydration)
  • 다운로드가 완료된 이후, go to second 링크를 클릭
  • /second로 라우팅하고 second 페이지 코드를 생성

이와 같이 처음부터 페이지의 모든 정보를 가지고 렌더링이 되기 때문에, SEO 측면에서 유리하다.

SSR의 장점

  • SEO에 친화적이다. 이미 다 만들어진 페이지를 검색엔진 크롤러가 요청에 대한 응답으로 받기 때문에 CSR의 단점인 "첫 페이지 깡통" 상태를 극복할 수 있다.
  • 사용자가 처음으로 콘텐츠를 보는 시점을 앞당길 수 있어, UX 측면에서 유리하다. CSR에 비해 페이지를 구성하는 속도는 늦어질 수 있지만, 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다.

SSR의 단점

  • 모든 요청에 관해 필요한 부분만 수정하는 것이 아니라, 완전히 새 페이지를 로딩하고 렌더해준다.
    새로운 페이지로 이동할 때마다 서버에 요청하여 페이지를 받아야 하기 때문에(새로고침), 받아오는 시간동안 깜빡거리는 현상을 마주할 수 있다.
  • 전체를 로딩하다보니 CSR보다 느리고, 사용자 경험이 좋지 않다.
    사용자가 처음으로 컨텐츠를 보는 속도는 빠를 수 있으나, 화면 단에는 Html요소들이 나왔지만 JS파일이 다 다운로드 되지 않아서 버튼이 클릭되지 않는 등의 현상이 있을 수 있음


잠깐!!!
이 쯤에서 웹의 역사를 잘 알고 있는 사람이라면 한 가지 의문점이 생길 수 있다.

과거 2세대 웹에서 사용했던 JSP, PHP, Django Template 같은 것들 바로 SSR이 아니었나요 🤔 ???
▶ 맞습니다 🙆🏻‍♀️

그렇다면 우리는 SSR을 하기 위해서 과거의 방법으로 돌아가야 하나요???
▶ 아닙니다 🙅🏻‍♀️

기존의 CSR for SPA의 장점에 + SEO에 취약한 단점을 보완하기 위해서, SPA 환경에서 CSR과 SSR을 함께 사용할 수는 없는걸까? 🤔
▶ 답은, 사용할 수 있습니다!!! 🙆🏻‍♀️


CSR + SSR?

SPA 환경에서 첫 렌더는 SSR으로 그 이후 렌더부터는 CSR으로 렌더링 함으로써, 두 가지 방식을 섞어서 사용할 수 있다.

React에서는 NextJS를, Vue에서는 NustJS를 통해서 SPA에서 SSR이 가능한 환경을 쉽게 구축할 수 있다. 나는 기존에 NextJS를 사용하고 있었기 때문에, 이 시리즈의 다음 글에서는 NextJS에 대해서 알아보도록 할 것이다!

profile
?

0개의 댓글