Next.Js에서 다양한 렌더링 방식을 사용하는데 이를 알기위해서는 먼저 사전 렌더링(Pre-rendering)에 대해 먼저 알아야한다.
Pre-Rendering 이란?
일반적인 React를 사용한 웹 어플리케이션은 CSR 렌더링 방식을 사용하며, 이는 처음에 브라우저가 빈 HTML 파일을 받아 아무것도 보여주지 않다가, JS가 다운로드 완료되고 사용자의 기기에 렌더링이 진행되어 한 번에 화면을 보여준다.
하지만 Next.js는 모든 페이지를 사용자에게 전하기 전에 미리 렌더링, 즉 Pre-Render한다. 모든 일을 클라이언트에서 수행하는 것이 아니고 Next 서버에서 HTML을 미리 생성하는 것이다.
생성된 HTML은 해당 페이지의 최소한의 JS와 연결되고 브라우저에 의해 페이지가 로드되면 자바스크립트 코드가 실행되어 페이지와 사용자가 상호 작용할 수 있다. 이 과정을 Hydration이라 한다.
Pre-Rendering 과정
initial load -> js 동작만 없는 HTML을 먼저 화면에 띄우는데 아직 Link와 같은 컴포넌트는 동작하지 않는다.
hydration -> initial load에서 HTML을 로드하고 js 파일을 서버로부터 받아 HTML을 연결시키는 과정으로, 해당 과정에서 react 컴포넌트는 초기화되고 사용자와 상호작용할 준비를 마친다
Pre-Rendering의 종류
1) Static Site Generation
2) Server-Side Rendering
둘의 차이는 HTML을 언제 생성하느냐에 있다.
Static Site Generation
빌드 타임에 HTML을 프리 렌더링 한다. 매 요청마다 재사용되는 방법이다. next build 명령을 통해 웹 앱을 프로덕션 레벨에서 빌드 했을 경우, 이 시점에 HTML이 렌더링 되고, 각각의 클라이언트들이 요청할 때마다 이미 만들어진 해당 HTML이 재사용된다.
Server-Side Rendering
매 요청마다 HTML을 프리 렌더링 한다. 각각의 클라이언트가 요청 하는 시점에 매번 HTML을 생성한다. npm run dev 같은 개발 환경에서는 SSG를 사용하고 있더라도 모든 페이지들이 매 요청마다 프리 렌더링된다.
Next.js에서의 렌더링 방식
next.js에서는 다음과 같이 총 4가지의 렌더링 방식을 제공한다.
- CSR
- SSR
- SSG
- ISR
SSG
빌드 시 HTML이 생성되고 이는 CDN으로 캐시된다. 그 후 모든 요청시 캐시된 HTML을 재사용한다. 웹 페이지를 미리 렌더링하여 HTML 파일로 저장한다.
빠른 페이지 로딩 및 SEO가 우수하다.
SSG를 사용하기 위해선 getStaticProps를 사용하면 됩니다.
이 함수는 서버 측에서만 실행되는 함수로써 클라이언트에서는 실행되지 않습니다.
이 함수는 API와 같은 외부 데이터를 받아 Static Generation 하기 위한 용도이며 빌드 시에 딱 한번 호출됩니다.
SSG는 SSR 보다도 높은 성능을 가지고 있기 때문에 Next.js에서 권장하고 있는 렌더링 방식입니다.
ISR
빠른 페이지 로딩가능하고 우수한 SEO.
정적인 페이지를 정기적으로 다시 빌드하는 방식이다. 일부 페이지를 업데이트 할수있다.
빌드시 사전 렌더링된 페이지에 대한 요청이 이루어지고 처음엔 캐시된 페이지로 표시한다. 설정한 시간(revalidate)이 지나면 캐시를 무효화하고 업데이트된 페이지를 표시한다.
블로그와 같이 컨텐츠가 동적이지만 자주 변경되지 않는 사이트인 경우 ISR을 사용하기 적합니다.
SSR
초기로딩속도 향상
SEO 최적화, 동적 데이터를 지원할 수 있으나 서버 부하가 생길 수 있다.
모든 페이지 렌더링을 서버에서 수행하는 방식으로 페이지가 요청될 때마다 새로운 HTML 생성된다.
초기 로딩 시 클라이언트에서 렌더링된 페이지를 제공한다.
개인화된 사용자 데이터나 요청 시에만 알수 있는 정보의 의존하는 페이지를 렌더링해야하는 경우 사용.
밑은 SSR을 잘 표현한 그림같아서 삽입했음
CSR
빠른 초기 로딩, 동적 데이터 처리에 유용하고 서버 부하가 없다. 하지만 SEO에 불리하며 전체 페이지 로드 전에 지연을 느낄 수 있다.
모든 렌더링을 클라이언트 브라우저에서 처리한다. 페이지는 초기 로딩 후 동적 업데이트 된다.
CSR에서 브라우저는 페이지에 필요한 최소의 HTML 페이지와 JS를 다운로드한다. JS 다운로드 및 실행이 완료되기 전까지 페이지 렌더링이 되지 않는다.
