NextJS 입문, Pre-rendering이란?

합격한 회사에서 Next 프레임워크를 쓴다고 한다.

첫 출근 전에 Next가 어떻게 SEO를 좋게 하는지, 어떤 방식으로 SSR을 할 수 있는지 개념을 잡아보려고 한다.

Next에 대해 모를때는 막연히 SPA에서도 SSR이 가능하도록 해주는 것 정도로 들었고, 그렇게 알고 있었는데

조금 공부해보니 SSR을 굉장히 쉽게 구현할 뿐만 아니라 편한 기능이 많다.

이래서 프레임워크를 쓰는구나!

 

공식문서를 보면 Pre-rendering이 가장 먼저 등장하는데, 오늘은 Pre-rendering에 대해 공부해보자.

기본적으로 Next는 모든 페이지를 Pre-rendering 한다. 

Pre-rendering이란 미리 각각의 페이지에 대한 HTML을 만드는 것이다.

다시 말하자면 순수 React만 사용할때를 생각해보면 우리 HTML은 index.html밖에 없었다.

그래서 JS 번들링된 파일을 받아와야 브라우저에서 레이아웃을 보여줄 수 있었다.(CSR)

next로 만든 페이지 소스

Next프레임워크를 활용하여 간단한 페이지를 만들어서 페이지 소스보기를 눌러보면 HTML이 가득하다.

순수 React만으로 만든 페이지 소스

반면에 위 사진은 순수 React 프로젝트인데, PWA 만들면서 넣었던 서비스워커만 보이고 사실상 비어있는 HTML이다.

이렇게 Next는 기본적으로 Pre-rendering을 하기 때문에 모든 페이지의 HTML을 제공하는 것이다.

SEO에 좋을 수 밖에 없다.

 

Pre-rendering은 크게 두 가지 방법으로 구분된다. Static Generation과 Server-side-rendering이다.

Server-side-rendering을 해주는 게 next인 줄 알았는데, 사실 그것보단 Pre-rendering이 핵심이고

게다가 오히려 Server-side-rendering보다는 Static Generation이 더 권장되는 방법이다.

둘 다 Pre-rendering을 하는 방법인 것은 알겠는데 뭐가 다른 걸까?

 

바로 HTML을 만드는 시점(타이밍)의 차이다.

Static Generation(SSG)은 HTML이 빌드타임에 만들어진다. 그리고 CDN에 캐시되어 매 요청 시에 재사용된다.

Server side rendering(SSR)은 HTML이 매 요청시에 만들어진다.

사용자의 request를 받아서 만들어지기 때문에 당연히 캐시 될 수 없겠지?

이런 차이로 인해서 SSG의 퍼포먼스가 훨씬 좋을 수밖에 없고, next는 공식문서에서 SSG를 주로 사용하길 권장한다.

 

물론 둘 다 외부의 데이터를 가져와서 HTML을 만들 수 있다.

SSG는 getStaticProps와 getStaticPaths를 사용한다. 자세한 사용법은 나중에!

이런 것을 사용하면 빌드타임에 호출되어 데이터를 넣은 채로 HTML을 생성해서 Pre-rendering 한다. 신기하다.

 

SSR은 getServerSideProps를 사용한다. 이 메서드는 빌드타임이 아니라 사용자의 요청이 있을 때마다 실행되어 

데이터를 fetch 시킨다. 즉, 사용자의 요청이 있는 시점의 데이터를 가져와서

그 데이터가 반영된 HTML을 Pre-rendering 시킨다는 뜻이다. useEffect와 확실히 쓰임새가 다르다.

아무래도 요청 시마다 새로운 데이터가 반영된 HTML을 만드는 특징이 있다 보니 SSG보다 퍼포먼스적으로 더 느릴 것이지만

그럼에도 불구하고 분명히 SSR을 사용해야 할 때가 있을 것이다.

 

언제 사용할까?

공식문서에 따르면 자주 업데이트되거나, 요청마다 데이터가 다르지 않다면 웬만하면 SSG를 이용하기를 권장한다.

예를 들면 마케팅 페이지, 블로그 포스트, 포트폴리오, 제품리스트, 도움말(?), 문서 등

반면 자주 업데이트되거나 요청 시마다 데이터가 달라진다면 두 가지 옵션이 있다.

일부 Pre-rendering을 포기할 수 있다면 SSG+CSR을 사용하던가

아니면 Pre-rendering이 꼭 필요하다면 SSR를 사용하던가.

(근데 데이터가 자주 바뀌는 페이지를 전부 SSR 해야 할 필요가 자주 있을까..?)

 

다음에는 실제로 data fetching이 어떻게 일어나는지 공부해보자