SSR 과 CSR 정리하기 (+ hydration)

CSR(Client Side Rendering)

• JavaScript로 DOM을 조작하여 웹 사이트가 브라우저에서 HTML을 렌더링

SSR(Server Side Rendering)

• 웹 사이트 화면을 띄우기 위해 서버에서 HTML, JS 파일을 렌더링
• SSG(Static Site Generation): 동적인 화면을 필요로 하지 않는 정적인 화면을 제공할 때 사용하는 렌더링 방식. 모든 유저에게 항상 동일한 화면이 보이기 때문에 한번만 생성한 이후에 어딘가에 저장해두고 필요할 때마다 로드된다. 주로 블로그, 회사 소개 페이지 같은 곳에 사용된다.

SSR과 SSG의 차이?

• SSR은 브라우저가 서버에 요청을 할 때 서버 측에서 렌더링이 일어나지만, SSG는 개발자가 개발을 완료하고 빌드하는 순간에 렌더링이 발생한다. 그래서 SSG는 SSR보다 정보의 변화가 적은 사이트에 대해 적합하다.

둘의 차이점

🐌 초기 로딩 속도

• SSR > CSR
  - SSR이 필요한 부분의 파일만 서버에서 렌더링하여 가져오기 때문에 초기 로딩 속도가 빠른 편이다.

🙊 SEO(검색 엔진 최적화)에서의 차이

• SSR (+SSG) > CSR
• 검색 과정 중 크롤러(검색엔진에서 필요한 정보를 찾는 소프트웨어)가 크롤링을 하여 색인(정보를 모아 인덱싱)하는 과정에서 CSR은 초기에 빈 페이지를 가져오게 되므로 크롤러는 빈 화면을 보고 검색 노출이 적어지고, SSR은 첫 페이지부터 필요한 데이터들을 렌더링하여 페이지를 구성하게 되므로 검색 노출이 좀 더 원활하게 된다고 이해할 수 있다.

🦖 서버 부담

• SSR > CSR
• SSR은 화면의 데이터가 변경될 때마다 서버에 요청을하고 다시 렌더링을 하기 때문에 서버 부담 측면에서 CSR보다 높다.

🐬 렌더링 성능 측면

CSR

• 빈 화면(TTFB fast, TTI slow)
• 번들 크기가 커질 수록 두드러진다.
  => 그렇기 때문에 코드 스플리팅, 번들 압축, 트리 쉐이킹의 중요성이 커진다.

SSR

• 느린 응답(TTFB slow, TTI fast)
• 싱글 스레드 renderToString 메서드의 특징 상 최초 응답이 늦어질 수 있음
• 번들 크기가 커질 경우 TTI까지 속도가 느려져 CSR과 같은 단점을 가질 수 있음

TTFB(Time to First Byte) : 어떤 리소스를 요청하고 난 후 해당 요청에 대한 첫 번째 바이트가 도착하기까지 걸리는 시간

FCP(The First Contentful Paint )

• 텍스트, 이미지 등 페이지가 로드되기 시작한 시점으로부터 콘텐츠의 일부가 화면에 렌더링 되기 시작한 시점의 시간을 측정
• FCP가 빠르면 사용자가 '페이지가 진행되고 있음'을 인지할 수 있는 상태가 된다. 1.8초 이하면 좋은 점수

TTI(Time to Interactive)

• TTI은 주요 하위 리소스가 로드되고 사용자 입력에 신속하게 안정적으로 응답할 수 있는 시점까지의 시간을 측정. 화면이 그려지는 것과는 거의 무관하다.
• 자바스크립트 이벤트 버튼을 눌렀을 때 해당 버튼이 제대로 이벤트 리스너에 연결된 함수를 호출하는 최초의 시점.

(출처: https://shopify.engineering/high-performance-hydrogen-powered-storefronts)

결론

• 어떤 렌더링 방식만이 좋다고 말할 수 없다.
• 만드는 서비스, 사용하는 페이지의 목적에 따라 렌더링 방식을 지정할 수 있다.
• 좋은 성능을 가진 웹앱을 만들기 위해 두 개 이상의 기능을 결합하는 것을 '하이브리드'라고 할 수 있다.

💦 Hydration

• 직역하면 수화. 어떤 것을 물로 가득 채우다.
• 사용자에게 빠르게 페이지를 보여주기 위해 서버에서는 정적인 HTML 페이지를 먼저 보여준다. 이후에 리액트가 컴포넌트로 렌더링하여 리액트로 가득 채움.(정적 페이지 대신 실제 인터랙션 가능한 페이지로) 하이드레이션이 발생한 뒤에는 리액트 컴포넌트이기 때문에 사용자가 클릭을 하면 컴포넌트의 기능이 실행된다.
• 하이드레이션은 하이브리드를 가능하게 만든다.
• 하이브리드는 2개 이상의 렌더링 방식을 사용하는 것이다.
• 정적인 페이지와 하이드레이션된 페이지 사이의 간극으르 줄여나가는 것이 중요한 포인트.

참고

• 원티드 프리온보딩 챌린지