1. CSR이란?
CSR은 react, vue 등의 SPA(Single Page Application)에서 쓰인다.
서버에서 화면을 구성하는 SSR과 다르게 클라이언트에서 화면을 구성한다.
(react는 SPA, 하나의 페이지이다. 하나의 페이지 안에서 컴포넌트들이 바뀌면서 페이지가 바뀌는 것처럼 보여준다.)
어떤 페이지를 요청하든 프론트 서버에서는 데이터를 제외한 화면을 그리는 코드들 (js, html, css, img) 를 보내준다. 데이터가 없기 때문에 프론트에서는 로딩창을 띄워준다.
-> 코드들이 js 파일에 한번에 번들되어 와서 초기 로딩 속도가 느릴 수 있다
-> 해결 방법 : SSR, 코드 스플리팅으로 방문한 페이지에 대한 데이터만 보여주도록 한다.
그리고 브라우저에서 바로 백엔드 서버에 데이터를 요청 -> 데이터베이스 -> 백엔드서버 -> 브라우저
데이터를 받고 나면 로딩창을 없애고 받은 데이터를 화면에 그려준다.
SSR이 필요한 이유 (검색엔진 최적화)
리액트로 만든 SPA는 검색 엔진 크롤러 봇처럼 자바스크립트가 실행되지 않는 환경에서는 페이지가 제대로 나타나지 않는다.(처음 html에 데이터가 없고 로딩창만 존재해 검색 봇이 빈페이지로 착각한다.) 따라서 서버에서 클라이언트 대신 렌더링을 해주면 검색엔진이 페이지의 내용을 제대로 수집해 갈 수 있다. 구글 검색 엔진은 다른 검색 엔진과 달리 검색엔진에서 자바스크립트를 실행하는 기능이 탑재되어 있어서 페이지를 크롤링해 갈 때도 있지만 모든 페이지에 대해 자바스크립트를 실행해 주지는 않는다. 따라서 웹 서비스의 검색 엔진 최적화를 위해서는 서버 사이드 렌더링을 구현해주는 것이 좋다.
CSR의 장단점
장점 - CSR은 초기 로딩 속도가 느리지만, 그 이후에는 데이터만 바꿔주면 되기 때문에 빠른 페이지 이동과, 구동 속도가 빠르고 서버에 데이터를 요청하는 횟수가 적어 서버 부하가 적다.
단점 - 모든 페이지들에 대한 번들된 js파일 다운로드로 인해 초기 로딩 속도가 느리다, SEO가 힘들다.
2. SSR이란?
클라이언트(브라우저)가 데이터를 요청하면 브라우저 -> 프론트 서버 -> 백엔드 서버 -> 데이터베이스에서 데이터를 가져온 뒤 프론트 서버로 보내주고 프론트 서버에서 데이터와 html을 합쳐서 브라우저로 보내준다.
서버에서 데이터까지 포함해 페이지를 만든 뒤 브라우저에 전달한다.
클라이언트가 요청 할 때마다 페이지를 만들어 전달하는 과정을 반복하기 때문에 화면에서 바뀌지 않아도 되는 부분도 계속해서 다시 렌더링되어서 서버 부하 등의 문제가 생길 수 있다.
장점 - 초기 로딩 속도가 빠르다, SEO에 유리하다.
단점 - 불필요한 부분까지 다시 렌더링해 서버 부하가 있다.
Next.js
CSR의 단점 : 초기 진입 속도가 느리다. SEO에 취약하다.
SSR의 단점 : 불필요한 부분까지 다시 렌더링해 서버 부하가 있다.
위의 단점을 해결하기 위해서 Next.js라는 프레임워크가 만들어졌다.
Next.js는 첫페이지는 SSR로 다음 페이지 이동부터는 CSR방식을 적용한다
Next.js 실행
yarn start를 하게 되면 _app.tsx 파일이 먼저 실행되고 _document.js가 실행된다.
-
_app.tsx 파일은 모든 페이지를 담고 있는 최상위 컴포넌트이기 때문에
페이지에서 공통으로 사용하는 레이아웃이나 글로벌 스타일 등을 적용 가능하다. -
페이지 전환 시 레이아웃과 상태 값을 유지할 수 있다.
-
props로 Component와 pageProps를 받는다.
1) Component의 속성 값은 서버에 요청한 페이지다.
(http://localhost:3000/projects로 접속하면, Component는 projects 컴포넌트를 가리킨다.)
2) pageProps는 getInitialProps, getStaticProps, getServerSideProps 중 하나를 통해 페칭한 초기 속성값이고 위의 값이 없다면 빈 객체를 반환한다.
제로초 React로 NodeBird SNS 만들기
서버사이드 렌더링 (개발자라면 상식으로 알고 있어야 하는 개념 정리 ⭐️)
[10분 테코톡] 🎨 신세한탄의 CSR&SSR
