서론

Front-end를 개발하다보면 많이 듣는 어휘가 있다. 바로 서버사이드 렌더링, 클라이언트 사이드 렌더링 등의 용어이다. 프론트엔드 개발자라면 알아야할 서버사이드 렌더링이 무엇인지 우선 알아보고 ReactJS의 특징에 대해서도 적용해보도록 한다.

프론트앤드의 성장 과정

  1. Ajax가 없던 시절 대부분은 서버에서 전체 HTML을 만드는 방식
  2. Ajax가 등장하면서부터 Javascript의 시대가 도래하였고, 동적인 컨텐츠를 구성하기 시작함

  3. Javascript를 이용한 동적 뷰렌더링

     var htmlString = '';
 htmlString += '<div>';
 htmlString += '  <p>' + data.name.replace('<', '&lt;').replace('>', '&gt;') + '</p>';
 if (data.image) {
   htmlString += '  <p><img src="' + data.image.replace('<', '&lt;').replace('>', '&gt;') + '"></p>';
 } else {
   htmlString += '  <p><img src="/images/avatar.jpg"></p>';
 }
 htmlString += '</div>';

 $('#profile').append(htmlString);

    -> HTML과 Javascript의 혼용으로 복잡해 보이는 코드로 사용되었다.

  4. 템플릿 엔진의 등장 : 템플릿과 데이터의 바인딩을 통한 뷰 생성 (ex: hogan.js, mustach, handlebars)

  5. MVC패턴의 등장
    템플릿과 모델, 이벤트를 분리하여 작성할 수 있는 Backbone.js가 핫해짐. 이해하기 쉬워진 심플함으로 많은 인기를 끌었지만 프레임워크라고 하기에는 아직 부족.
  6. AngularJS 등장
    1. 개발속도가 빠름
    2. 유지보수 용이
    3. 웹앱용 프레임워크라 성능이 낮음
  7. ReactJS 등장
    React는 MVC프레임워크는 아니고 User Interface(View)를 만드는 라이브러리이다. AngularJS처럼 MVC를 표방하는 것이 아니라 V(iew)에 집중하고 가볍게 만들어졌다.



서버 사이드 렌더링 vs 클라이언트 사이드 렌더링

전통적인 방식

ServerSide
요청시마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식이다. 마치 필요한 물건이 있을때마다 사러 가는것과 비슷하다. 뷰에서 새로운 내용의 업데이트가 필요하게 되면 서버에서는 그 내용을 담아 HTML을 다시 보내준다. 이렇게 되면 잦은 데이터 변경이 잦은 페이지 새로고침을 불러일으킬 수 있다는 단점이있다. 이때 , View가 어떻게 보여질지 또한 서버에서 해석하여 보내주는데, 이러한 방식을 서버사이드렌더링 방식이라고 한다.

-> 서버 측에서 HTML&View을 생성하여 응답하는 방법

BUT!
기술의 발전으로 웹에서 제공되는 정보량이 많아지고, 여러 문제점이 발견되면서 전통적인 방식의 웹페이지 구동방식과는 다른 SPA ( Single Page Application ) 기법이 등장

SPA 방식

ClientSide

SPA는 말 그대로 처음에 하나의 빈 페이지만 서버측에서 제공하고, View에 대해서는 Client에서 자바스크립트를 통해 렌더링 하는 방식이다. 이 방식을 클라이언트사이드 렌더링 방식이라고 한다.

-> 클라이언트 측에서 View를 생성하는 방법


전통방식이라고해서 모든 방식이 다 서버사이드렌더링이 아니고, SPA 방식이라고해서 모두 클라이언트사이드 렌더링 방식은 아니다.


서버사이드렌더링(SSR)과 클라이언트사이드렌더링(CSR)의 비교는 크게 2가지 부분에서 할 수 있다.

  1. 초기 View 로딩 속도
  2. SEO(검색엔진)


방식 초기 View 로딩속도 SEO
SSR 빠름 검색 가능(외부 유입이 가능)
CSR 느림 구글을 제외하고 불가능


SSR CSR
정리하면,

서버사이드렌더링의 경우, 초기 로딩속도가 빠르고, SEO에 유리하지만, View 변경시 서버에 계속 요청을 해야 하므로 서버에 부담이 크다.

클라이언트사이드렌더링의 경우에는, 초기 로딩속도는 느리지만, 초기 로딩 후에는 서버에 다시 요청할 필요없이 클라이언트 내에서 작업이 이루어지므로 매우 빠르다. 하지만 SEO에 대한 문제가 있다.



ReactJS의 서버사이드 렌더링 방식

Isomorphic JavaScript 라는 말이 있는데 서버와 클라이언트가 같은 코드를 사용한다는 뜻으로, ReactJS가 여기 포함된다. ( ReactJS는 처음부터 서버사이드 렌더링을 염두하고 개발되었다고 합니다)

즉, ReactJS를 서버사이드렌더링을 적용한다면, 웹앱이 가지는 대부분의 단점들을 극복할수 있게 됩니다.