사전 렌더링(Pre Rendering)

렌더링의 2가지 의미

1. JS 실행(렌더링) : 자바스크립트 코트(React 컴포넌트)를 HTML로 변환하는 과정
2. 화면에 렌더링 : HTML 코드를 브라우저가 화면에 그려내는 작업

사전 렌더링이란?

: 브라우저의 요청에 서버측에서 사전에 렌더링이 완료된 HTML을 응답하는 렌더링 방식

• Client Side Rendering(CSR)의 단점을 효율적으로 해결하는 기술
• React APP의 단점 해소(빠른 FCP 달성) + React App의 장점 승계(빠른 페이지 이동)
  (React.js는 CSR 방식)
  ⬇️ 위 이미지는 아래 이미지의 보라색 영역에 대한 상세 내용
  

• FCP(First Contentful Paint) : 요청 시작 시점으로부터 컨텐츠가 화면에 처음 나타나는데 걸리는 시간.
• TTI(Time To Interactive) : 웹 페이지가 상호 작용할 때까지 걸리는 시간.
• 수화(Hydration) : 화면 렌더링이 진행된 브라우저 화면에서는 아직 인터렉션(상호작용)이 불가한데 이후에 서버에게 개발자가 작성한 모든 자바스립트 코드를 받고 코드를 실행해서 화면에 렌더링 되어있는 HTML코드와 연결해주는 과정(상호작용이 가능하게 해주는 과정)

Client Side Rendering(CSR)이란?

• React.js 앱의 기본적인 렌더링 방식
• 클라이언트(브라우저)에서 직접 화면을 렌더링 하는 방식
• 장점 : 초기접속 이후에 일어나는 페이지 이동이 매우 빠르고 쾌적
  (서버에게 새로운 페이지를 요청할 필요 x)
• 단점 : 초기 접속 속도(FCP: First Contentful Paint)가 느림
  

  JS Bundle -> 여기서는 React App
  : 이 서비스에서 접근 가능한 모든 컴포넌트 코드가 존재

이미지 출처 : 한 입 크기로 잘라먹는 Next.js 강의