[한 입 Next.js] 02. 사전 렌더링(Pre-Rendering) 이해하기

사전 렌더링(Pre-Rendering)

Next.js 기본 동작 방식의 기초 원리이기 때문에 미리 알아두기

 

CSR(Client Side Rendering)

React.js 앱의 기본적인 렌더링 방식

• 클라이언트(브라우저)에서 직접 화면을 렌더링하는 방식
• 페이지 이동이 매우 빠르고 쾌적하다는 장점이 있음
• 서비스에서 접근 가능한 모든 JS 파일을 묶어서 Bundle로 받아옴

• 초기 접속 이후에 페이지를 이동하더라도 서버에 새로운 페이지를 요청할 필요가 없음
• 브라우저는 리액트 앱을 가지고 있음 > 모든 페이지의 컴포넌트를 이미 가지고 있음
• 따라서 브라우저가 자체적으로 JS를 실행해서 적절히 컴포넌트를 갈아끼우기만 하면 됨

• 하지만 치명적인 단점이 있음 > 초기 접속이 느려짐

• 화면이 컨텐츠를 렌더링할 때까지 브라우저가 할 일이 너무 많음
• 장점: 초기 접속 이후의 페이지 이동이 빠름
• 단점: FCP(초기 접속 속도)가 느림
• Client Rendering의 단점을 Pre-Rendering으로 해결 (Next.js)

 

FCP (First Comtentful Pain): 초기 접속 속도

• 요청 시작 시점으로부터 컨텐츠가 화면에 처음 나타나는데 걸리는 시간
• 웹페이지 성능을 대표할 정도로 매우 중요함
  • 3s 이상: 이탈률 32% 증가
  • 5s 이상: 이탈률 90% 증가
  • 6s 이상: 이탈률 106% 증가
  • 10s 이상: 이탈률 123% 증가
• React.js의 Client Rendering은 FCP가 늘어남

 

Pre-Rendering: 사전 렌더링

• 브라우저의 요청에 사전에 렌더링이 완료된 HTML을 응답하는 렌더링 방식
• Client Side Rendering의 단점을 효율적으로 해결하는 기술

 

• 의문점 : 서버 측에서 JS 실행해서 HTML로 변환하는 과정도 렌더링, 브라우저가 컨텐츠를 화면에 그리는 과정도 렌더링?
  
  • 렌더링: JS 코드(React 컴포넌트)를 HTML로 변환하는 과정(JS 실행)
  • 화면에 렌더링: 서버로부터 받은 HTML 코드를 브라우저가 화면에 그려내는 작업

• 하지만 이 시점(화면이 보임)에서는 상호작용 불가 : JS 코드가 없어서
• 브라우저가 후속으로 JS Bundle을 받으면 JS 실행해서 HTML 요소와 연결하면 이 떄부터 상호작용 가능해짐

• 메말라 있는(상호작용 불가능한) HTML 파일에 JS 파일을 쏟아붓는 Next.js의 과정: 수화(Hydration)
• TTI(Time To Interactive): 상호작용 가능 시간

 

• 그럼 여기서 페이지 이동 요청이 일어난다면?
• 초기 접속 시 JS Bundle(사실상 React App)을 받았기 때문에 클라이언트 사이드 렌더링 방식으로 처리 가능

• 정리: Pre-Rendering은 빠른 FCP를 달성하면서 동시에 삐른 페이지 이동이 가능한 방식임

 

 

 

 

 

출처 강의 및 링크: 한 입 크기로 잘라먹는 Next.js 1.2강 (이정환)

 

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs

한 입 크기로 잘라먹는 Next.js(15+) 강의 | 이정환 Winterlood - 인프런