Next.js 사전 렌더링

• Next.js는 모든 페이지를 사전 렌더링한다. 이는 클라이언트 사이드 자바스크립트로 모든 작업을 하는 대신에, Next.js가 HTML을 각 페이지들을 위해 미리 생성한다는 것을 말한다. 사전 렌더링을 함으로써, 더 나은 성능과 검색엔진 최적화 결과를 얻을 수 있다.

• 생성된 HTML은 페이지들에 필요한 최소한의 자바스크립트 코드로, 페이지가 브라우저에 의해 로드될 때 자바스크립트가 실행되고 상호작용이 가능한 페이지를 만들어 낸다.

• 사전 렌더링을 확인하려면? Chrome developer tool을 이용해 자바스크립트를 비활성화 하고 -> https://next-learn-starter.vercel.app/ 페이지에 접속하여 페이지가 보이는지 확인하기.

사전 렌더링의 두 가지 형태

1. 정적 생성
   정적 생성은 빌드 시 HTML을 생성하는 사전 렌더링 방법이다
2. 서버 사이드 렌더링
   서버 사이드 렌더링은 각 요청마다 HTML을 생성하는 사전 렌더링 방법이다.

정적 생성 vs 서버 사이드 렌더링

정적 생성은 CDN 서버에서 페이지를 한 번 빌드하고 사용할 수 있기 때문에 매 요청마다 서버 사이드 렌더링을 사용하는 것보다 훨씬 빠름 -> 가능하면 정적 생성을 사용하는 것이 좋다!
Next.js는 데이터와 함께 정적 생성이 가능하다. 어떻게 하냐면 getStaticProps 를 이용해서!
getStaticProps는 해당 페이지에 필요한 데이터가 있음을 알려주고 외부 데이터를 가져와서 페이지의 props로 전달할 수 있게 한다.

• getStaticProps를 이용해 외부API나 쿼리 데이터베이스를 가져오기

import fetch from 'node-fetch'

export async function getSortedPostsData() {
  // Instead of the file system,
  // fetch post data from an external API endpoint
  const res = await fetch('..')
  return res.json()
}

import someDatabaseSDK from 'someDatabaseSDK'

const databaseClient = someDatabaseSDK.createClient(...)

export async function getSortedPostsData() {
  // Instead of the file system,
  // fetch post data from a database
  return databaseClient.query('SELECT posts...')
}

getStaticProps가 서버 사이드에서만 작동함을 증명한다. 즉 브라우저로 쿼리를 전송하지 않고도 데이터베이스에 쿼리를 날리는 코드를 작성할 수 있다.

• 만약 요청 시 데이터를 가져오는 작업이 필요하다면?
  유저의 요청 전에 미리 페이지를 렌더링 할 수 없다면 서버 사이드 렌더링을 사용할 수 있다.
  서버 사이드 렌더링을 사용하기 위해서는 getStaticProps 대신 getServerSideProps를 사용해야 한다. 대신 서버가 매 요청마다 결과를 계산해야 해서 좀 느릴 수는 있음.

클라이언트 사이드 렌더링

데이터를 사전 렌더링 할 필요가 없다면 이 전략을 쓰자. 예를 들어 Admin 페이지는 비공개이고, 사용자 별 페이지이고, 검색 엔진 최적화가 필요 없으므로 클라이언트 사이드 렌더링이 적합하다.