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

승진·2019년 10월 4일
0

SPA

Single Page Web Application 기법

하나의 페이지로 구성된 어플리케이션으로 규모가 크고 사용자와의 상호 작용이 많아짐에 따라 데이터 전송 과부화로 인한 속도 저하 등 문제점을 해결해주는 기법이다.

서버에 제공하는 페이지가 한 개로, 로딩을 하고난 후 에는 브라우저 내에서 나머지 페이지들을 정의해서 보여준다.

SPA 단점

앱 규모가 커질수록 페이지를 로딩할 때, 실제로 방문하지 않을 수도 있는 페이지와 관련된 컴포넌트 코드도 불러오기 때문에 자바스크립트 파일 크기도 너무 커지게 된다는 것이 단점이다.

React.js는 한가지 문제를 해결하기 위해서 만들어졌다,
시시각각으로 변화하는 데이터를 사용하는 큰 규모의 애플리케이션을 만들기 위해서 이다.
리액트는 브라우저 DOM을 갱신 하기 위해 만든 라이브러리다.
우리는 DOM API를 직접 조작 하지 않고 리액트 엘리먼트로 이루어진 가상돔을 다루거나 리액트가 UI를 생성하고 브라우저와 상호 작용하기 위해 사용하는 몇가지 명령을 다룬다.
리액트 엘리먼트는 개념상 HTML 엘리먼트와 비슷하지만 실제로는 자바스크립트 객체다.
DOM API를 직접 다루는 것보다 자바스크립트 객체인 가상 DOM을 직접 다루는 편이 훨씬 빠르다.
우리가 가상 DOM을 변경하면 리액트는 DOM API를 사용해 변경사항을 가장 효율적으로 렌더링 해준다.

SSR & CSR

서버 사이드 렌더링 SSR

Server Side Rendering 은 서버에서 렌더링 작업을한다.
전통적인 방식으로 사용자가 웹페이지에 접근할 때, 서버에 페이지에 대한 요청을 해서 서버에서 html, view 등 리소스들을 해석 후 렌더링해 사용자에게 제공하는 방식이다.

하지만 웹에서 제공하는 정보량이 많아지고 데스크탑에 비해 성능이 낮은 모바일, 스마트폰을 통해 웹페이지를 출력하기 위해서 새로운 기법인 SPA 기법 (CSR)이 등장했다.

클라이언트 사이드 렌더링 CSR

Client Side RenderingSPA 방식으로 사용자의 행동에 따라 필요한 부분만 다시 렌더링해 제공하는 방식으로 SSR보다 빠른 인터렉션을 기대할 수 있는 장점이 있다. 서버는 단지 JSON파일만 보내주고, html을 그리는 역할은 자바스크립트를 통해 클라이언트 측에서 수행한다.

화면에 따라 다른 주소를 갖고있다. 주소가 있어야 사용자들이 북마크도 가능하고, 서비스에 구글을 통해 유입될 수 있기 때문이다.(SEO)

React-Router 클라이언트 사이드에서 진행하는 라우팅 과정을 쉽게해주는 라이브러리로,
다른 페이지로 이동할 때는 필요한 데이터를 받아와 다른 종류의 뷰를 만들고 주소에 따라 다른 뷰를 보여주는 것을 라우팅이라 부른다.

단점

  • 초기 구동 속도가 느리다
  • SEO 검색 엔진 최적화에 문제
  • 보안문제
profile
Front-end 개발 공부일지

0개의 댓글