1. 사전 렌더링(Pre-rendering)
브라우저의 요청을 받으면 서버 측에서 사전에 렌더링이 완료된 HTML 문서로 응답하는 방식입니다.
기존에 리액트가 따르고 있던 Client Side Rendering(CSR)의 단점을 효율적으로 보완한 기술입니다.
2. 그렇다면 CSR이란?
1) CSR의 의미
CSR(Client Side Rendering)이란 클라이언트(브라우저)에서 직접 화면을 렌더링하는 방식입니다.
리액트 앱의 기본적인 렌더링 방식입니다.
2) CSR이 이루어지는 과정
위 그림의 순서를 정리해보면 이렇습니다:
- 사용자가 페이지 접속을 서버에 최초로 요청
- 서버는 리액트의 index.html(빈 껍데기)만 브라우저에 전달
- 브라우저는 유저에게 빈 화면을 그대로 렌더링
- 이후 서버는 번들링 된 JS 코드(리액트의 모든 컴포넌트들)를 브라우저에게 전달
- 브라우저는 이 JS 번들을 받아 실행하고 유저에게 컨텐츠 렌더링(FCP)
3) CSR의 장단점
이 CSR 방식에는 명확한 장단점이 존재합니다:
- 장점: 초기 접속 요청 이후의 페이지 이동이 매우 빠르고 쾌적합니다.
- 단점: FCP(초기 접속 속도)가 느립니다. 이 수치가 커지면 치명적일 수 있습니다.
4) FCP(First Contentful Paint)
요청 시작 시점으로부터 컨텐츠가 화면에 처음 나타나는 데 걸리는 시간(초기 접속 속도)입니다.
'요청 시작 ↔︎ 컨텐츠 렌더링'으로 이해할 수 있습니다.
FCP는 웹페이지의 성능을 대표할 정도로 중요한 지표입니다.
- FCP가 3초 이상일 경우: 이탈률 32% 증가
- FCP가 5초 이상일 경우: 이탈률 90% 증가
- FCP가 6초 이상일 경우: 이탈률 106% 증가
- FCP가 10초 이상일 경우: 이탈률 123% 증가
💡 CSR과 사전 렌더링의 FCP
- CSR: JS가 로드되고 실행되기 전까지 브라우저가 빈 화면을 표시
- 사전 렌더링: 서버에서 HTML이 바로 전달되므로 브라우저가 즉시 내용을 렌더링
3. 사전 렌더링: 리액트의 단점 보완
1) 사전 렌더링이 이루어지는 과정
위 그림을 다시 순서대로 정리해보겠습니다:
- 사용자가 페이지 접속을 서버에 최초로 요청
- 서버에서 HTML을 즉시 생성해서 브라우저에 전달
- 브라우저는 이를 화면에 렌더링(FCP)
- 이후 서버는 나머지 컴포넌트들이 모두 번들링 된 JS 번들을 브라우저에 전달
- 수화(Hydration): HTML에 React 상태와 이벤트를 결합하여 동적 동작 활성화(CSR)
- 애플리케이션이 완전히 인터랙션이 가능한 상태에 도달(TTI)
2) 수화(Hydration)
- FCP 직후에는 클릭, 스크롤 이벤트나 페이지 이동 등의 유저 인터랙션이 불가능한 상태입니다.
- 처음으로 요청 받은 HTML만 그려낸 시점이기 때문입니다.
- 그렇기 때문에 FCP 직후 서버는 JS를 번들을 브라우저에 전달해서 나머지 컴포넌트들을 클라이언트 사이드에서 실행할 준비를 마칩니다.
- 이 시점부터의 렌더링은 리액트의 CSR 방식으로 동작하게 되므로 페이지 전환이 빠릅니다.
- 브라우저가 JS 번들을 실행한 이후에는 리액트의 클라이언트 사이드 라우팅이 활성화되기 때문에 페이지 전환이 서버 요청 없이도 빠르게 처리되는 것입니다.
- 이 과정을 Next.js는 메말라 있는 HTML에 가뭄에 단비같은 자바스크립트를 입혀서 완전한 인터랙션이 가능하게 한다는 점 때문에 '수화(Hydration)'라고 표현합니다.
3) TTI(Time To Interactive)
- 요청 시작 시점으로부터 자바스크립트 인터랙션까지 완벽하게 가능해지는 데 걸리는 시간입니다.
- 기준 시점이 FCP가 아니라 요청 시작 시점이라는 점에 유의합시다.
(제가 헷갈렸었습니다.)💡 FCP와 TTI의 차이점
- FCP: 사용자가 HTML을 처음 볼 수 있는 시점
- TTI: HTML이 렌더링된 후 페이지가 완전히 상호작용 가능한 상태가 되는 시점
3) 사전 렌더링의 획기적인 장점
결론적으로 사전 렌더링 방식은 이러한 장점을 갖습니다:
- 리액트의 단점 해소: 빠른 FCP 달성
- 리액트의 장점 승계: TTI 이후부터는 CSR을 수행하기 때문에 빠른 페이지 이동 가능
4) '렌더링'이라는 용어
서버에서 자바스크립트를 실행해서 HTML 문서를 만드는 작업도, 브라우저가 이 HTML을 화면에 그리는 작업도 '렌더링(Rendering)'이라는 동일한 용어를 사용하기 때문에 혼동하지 않도록 주의합시다. 위 그림에 나타난 '렌더링'이라는 용어는 아래와 같은 의미로 해석하면 됩니다:
- JS 실행: 자바스크립트 코드(리액트 컴포넌트)를 HTML로 변환하는 과정
- 화면에 렌더링: HTML 코드를 브라우저가 화면에 그려내는 과정
5) TTI 이후 인터랙션
- TTI 이후 페이지 이동 요청이 발생한다면 어떻게 될까요?
- 이때부터는 CSR 방식으로 렌더링이 처리됩니다.
- 즉 JS가 실행되어 컴포넌트만 교체되는 과정이 발생하는 것입니다.
- 따라서 이때부터는 리액트처럼 페이지를 빠르게 교체할 수 있게 됩니다.
6) 사전 렌더링의 종류
사전 렌더링에는 SSG와 SSR이라는 두 가지 방식이 있습니다.
두 방식의 차이는 HTML을 생성하는 시점에 있습니다:
(1) SSG(Static Site Generation)
- HTML 생성 시점: 빌드 시점(배포 이전)에 HTML을 생성합니다.
- 모든 페이지가 정적으로 생성되어 빠른 로딩 속도를 제공합니다.
- 콘텐츠가 자주 변경되지 않는 페이지(블로그, 문서 사이트)에 적합합니다.
(2) SSR(Server-Side Rendering)
- HTML 생성 시점: 브라우저 요청 시점에 서버에서 HTML을 동적으로 생성합니다.
- 실시간 데이터를 포함한 HTML 생성이 가능하며, 유저 맞춤형 콘텐츠에 적합합니다.
- 서버 요청이 많아질수록 성능 부하가 증가할 수 있습니다.
Junior Frontend Developer