Next Rendering

SSG

export async function generateStaticParams() {
  // 모든 제품의 페이지들을 미리 만들어 둘 수 있게 해줍니다.(SSG)
  const proudcts = await getProducts();
  return proudcts.map((product, index) => ({
    slug: product.id,
  }));
}

ISR

참고: https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration

npm run build
npm run start

3초 후에 페이지를 새로고침하면 텍스트가 변경된 것을 확인할 수 있습니다.

자, 이제는 fetch를 이용해서 api조회를 해보겠습니다.

https://meowfacts.herokuapp.com // 사용할 api

npm run build && npm run start를 실행해보면 이상합니다. revalidate를 3으로 해두었기 때문에 3초에 한번씩 api를 호출할 것이라 생각했지만 그렇지않습니다. 왜 안되는지 이유를 잘 모르겠습니다. 의도된 현산이라는 말도 있고 어차피 사용하지않을 기능이라는 말도 있네요. 이번에는 revalidate를 fetch의 속성으로 주도록 하겠습니다. fetch의 속성으로 주어도 똑같이 작동되야합니다… 이번에는 revalidate를 0으로 바꿔보겠습니다. 그러면 이제 페이지를 새로고침할 때마다 테스트가 바뀝니다. SSR로 바뀌어 페이지를 요청할 때마다 revalidate합니다(HTML을 새로만듭니다) revalidate를 0으로 해도 SSR이 되고 no-store로 해도 SSR이 됩니다.

CSR

CSR로 만들기위해서는 클라이언트 컴포넌트에서 API를 호출하면 됩니다. 그러면 페이지를 새로고침할때마다 api를 호출하는 것을 확인할 수 있습니다. 또한 서버로 부터 받은 정적 HTML에도 초기 설정한 text인 ‘데이터 준비중…‘을 확인할 수 없습니다. 이렇듯 Next는 모든 파일들을 돌아다니면서 정적 HTML로 만들 수 있는 것은 미리 다 만들어놓습니다. 이후에 만약 어떤 소스가 클라이언트 컴포넌트라면 이 부분만 클라이언트에게 보내주고 클라이언트에서 hydration이 일어나면 이벤트가 실행되고 업데이트되는 원리입니다.