[Next.js] 시작하기② Pre-rendering, Data Fetching

Pre-rendering

Next.js는 기본적으로 모든 페이지마다 pre-rendering한다. 이것은 CSR보다 SEO가 더 좋다는 말!
각 HTML은 해당 페이지에 필요한 js코드와 연관되어 있다.
페이지가 브라우저에 의해 로드되었을 때, js 코드가 실행되고 페이지를 인터렉티브하게 만든다.(이 과정을 hydration이라고 함)
순수 React 앱이었으면 아마 로딩도 되지 않았을 거다. 왜냐면 React.js는 pre-rendering하지 않기 때문.

Next.js에는 Static Generation과 Server-side Rendering 두 가지 방법이 있으며 페이지마다 다르게 적용할 수 있다.

Static Generation

build타임에 HTML을 생성하는 방법이다. pre-render된 HTML은 각 요청에서 재사용된다.
yarn dev 명령어는 Static Generation방법으로 사용된다.

Server-side Rendering

각 요청마다 HTML을 생성하는 방법이다.

언제 어떤 걸 써야 하나?

각 요청마다 서버가 렌더링하는 것보다 CDN으로 서빙되는 게 더 빠르기 때문에,
*가능하면 Static Generation을 사용하는 걸 추천한다. *

유저의 요청 전에 페이지를 pre-render할 수 있나?

yes일 경우 Static Generation
no일 경우 Server-side Rendering

각 요청마다 페이지가 변하거나, 자주 업데이트되는 데이터가 있다면 Static Generation 방법은 좋지 않다.

Static Generation에서 Data 가져오기: getStaticProps()

getStaticProps()는 production에서 빌드타임에 실행된다.(development에서는 각 요청마다 실행된다.)
그리고 함수 안에서 외부 데이터를 fetch하거나 이것을 페이지에 prop으로 보낼 수 있다.

이 함수는 Next.js에게 이렇게 말한다.

이 페이지는 데이터 의존성이 조금 있어. 그러니까 빌드타임에 이 페이지 pre-render할 때, 이것 처음으로 해결하고 다른 거 해!

SQL 직접 실행

특이한 점은 getStaticProps() 함수 내에서 DB에 접근하여 SQL을 직접 실행할 수 있는데,
이게 가능한 이유는 server-side일 때만 실행되기 때문이다. 이 함수는 절대 client-side에서 실행되지 않는다.

Page안에서만 가능

이 함수는 page로부터만 export 가능하다. non-page 파일에서는 export할 수 없다.
많은 이유 중 하나는, React는 페이지가 렌더링되기 전에 필요한 데이터를 가지고 있어야 하기 때문이다.

요청시에 데이터 fetching: getServerSideProps()

빌드타임이 아닌 request time에 데이터를 fetching해야 한다면 getServerSideProps()를 사용할 필요가 있다.
하지만 이 방법은 서버가 각 요청마다 결과를 계산해야 하기 때문에, getStaticProps()보다 느릴 수밖에 없다.

Client-side Rendering

CSR을 사용하는 방법도 있다.
이 경우엔 빌드된 페이지가 나타난 후 요청을 통해 데이터를 변경하는 방식이다.
보통 유저 대시보드 같은 경우에 적합하다. 왜냐하면 대시보드는 해당 유저에 특화된 private한 페이지이고, SEO가 필요없기 때문이다. 그리고 pre-rendering될 필요가 없고, 데이터가 수시로 바뀌기 때문이다.
SWR, react-query 같은 거 함께 사용할 수 있다.