[NextJS] - (1) NextJS

본 포스팅은 Inflearn(인프런) 이정환님의 한 입 크기로 잘라먹는 NextJS(15+) 강의를 참고하여 작성되었습니다.

[NextJS의 Pre-Rendering]

Pre-Rendering(사전 렌더링)

- 브라우저의 요청에 사전에 렌더링이 완료된 HTML을 응답하는 렌더링 방식으로 CSR의 단점을 효율적으로 해결하는 기술이다. NextJS의 대표적인 기능 중 하나이다.

유저의 접속 요청 -> 프론트 서버 자체적으로 JS 파일들을 실행하여 렌더링(JS를 실행하여 HTML로 변환하는 과정)이 완료된 HTML을 브라우저에 전송 -> 브라우저는 바로 화면에 렌더링(HTML 코드를 브라우저가 화면에 그려내는 과정)하여 유저의 접속 완료 -> 유저는 인터렉션 불가한 화면을 받음 -> 프론트 서버의 JS Bundle 파일을 후속으로 전달 -> 브라우저가 JS Bundle 파일을 받아서 HTML과 연결하여 JS를 실행하는 Hydration 과정을 실행-> Interactive한 화면 유저에게 제공

 

TTI(Time To Interactive)

- 유저가 페이지 요청을 한 시점부터 Hydration이 완료된 Interactive한 웹 페이지를 제공받는데까지 걸린 시간

이후 페이지 이동에 대해서는 CSR과 동일한 방식으로 처리된다.

초기 접속 속도가 빠르며 페이지 이동이 빠른 CSR의 장점을 계승하고 단점을 보완한 방식이다.

 

CSR(Client Side Rendering)

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

유저의 접속 요청 -> 리액트 프론트 서버의 index.html 응답 -> 브라우저의 빈 화면 렌더링 -> 프론트 서버의 Bundling된 JS 파일을 브라우저에 후속으로 전송 -> 브라우저의 JS Bundle 파일은 React 실행 -> 브라우저의 컨텐츠 렌더링 -> 유저의 화면 접속 가능

 

JS Bundle 파일에는 해당 서비스에서 접근 가능한 모든 컴포넌트에 대한 코드가 포함되어 있다. 따라서 유저가 페이지 이동을 위해 서버에 별도로 요청을 보낼 필요 없이 브라우저에서 자체적으로 이동을 시켜주기 때문에 빠른 페이지 이동이 가능하다.

장점 : 초기 접속 이후 페이지 이동이 매우 빠르고 쾌적한 환경을 제공할 수 있다.
단점 : 초기 접속 속도가 느리다.

 

FCP(First Contentful Paint)

- 유저의 "요청 시작" 시점으로부터 컨텐츠가 화면에 렌더링되는데 까지 걸리는 시간. 웹 페이지의 성능을 대표할 정도로 중요한 지표이다.

 

FCP에 따른 사용자의 이탈률을 살펴보면 다음과 같다.

3초 이상인 경우	이탈률 32% 증가
5초 이상인 경우	이탈률 90% 증가
6초 이상인 경우	이탈률 106% 증가
10초 이상인 경우	이탈률 123% 증가

 

NextJS는 Pre-Rendering 과정을 통해 CSR의 단점을 보완하며 SSR의 장점을 계승하여 사용자에게 있어서 TTI와 FCP를 최적화하는데에 특화되어 있는 React의 단점을 보완한 Framework이다.