민규의 개발블로그
SSR과 CSR 본문
Browser 에서 실제로 우리가 보는 화면이 있다.
그런 화면을 어디서 최종적으로 만들어서 보여주느냐, 어떻게 개발하느냐에 따라서 CSR(클라이언트 사이드 렌더링), SSR(서버 사이드 렌더링) 이라고 부른다.
먼저 SSR이란?
SSR은 Server Side Rendering 약자로 처음 클라이언트가 접속했을때 브라우저에서 자바스크립트 코드를 다운로드 받아 해석 할 때까지 기다리지 않고 서버에서 보여질 HTML을 미리 준비해 클라이언트한테 응답해주는 방식을 서버 사이드 랜더링이라고 한다.
전통적인 방법에서는 브라우저에서 프론트에 어떤 페이지를 달라고 요청을 보내면 프론트 서버에서 백엔드 서버로 데이터를 달라고 요청을 보내고 백엔드에서는 DB에서 데이터를 받아와서 프론트에 보내주고 프론트 서버에서는 HTML과 데이터를 합쳐서 브라우저에 보내준다.
근데 React나 Vue, 앵귤러에서는 먼저 브라우저가 page를 하나 받고 데이터 없이 화면만 먼저 받고 데이터는 로딩창 돌아가고있는 와중에 백엔드 서버에서 직접 받아온다. (SPA 방식)

CSR이란 ?
브라우저>프론트 요청하면 하나의 JS,HTML,CSS,IMG를 준다(데이터는 없음) 그럼 브라우저에는 화면은 그려주는데 데이터가 없다 . 그래서 브라우저는일단 로딩창을 띄워준다 데이터가 올때까지
그다음 브라우저 > 백엔드 요청
게시글들을 달라고 요청 그럼 백엔드에서 > DB에 요청 데이터들을 받아서 백엔드는 다시 브라우저에 보내준다. 그럼 이제 브라우저에서 로딩창을 없애고 백엔드 서버 에서 받았던 데이터들을 화면에 그려준다.

SSR,CSR 장단점

SSR 방식은 전체가 한번에 그려진다는 장점이있지만 과정이 길어 로딩속도가 많이걸린다 .
CSR 방식은 초기 로딩화면이 보이면 사용자들이 잘 떠나지 않는다. 그러나 검색엔진에서 상위권에 노출될수 없다. (구글제외) 이유는 검색엔진이 방문했을 때 초기에 로딩화면 밖에 보이지 않아서 쓸모없는 페이지라 인식하기 때문
SSR과 CSR 개념 정리
SSR:사용자가 웹 페이지에 접속했을 때 서버가 사용자에게 랜더링될 HTML을 응답하여 브라우저가 바로 랜더링할 수 있게한다. 그 후 CSR과 동일하게 자바스크립트 파일을 다운로드 받고 실행한다.
CSR: 사용자가 웹 페이지에 들어왔을 때 브라우저가 자바스크립트 파일을 다운로드 받아 해석한 후 랜더링한다.
SPA 방식
SPA는 Single Page Application 단 하나의 Html 파일에서 javascript를 이용해 동적으로 화면을 바꾸는 (눈속임) 방식의 웹 어플리케이션이다.
그럼 SPA는 CSR이다? 답은 "No" 다.
SPA는 서버로부터 처음에만 페이지를 받아오고 이후에는 동적으로 DOM을 구성하여 Rendering 되는 화면이 바뀌게 한다.
바로 여기서 “동적으로 DOM을 구성하여 Rendering 되는 화면이 바뀌게 한다.” 부분이 CSR이다.
쉽게 말하자면 SPA는 처음에만 페이지를 받아오고 이후에는 받아오지 않는데 이럼에도 데이터가 수정되고 조회되게 하고 싶어서 CSR이란 “방식”을 채택한 것.
참고로 SPA는 페이지가 한번 로딩된 이후 데이터를 수정하거나 조회할 때, 페이지가 새로 고침되지 않고 다른 페이지로 넘어가지 않는다.
그럼 CSR, SSR 중에 뭐를 써야돼?
여기서 해결법
1. SSR 쓰기 첫 방문만 전통적인 방법대로하고 그다음 페이지 전환일땐 리액트 방식대로 하기
2. 첫 요청때 방문한 페이지만 보여주게 코드스플리팅해주기
이걸 Next가 해준다.
실무에선 위 두개를 해줘야된다. 검색엔진에 노출이되야하고 사용자 경험을 중시해서 속도향상
NEXT 쓸 필요 없는 서비스
어드민 페이지 - 검색엔진 나올일도없고 느리다고 관리자들한테 중요하지도 않음 그냥 REACT로 만들면 된다.
Next란?

Next.js는 간단하게 말하면 리액트에서 SSR을 쉽게 적용할 수 있게 해주는 라이브러리다.
사용자 시나리오로 알아보는 Next.js 작동 방식.
첫 번째, 사용자가 처음 페이지를 접속을 요청 했을때 Next.js 서버는 사용자에게 랜더링될 HTML을 응답 값으로 보내준다. ( SSR 방식 ).
두 번째, 그 후 브라우저는 추가적인 자바스크립트 번들을 다운로드 받아 실행한다.
세 번째, 사용자가 해당 페이지에서 다른 페이지로 이동할때는 Next.js에 서버가 아닌 브라우저에서 처리하여 이동하게 한다. ( CSR 방식 )
Next.js 특징
- 직관적인 라우팅 시스템 ( dynamic routes 지원, ex: /posts/:id )
- 페이지를 자동으로 최적화
- 데이터가 필요한 페이지를 SSR 할 수 있게 지원
- 빠른 페이지 로드를 위한 자동 코드 스플라이팅
- HMR을 지원
- 쉬운 커스텀마이징을 할 수 있음
참고 링크
'React' 카테고리의 다른 글
immer로 불변성 관리를 쉽게 하자 (0) | 2020.12.18 |
---|---|
Redux-Saga (NEXT) (0) | 2020.12.11 |
React hooks로 최적화 하기(useMemo, useCallback) (0) | 2020.12.07 |
React - hooks (useEffect) (0) | 2020.12.07 |
재렌더링이 일어나는지 확인하는법 (0) | 2020.12.03 |