NextJS의 프리 렌더링(Pre-rendering)에 대해서

React는 기본적으로 CSR(Client Side Rendering) 방식이다.

리액트가 포함한 자바스크립트를 이용해 HTML을 구성하기 때문에

정적인 HTML보다 SEO(Search Engine Optimization)가 약하다.

검색엔진 크롤러가 URL로 접근해도 자바스크립트를 받기 전까지 HTML 내용을 알 수 없기 때문이다.

 

이를 위해 리액트를 SSR(Server Side Rendering) 방식으로 구현할 수도 있다.

설정이 복잡하기 때문에 보통은 NextJS라는 리액트 라이브러리를 사용한다.

 

Pre-rendering

SSR을 쓰면 접속시 검색엔진에 유의미한 HTML 문서를 바로 받아올 수 있다.

더 이상 다운 받은 자바스크립트를 이용해 클라이언트에서 HTML 문서를 만드는 게 아니라

클라이언트에 보내주기 전에 이미 완성된 HTML 문서를 보내준다.

이를 NextJS에서는 Pre-rendering이라고 한다.

정적인 HTML 문서를 바로 받을 수 있어 SEO에 유리해진다.

 

다만 사용자가 HTML 문서만 다운 받은 뒤 클릭 등의 조작을 하더라도 반응할 수 있도록

기본적인 인터렉션을 위한 자바스크립트의 내용이 미니멀하게 HTML 문서에 포함된다.

그 다음으로 자바스크립트 다운로드가 완료되고 나서야 컴포넌트 변경 등의 인터렉션을 수행할 수 있다.

 

Static Generation

NextJS에서 Pre-rendering을 두 가지 방식으로 할 수 있다.

Static Generation은 대부분 사용되는 방식으로 빌드할 때 HTML 문서를 만들어 둔다.

그리하여 사용자가 페이지를 요청할 때마다 이 HTML 문서를 보내주게 된다.

만들어진 문서를 보내는 것이기 때문에 속도가 빠르므로 가능하다면 Static Generation을 사용해야 한다.

 

Server-side Rendering

사용자의 요청을 받았을 때마다 HTML 문서를 새로 생성해서 보내주는 방식이다.

페이지의 내용이 매번 바뀌거나 자주 업데이트가 되는 경우 사용하자.

물론 CSR을 이용하는 것도 방법이다.

nextjs.org/learn/basics/data-fetching/request-time

 

공식 매뉴얼에서는 두 가지를 선택하는 팁으로 다음을 생각해보라고 권한다.

"사용자의 요청이 오기 전에 페이지를 미리 렌더링 해도 괜찮은가? 아닌가?"