CSR과 SSR을 비교하기전에 호스팅과 SPA에 대해 간략하게 훑어보자!
호스팅이란?
호스팅이란 정보들이 호스트 컴퓨터(웹 서버)에 저장되어 있다가 사용자의 요청이 오면 언제든지 응답한다.
SPA란?
SPA(Single Page Application) 는 말 그대로 한 개의 페이지로 이루어진 어플리케이션.
html,js,data파일은 처음 한 번만 송수신하고 그 뒤로는 실시간 데이터만 주고 받는다.
단 하나의 HTML 문서로만 돌아가는 웹페이지로 사용자의 요청에따라 내용이 동적으로 바뀐다!
동적이 사이트가 많이 쓰이면서 렌더링 방식에 따라 CSR과 SSR로 나뉜다
CSR (Client Side Rendering)
CRA (Creact React App)
- npm create-react-app my-app
- yarn add create react-app
위 명령어로 초기 설정 없이도 React기반의 spa사이트를 구현할 수 있다. 바벨과 웹팩과 같이 리액트 애플리케이션 실행에 필요한 다양한 패키지가 포함되어있으며, 필수 개발 환경을 구축해준다. 초기 폴더 구성은 다음과 같다
1)node.modules 2)package.json 3).gitignore
하지만 CRA 는 Only CSR 로 실행되기 때문에 검색엔진에 검색되지 않는다.
동작원리
웹 페이지의 렌더링이 클라이언트(브라우저) 측에서 일어나는 것을 의미한다.
최초로 불러온 html의 내용은 비어있고 html,body 태그만 존재하게 된다.
js 파일의 다운로드가 완료되면 해당 js파일이 dom을 빈 html 위에 그리기 시작한다.
라우팅을 하더라도 html 자체가 바뀌는 것이 아니라 JS 차원에서 새로운 화면을 그려낸다.
-
장점은?
서버와 클라이언트 간의 데이터 양의 트래픽이 현저히 감소하고 단 한번의 렌더링만 있으므로 페이지 이동이 빠르다. -
단점은?
SEO 사용이 불가. CRA의 SEO 개선하는방법
코드 spliting으로 초기 렌더링이 느리다
- next.js / nuxt.js 등의 SPA SSR 프레임 워크를 이용해 단점 보완가능
SSR(Server Side Rendering)
첫 페이지의 렌더링을 클라이언트 측이 아닌 서버 측에서 처리해주는 방식.
CSR과 차이점?
1.SEO측면에서 유리
서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 보여주는 방식이기 때문에 CSR의 단점인 "첫 페이지 깡통" 상태를 극복할 수 있다
2. UX 측면에서 유리
CSR에 비해 페이지를 구성하는 속도는 늦어지지만, 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다.
단점은?
페이지를 잘못 구성할 경우 CSR에 비해 서버 부하가 커지거나, 첫 로딩이 매우 느려질 수 있다.
