Next.js의 동작방식인 사전렌더링을 이해하기 전에 기존 React의 CSR을 되짚어 보자.
Client Side Rendering(CSR)?
클라이언트(브라우저)에서 직접 화면을 렌더링하는 React앱의 기본적인 렌더링 방식
브라우저가 서버에 접속 요청을 하게되면 서버는 비어있는 index.html파일을 보내게 되고,
사용자가 빈 화면을 보고있는 동안 서버는 모든 자바스크립트 코드들, 즉 우리가 만들어 두었던 리액트 앱을
하나의 자바스크립트 파일로 묶어서 후속으로 브라우저에게 전송한다.
다음으로 브라우저는 서버로부터 받은 번들링된 자바스크립트 파일(리액트 앱)을 직접 실행하면
비로소 우리가 만든 리액트 컴포넌트들이 실제로 화면에 렌더링됨.
초기 접속 이후에 일어나는 페이지 이동들을 매우 빠른 속도로 쾌적하게 처리할 수 있지만 반대로 "요청 시작" 시점으로부터 컨텐츠가 화면에 처음 나타나는데 걸리는 시간인 FCP(First Contentful Paint)가 오래 걸림.
사전렌더링(Pre-rendering)?
브라우저의 요청에 사전에 렌더링이 완료된 HTML을 응답하는 렌더링 방식
Client Side Rendering의 단점을 효율적으로 해결하는 기술
유저가 브라우저를 통해서 서버에게 초기 접속요청을 보내면 서버측에서 직접 자바스크립트 코드들(리액트 앱)을
직접 실행시켜서 모든 리액트 컴포넌트들을 HTML로 변환하여 렌더링됨
하지만, 위의 과정까지 화면 렌더링이 진행된 브라우저 화면에서는 아직 자바스크립트 코드가 없어서 인터렉션(상호작용)이 불가하다.
이후 서버가 후속으로 우리가 작성한 모든 자바스크립트 코드(리액트 앱)을 번들링해서 브라우저에게 보내주게 되고, 브라우저는 서버로부터 받은 리액트 앱을 직접 실행해서 화면에 렌더링되어있는 HTML 요소들과 연결시켜주게 됨.
위 과정을 마치 메말라있던 HTML에 자바스크립트라는 물을 뿌려주는 것과 같다고 하여
Hydration(수화)라고 부른다.
Hydration이 끝나 상호작용까지 가능해지는 시점을 TTI(Time To Interactive)라고 표현한다.
결과적으로, 초기 접속 요청 과정에서는 서버측에서 자바스크립트 코드를 HTML로 미리 렌더링하는 사전 렌더링이라는 방식을 통해 기존 리액트의 단점이었던 느린 FCP를 빠르게 개선하는 동시에 그 이후에 발생하는 페이지 이동들은 기존의 CSR방식 그대로 처리함으로써 기존 리액트 앱의 장점인 빠르고 쾌적한 페이지 이동은 그대로 계승하는 동작 방식이다.
