[Next.js] 톺아보기 - 1.Pre-rendering

❐ Pre-rendering

기본적으로 Next.js는 모든 페이지를 pre-render한다. pre-rendering이란 각 페이지에 대한 HTML을 사전에 생성한다는 것을 의미한다. 이 작업은 성능과 SEO(검색 엔진 최적화)에 효과적이라고 Next.js는 소개한다. 

페이지가 브라우저에 로드된 후에 자바스크립트가 동작하면서 페이지는 반응하기 시작한다. 이러한 과정을 hydration이라고 한다.

pre-rendered된 페이지가 먼저 보이고 JS가 로드된 이후에 페이지가 반응

 

❐ Client Side Rendering vs. Pre-rendering

일반적인 React application에서 브라우저는 서버로부터 빈 HTML 껍데기(shell)을 전달받는다. 이때 UI를 구성할 JavaScript 코드도 함께 전달받는다. client-side rendering은 이처럼 최초의 렌더링이 사용자의 디바이스에서 발생한다. (Next.js로 만들어졌다 하더라도 client-side rendering를 사용할 수 있다. useEffect()나 useSWR 같은 data fetching 훅을 사용한다면 가능하다.)

 

client-side rendering이 적용된 페이지에서 유저는 렌더링이 완료될 때까지 빈 화면을 보게되는 반면, Next.js는 모든 페이지를 pre-render하기 때문에 유저는 이미 구성된 HTML을 초기화면으로 보게 된다.

 

 

 

[Next.js 공식문서] https://nextjs.org/docs/basic-features/pages

[Next.js 공식문서] https://nextjs.org/learn/foundations/how-nextjs-works/rendering

[Next.js 렌더링 과정 코드 확인하기] https://www.howdy-mj.me/next/hydrate