[Next.js] 사전렌더링

React의 CSR

사전렌더링을 알아보기에 앞서, React의 CSR(Client Side Rendering) 방식을 되짚어보자.

 

 

이 방식은 초기 요청 시 서버로부터 받은 JS Bundle 안에 이 서비스에서 접근 가능한 모든 컴포넌트 코드가 존재한다. 그래서 페이지 이동이 있더라도 서버에게 새로운 페이지를 요청하지 않고 브라우저가 자체적으로 앱을 실행해서 컴포넌트를 갈아끼우기 때문에 초기 접속 이후의 페이지 이동이 매우 빠르고 쾌적하다는 장점이 있다.

 

하지만 초기 요청 시 서버로부터 모든 코드가 들어있는 JS Bundle을 받고 JS를 실행하고 컨텐츠를 렌더링하기까지 오랜 시간이 소요되므로 초기 접속 시간(FCP, First Contentful Paint)가 느리다.

 

Next.js의 사전렌더링

Next.js의 사전렌더링은 브라우저의 요청에 사전에 렌더링이 완료된 HTML을 응답하는 방식으로, CSR의 단점을 효율적으로 해결하는 기술이다. 

 

1. 초기 접속 요청: SSG(Static Site Generation) 또는 SSR(Server Side Rendering)

 

• JS 실행(렌더링): 자바스크립트 코드(React 컴포넌트)를 HTML로 변환하는 과정
• 화면에 렌더링: HTML 코드를 브라우저가 화면에 그려내는 작업
• 수화: 메말라있던 HTML에 javascript를 뿌려준다. 상호작용을 가능하게 해준다.

2. 페이지 이동: CSR(Client Side Rendering)

 

초기 로딩 이후 페이지 이동의 경우 React와 마찬가지로 CSR 방식으로 처리된다.

 

 

따라서, Next.js는 초기 접속 과정에서 빠른 FCP를 달성함으로써 React의 단점 해소하고, 이후 발생하는 페이지 이동에 대해서는 React의 장점을 승계하여 빠른 페이지 이동이 가능하게 한다.