단의 개발 블로그
SSR & CSR, Hydrate 본문
웹 브라우저의 화면은 DOM이다. 브라우저의 엔진은 HTML를 해석하여 DOM 트리를 구성한다. HTML 구문은 웹 서버나 브라우저가 생성한다. 이때 웹 서버가 생성하는 것을 SSR, 브라우저가 생성하는 것을 CSR라고 부른다.
SSR
Server Side Rendering의 약자로, 서버에서 정적 파일을 렌더링 하는 것을 의미한다. SSG라는 개념이 종종 사용되기도 하는데 Static Site Generation으로 정적 화면만 제공할 때 사용하는 렌더링 방식을 의미한다.
장점
- 초기 페이지 로딩 시간이 빠르다.
- 검색엔진 최적화가 된다.
- 보안이 좋다.
- 실시간 데이터를 보여줄 수 있다
단점
- 서버 자원을 많이 사용한다.
- 페이지 깜빡임이 발생한다
CSR
Client Side Rendering의 약자로, 클라이언트(브라우저)에서 HTML을 렌더링 하는 것을 의미한다. 초기에 빈 HTML을 응답 받고, 해당 파일 로딩이 완료된 후 리액트의 리소스도 끝나서 실행될 때 렌더링을 한다.
장점
- 한번 로딩이 되면 그 다음은 캐싱되어 빠른 속도로 클라이언트에게 제공된다.
- 서버 부하가 적다
단점
- 초기 페이지 로딩시간이 길다.
- 검색엔진 최적화에 이슈가 있다.
- 보안이 좋지 않다.
- CDN 캐시가 불가능하다.
Hydrate
SSR에서 사용되는 개념으로 pre-rendering을 통해 완성된 HTML을 클라이언트가 전달 받는다. 리액트는 번들링된 자바스크립트 코드를 클라이언트에게 보내고, 클라이언트는 전달받은 HTML과 자바스크립트 코드를 매칭하는 Hydrate를 수행한다. 즉, 서버에서 전달 받은 HTML 파일을 클라이언트 측에서 자바스크립트 이벤트와 상태를 연결하는 과정을 의미한다.
알아두면 좋은 점
SSR과 Hydrate의 문제점
- 사용자가 데이터를 받기 전 다 가져와야 하는 문제가 있다.
- React18에서 Suspense가 업데이트 되었다.
- 데이터 패치 -> 렌더링 -> 코드 로드 -> Hydration과정 중 이전 단계가 끝나기 전까진 완료될 수 없다. 작업을 분리해서 각 부분에 대해서 작업을 수행할 수 있게 해준다. 예를들어 헤더, 네비게이션, 게시글, 댓글이 있다고 가정한다. 댓글 전송이 느려 나머지 3개 컴포넌트도 불러올 수 없게 됐다. 이때 댓글 컴포넌트를 suspense로 감싸면 React는 댓글 부분을 기다리지 않고 HTML을 전송한다. 댓글 컴포넌트가 완료되면 그때 다시 댓글 컴포넌트도 전송한다.
- Hydaration을 하기 위해선 HTML과 자바스크립트 모두 필요하다.
- 웹팩이 자바스크립트 코드를 번들링해서 실행된다. 사용자는 해당 코드를 다운 받아 브라우저에서 출력되는데, 만약 번들링된 파일이 클 경우 애플리케이션이 느려지게 된다. 그러면 Hydration 과정에서 문제가 발생한다. 이때 이전에 배웠던 코드 스플리팅으로 해결해준다. 큰 번들 사이즈를 피하기 위해 특정 코드 부분을 동기적으로 로드하는 것을 피해준다.
참고
https://velog.io/@sagesrkim/SSR-%EA%B3%BC-CSR-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0
https://yozm.wishket.com/magazine/detail/2330/
https://velog.io/@leehyunho2001/Hydrate#react-18
