728x90
CSR(Client-Side-Rendering)
- 클라이언트 측에서 렌더링 준비
구동 방식
- user가 website 방문
- 브라우저가 서버로 콘텐츠 요청
- 서버는 빈 뼈대만 있는 HTML을 응답으로 보낸다.
- 동적 DOM이 생성되고, 브라우저에 띄운다.
CSR장점
- 초기 로딩 이후, 구동속도가 빠르다.
- 서버 부하가 적다.
- 화면 깜빡임이 없다.
- TTI와 TTV의 간격이 작다.
CSR단점
- 초기 로딩 속도가 느리다.
- SEO(검색엔진최적화)에 불리하다.
SSR(Server-Side-Rednering)
- 서버 측에서 렌더링 준비
쉽게 말하자면?
서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식!
구동 방식
- user가 website 방문
- 브라우저가 서버로 콘텐츠 요청
- 서버는, 즉시 렌더링 가능한 html파일을 만든다. (리소스체크, 컴파일 후 완성된 html 컨텐츠)
- 브라우저가 전달받은 페이지를 띄워서 JS를 다운로드한다.
- 이때, 화면의 스타일이 모두 보이지만, JS로직과 HTML이 연결되는 중이다.
- 그래서, 사용자가 버튼 클릭 및 이동시 반응이 없을 수도 있다.
- 아직 JS가 다운로드가 되는중이기 때문에
SSR장점
- 초기 구동속도가 빠르다
- 서버에서 브라우저로 전달할 때, 모든 데이터가 담겨져있으므로 SEO(검색엔진최적화)에 유리하다.
SSR단점
- 화면 전환시 깜빡임이 있다.
- TTI와 TTV간격이 크다.
CSR단점 보완 방법은?
- code splitting
- tree shaking
- chunk 분리
세가지를 통해 초기 로딩속도를 보완하고,
- pre-rendering을 통해 SEO(검색엔진최적화)를 개선한다.
리액트의 SSR을 쉽게 구현해주는 프레임워크는?
Next.js
첫 페이지는 백엔드 서버에서 렌더링하여 빈 html이 아닌, 데이터가 채워진 html을 받아
검색엔진최적화 문제를 해결하고, 그 다음부터 CSR방식을 적용하여 필요한 데이터 부분만 갱신해 서버의 부하를 줄인 프레임워크이다.
728x90