사전 렌더링 (Pre rendering)

브라우저의 요청에 사전에 렌더링이 완료된 HTML을 응답하는 렌더링
빠른 FCP 달성! (기존 react 단점 해소)
빠른 페이지 이동! (react 장점 승계)

서버 측에서 직접 JS코드, 즉 리액트 앱을 직접 실행시켜서 내가 만든 리액트 컴포넌트들을 HTML로 변환하여 사전에 렌더링을 수행한다. 즉, 서버에서 사전에 렌더링이 완료된 HTML을 보내주는 것임. 그리고 브라우저는 이 HTML코드를 화면에 렌더링한다.

밑에 CSR은 서버에서 빈 껍데기 HTML을 보내주는것과 큰 차이점.
=> 기존 리액트의 CSR (Client Side Rendering)의 단점을 해결함.

Hydration

FCP에 도달하면 화면이 보이지만 실제 인터랙션은 이루어지지않는다. (js가 아직 실행되지않았으니까.)
이후 브라우저는 사용자들이 인터랙션을 할 수 있게 JS 실행으로 HTML 과 자바스크립트를 연결하는데, 이 과정이 Hydration
(참고로 TTI는 Time to Interaction)

페이지 이동

리액트처럼 CSR로 처리하는데 이유는 hydration을 위해 서버에서 JS bundle을 받아왔는데 이게 사실상 리액트 컴포넌트가 들어있는 앱임. 기존 리액트가 작동하는것처럼, 페이지 이동시 브라우저가 직접 JS 실행하여 컴포넌트 교체로 페이지 이동이 이루어지는것.

결론

처음 접속할때 빠른 FCP 달성으로 react의 CSR 단점을 해소하고, 이후 페이지 요청할땐 기존 CSR 방식으로 처리되므로 react의 장점인 빠른 페이지 이동이 가능하다.

CSR (Client Side Rendering)

React의 기본적인 렌더링 방식으로, 클라이언트(브라우저)에서 직접 화면을 렌더링
페이지 이동이 매우 빠르지만 초기 접속 속도(FCP)가 느림


FCP(First Contentful Paint)?🧐
요청 시작 시점으로부터 컨텐츠가 화면에 처음 나타나는데 걸리는 시간
요청시간<=>컨텐츠 렌더링

• JS Bundle에 이미 서비스에서 접근 가능한 모든 컴포넌트 코드가 존재함

그래서 초기 접속 이후 페이지 이동해도 서버에게 새로운 페이지를 요청할 필요가 없다. 이미 서버로부터 받은 리액트 앱(위 그림에서 리액트 로고 부분)을 브라우저 자체적으로 실행하니까