[NextJS] Pre-Renders(사전 랜더링) Page(페이지)

해당 블로그는 Udemy Max 강사의 NextJS 강의 중 일부를 요약한 내용입니다. - https://www.udemy.com/course/nextjs-react-the-complete-guide/?couponCode=KEEPLEARNING

 

 

사용자가 "/some-route" 경로로 요청을 보냈다고 가정해보자.

 

순수 React에서 동작 방식

Response로 비어있는 HTML 파일과 JavaScript 코드를 전달하고, JavaScript 코드가 클라이언트에서 실행된다. JS 코드가 실행되면서 서버에서 데이터를 가져와 화면상에 무언가를 나타나게 된다. 랜더링이 클라이언트에서 시작되며, DOM 구조 이외에 필요한 모든 데이터는 클라이언트에서 다시 서버로 요청을 보내어 Load되기 때문에 시간이 걸릴 수 있다. 

 

NextJS에서 동작 방식

NextJS는 사전 랜더링(Pre-rendering)된 Page를 반환한다. 필요한 데이터를 포함한 HTML 콘텐츠를 사전에 서버에서 Pre-Generate하여 Finished된 HTML Page를 반환한다. HTML 코드를 생성할 때 JS 코드도 연결되며 데이터를 사전에 가져온다. 코드가 로드되면 React와 Hydrate를 수행하여 사용자(User)와 입력, 클릭 등의 상호작용(Interaction)을 할 수 있도록 한다. 

 

Pre-Rendering은 오직 처음 어플리케이션이 로드(load)될 때만 사용된다. 만약, NextJS로 만들어진 웹 사이트를 방문했다고 가정해보자. 일단, 위 그림 처럼 Page가 Hydrated된다면 우리는 표준 SPA를 가지게 된다. SPA로 React가 Front End의 모든 것(주도권)을 넘겨 받게 된다면, '다른 페이지 이동' 등과 같은 이벤트가 일어나더라도 해당 페이지는 Pre-Rendering되지 않는다. 대신에 React로 클라이언트에서 생성된다.

 

NextJS에서는 Pre-Redering을 'Static Generation'과 'Server-side Rendering' 2가지 방식을 제공한다. Static Generation은 모든 페이지를 Deploy전 어플리케이션을 Build Time 동안 Pre-Generated하는 방식이다. Server Side Rendering은 어플리케이션이 Deployment된 이후에 요청이 서버에 전달될 때 Just in time 방식으로 Page가 생성된다. 

 

 

참고하면 좋은 블로그

NextJS에서 Pre-Rendering이 어떻게 일어나는지 코드를 통해 자세하게 분석한 블로그이다. 추가로 Hydration에 대한 개념도 정리해준다.

 

https://www.howdy-mj.me/next/hydrate

Next.js의 렌더링 과정(Hydrate) 알아보기