[Next.js] 사전 렌더링 이해하기

사전렌더링이 무엇인지에 앞서 Client Side Rendering (CSR) 되짚어보자면,

말그대로 클라이언트(브라우저)에서 직접 화면을 렌더링하는 방식으로 React 앱의 기본적인 렌더링 방식이다.

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

 

이 방식은 초기 요청 시 서버로부터 받은 JS Bunble 안에 이 서비스에서 접근 가능한 모든 컴포넌트 코드가 존재한다.

그래서 페이지 이동이 있더라도 서버에게 새로운 페이지를 요청하지 않고 브라우저가 자체적으로 React 앱을 실행해서

해당하는 컴포넌트로 갈아끼우기 때문에 초기 접속 이후의 페이지 이동이 매우 빠르고 쾌적하다는 장점이 있다.

 

하지만 초기 요청 시 서버로부터 모든 코드가 들어있는 JS Bunble을 받고 JS를 실행하고 컨텐츠를 렌더링하기까지

오랜 시간이 소요가 되므로 초기 접속 속도가 느리다는 단점이 있다. 즉, FCP(First Contentful Paint)가 느리다.

 

 

❓ FCP (First Contentful Paint)

: 요청 시작 시점으로부터 컨텐츠가 화면에 처음 나타나는데 걸리는 시간.

웹 페이지의 성능을 대표할 정도로 중요한 지표이다.

- 3sec 이상일 경우 : 이탈률 32% 증가

- 5sec 이상일 경우 : 이탈률 90% 증가

- 6sec 이상일 경우 : 이탈률 106% 증가

- 10sec 이상일 경우 : 이탈률 123% 증가

 

 

 

✅ Next.js의 사전 렌더링이란?

 

Next.js를 대표하는 기능 중 하나로, 브라우저의 요청에 대해 사전에 렌더링이 완료된 HTML을 응답하는 렌더링 방식이다.

Client Side Rendering의 단점을 효율적으로 해결하는 기술이다.

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

 

(이 위 그림에서처럼 JS를 실행하여 HTML로 변환하는 과정도 렌더링, HTML 코드를 브라우저가 화면에 그려내는 작업도 렌더링이라고 한다.)

위의 과정까지 화면 렌더링이 진행된 브라우저 화면에서는 아직 인터렉션(상호작용)이 불가하다.

 

 

이후 서버에게 우리가 작성한 모든 자바스립트 코드를 받고 코드를 실행해서 화면에 렌더링 되어있는 HTML코드와 연결해준다.

이 과정을 Hydration(수화)라고 하며 사용자가 서비스와 상호작용이 가능해진다.

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

 

❓TTI (Time To Interactive)

: 웹 페이지가 상호 작용할 때까지 걸리는 시간.

 

 

초기 로딩 이후 페이지 이동의 경우 React 앱과 마찬가지로 클라이언트 사이드 렌더링 방식으로 처리된다.

(초기 로딩 시 서버에서 전달하는 JS Bundle이 사실상 React App이기 때문)

 

 

따라서, Next.js 앱은 초기 접속 과정에서 사전 렌더링 방식을 통해 빠른 FCP를 달성함으로써 React 앱의 단점을 해소하고

이후 발생하는 페이지 이동에 대해서는 React 앱의 장점을 승계하여 빠른 페이지 이동이 가능하게 한다.

 

 

 

 

 

 

 

참고자료

🔗 [이정환] 한입 크기로 잘라먹는 Next.js(15+)