NextJs : 사전 렌더링 이해하기

사전 렌더링(Pre Rendering)이란?

 

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

 

그러면 React 처럼 CSR 를 사용하는 라이브러리의 어떤 단점 때문에 Next 프레임워크에서는  Server Side Rendering(SSR) 방식으로 렌더링하는지 알아보겠습니다.

React의 렌더링(CSR) 과정

먼저 Client Side Rendering 방식은 React.js 앱의 기본적인 렌더링 방식으로 클라이언트(브라우저)에서 직접 화면을 렌더링 하는 방식을 말합니다.

 

CSR 렌더링 과정을 살펴보면 초기에는 위에 그림 처럼 유저가 접속요청을 서버에 보내면 먼저 index.html를 빈껍데기 형식으로 브라우저(클라이언트)에 보내고 브라우저는 빈 화면을 렌더링하여 유저에게 빈 화면을 보여주게 됩니다.

 

그리고나서 서버는 JS Bundle 전체 JS 코드를 브라우저에 보내 브라우저에서 JS 파일을 실행해 컨텐츠를 렌더링하고 그제서야 유저는 컨텐츠가 포함된 화면을 보게 됩니다.

 

이러한 렌더링 과정과 JS Bundle 전체 파일을 한번에 보낸다는 특징이 있어 초기 로딩(초기 접속)에는 지연이 있어 첫 화면이 표시되기까지 시간이 걸린다는 단점이 있습니다.

 

반대로 JS 파일을 한번에 받았기 때문에 한번 초기 로딩 이후에는 서버 요청 없이 빠르게 페이지 전환이 가능하다는 장점 또한 가지고 있습니다.

 

하지만 요청 시작부터 컨텐츠가 화면에 처음 나타나는데 걸리는 시간 FCP(First Contentful Paint)에 따라 유저의 이탈률이 높아지기 때문에 이러한 렌더링 과정은 사이트 운영에 큰 단점이 될 수 있습니다.

React의 문제점을 해결하는 Next.js의 사전 렌더링(Pre-rendering, SSR)

 

위에서 설명한 CSR 렌더링의 초기 로딩의 단점을 사전 렌더링(SSR) 방식으로 해결할 수 있는데,

유저가 접속요청을 보내면 서버측에서 화면에 필요한 JS 실행(렌더링), 자바스크립트 코드(React 컴포넌트)를 HTML 으로 변환하여 브라우저에 보내기 때문에 유저는 CSR 방식에서 보다 빠르게 컨텐츠가 렌더링 된 화면을 볼 수 있게됩니다.

 

그러나 아직 위 과정을 통해 HTML 만 받았기 때문에 유저는 화면과의 클릭 혹운 페이지 이동과 같은 인터렉션(상호작용)은 불가 합니다.

 

그래서 후에 화면과 상호작용을 위해 Next 서버가 브라우저에 후속으로 모든 자바스크립트 코드 즉 리액트 코드를 번들링 해서 브라우저에 보내주게 됩니다.

 

그럼 브라우저는 서버에서 받은 JS 코드를 직접 실행해서 현재 화면에 렌더링된 HTML  요소들과 연결해주게 되고 이제 화면과 상호작용할 수 있게 됩니다.

 

이렇게 생성된 HTML은 해당 페이지에 필요한 자바스크립트 코드와 연결되는 과정을 수화(Hydration) 라고 합니다 

위의 과정을 통해 화면과 상호작용까지 가능해진 시점을 TTI(Time To Interactive) 라고 합니다.

 

그리고 추가적으로 TTI 까지의 상호작용까지 가능해진 시점 이후에 페이지 이동과 같은 동작은 CSR 방식으로 페이지 이동이 처리되는데 그 이유는 앞서 초기 접속 과정에서  Hydration 을 위해 서버에서 JS Bundle 파일을 브라우저에 보냈기 때문에 별도의 페이지 요청 없이 브라우저 측에서 JS 를 실행해서 컴포넌트를 교체하여 페이지를 이동하게 됩니다.

 

이러한 특징으로 인해 Next 는 React App 의 단점인 FCP를 빠르게 달성하고 React App 의 장점인 빠른 페이지 이동과 같은 장점을 갖게됩니다.

 

출처 : [한 입 크기로 잘라먹는 Next.js(15+) 강의]