리액트 스터디 11탄) 라우팅, ssr, csr의 차이

리액트를 다루는 기술을 참고하여 기술하였습니다.

라우팅이란?

웹 어플리케이션에서 라우팅이란 사용자가 요청한 url에 따라 알맞는 페이지를 보여주는것을 의미한다.

이렇게 여러가지 페이지로 구성된 웹 어플리케이션을 만들 때, 페이지 별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위한 방법이 바로 라우팅 시스템이다.

라우팅 시스템을 사용하기 위해서는 다음과 같은 라이브러리를 사용할수 있다.

싱글페이지 어플리케이션을 살펴보기 전에 우선 멀티페이지 어플리케이션이라는 개념을 알아야한다.

멀티페이지 어플리케이션에서는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아서 계속해서 css, js파일등을 받아 화면에 보여주는 동작방식을 채택하였다.

이게 새로운 페이지를 요청할때마다 그 페이지에 맞는 HTML을 만들어서 보내주는 전통적인 웹 페이지 구성방식이다.

하지만, 최근에는 인터랙션이 많고 다양한 정보를 제공하는 모던 웹 어플리케이션에서는 다음과 같은 방법은 효율적이지 않았다.

계속해서 새로운 페이지를 렌더링 할때마다, 서버의 자원을 사용하게 되고 그만큼 많은 트래픽을 나오기 때문이다.

이를 해결하기 위해서 나온것이 리액트의 싱글페이지 어플리케이션이다.

싱글페이지 어플리케이션에서는 리액트와 같은 라이브러리를 사용해서 뷰 렌더링을 사용자의 브라우저가 담담하게 하고, 한번만 html을 받아온뒤 인터랙션이 발생하였을 시, 필요한 부분만 js를 사용하여 업데이트 하는 방식을 사용하게 되었다.

최초에 한번 모든 페이지를 로드하고 이후로는 ajax와 같은 데이터 바인딩을 한다.

싱글페이지에서는 사용자는 실제로는 하나의 페이지지만, 다양한 페이지가 존재한다고 느끼게 된다.

이를 가능하게 하는것이 리액트 라우터와 같은 라이브러리이며, 실제로 주소창의 경로에 따라 알맞은 페이지를 보여주지만, 새로 html을 요청하는 것이 아닌, 브라우저의 history API를 사용하여 브라우저의 주소창의 값만 변경시키고 다른 페이지를 보여주게 된다.

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

서버사이드 렌더링(Server Side Rendering)
서버사이드 렌더링을 하면, 서버로부터 완전하게 만들어진 html파일을 받아서 렌더링을 하게 되는데, 어떠한 요청을 받게 되면, 새롭게 서버에서 받아서 html을 다시 변경하기 때문에 새로고침 되는 페이지이다.
- SSR의 장점은 SEO라는 search engin optimization이 잘된다는 장점이 있다.
- 단점은 초기 로딩속도는 빠르지만, time to view와 time to interact간의 시간 간격이 존재한다는 것이다. 초기 렌더링 속도가 빠른만큼, 화면에는 보이지만 유저가 클릭을 하거나 이동을 하려고 해도 시간사이의 간극 때문에 멈춘것처럼 보인다.
- 또한 매번 페이지가 변경될때 마다 새로고침되고, 서버쪽에 요청을 할때마다 리소스를 준비해서 응답하기 때문에 많은 서버 부담이 든다.

클라이언트 사이드 렌더링(Client Side Rendering)
클라이언트 사이드 렌더링이란, 초기 렌더링시, 모든 js파일을 다운받기 때문에 초기 로딩시간이 많이 들지만, 이렇게 받은 모든 js 파일이 존재하기 때문에 이후 사용자의 요청이 생기면, 바로바로 필요한 부분을 응답해 줄수 있기 때문에 부드러운 사용감을 보여준다.
- 장점은 빠른 응답속도이다. 또한 변경 부분만 요청하면 되기때문에 서버의 부담이 줄어든다.
- 단점은 SEO 즉, 검색엔진최적화에 불리하다.
참고자료

Uploaded by N2T