개요

넥스트에서 데이터 가져오기를 사용하면 앱의 사용 사례에 따라 다양한 방식으로 콘텐츠를 렌더링할 수 있습니다. 여기에는 SSR이나 정적 생성을 사용한 사전 렌더링, 증분형 정적 재생성으로 런타임에 콘텐츠를 갱신하거나 생성하기가 포함됩니다.

각 문서에 해당하는 데이터 가져오기는 다음과 같습니다.

• getServerSideProps - SSR (서버 측 렌더링)
• getStaticPaths - 동적 라우팅
• getStaticProps - SSG (정적 사이트 생성)
• 증분형 정적 재생성 - ISR
• 클라이언트 측 - CSR (클라이언트 측 렌더링)

📄️ getServerSideProps

페이지에서 getServerSideProps(SSR)이라는 함수를 내보내면, 넥스트는 getServerSideProps에서 반환된 데이터를 사용하여 각 요청에서 이 페이지를 미리 렌더링합니다.

📄️ getStaticPaths

페이지에 동적 경로가 있고 getStaticProps를 사용하는 경우 정적으로 생성할 경로 목록을 정의해야 합니다.

📄️ getStaticProps

페이지에서 getStaticProps(정적 사이트 생성)이라는 함수를 내보내면, 넥스트는 getStaticProps에서 반환된 props를 사용하여 빌드 타임에 이 페이지를 미리 렌더링합니다.

📄️ 증분형 정적 재생성

넥스트를 사용하면 사이트를 구축한 후 정적 페이지를 만들거나 갱신할 수 있습니다. ISR(Incremental Static Regeneration)을 사용하면 전체 사이트를 다시 빌드할 필요 없이 페이지별로 정적 생성을 사용할 수 있습니다. ISR을 사용하면 수많은 페이지로 확장하면서 정적 생성의 이점을 유지할 수 있습니다.

📄️ 클라이언트 측

클라이언트 측 데이터 가져오기는 페이지에 SEO 인덱싱이 필요하지 않거나, 데이터를 미리 렌더링할 필요가 없거나, 페이지 콘텐츠를 자주 갱신해야 할 때 유용합니다. 서버 측 렌더링 API와 달리 컴포넌트 수준에서 클라이언트 측 데이터 가져오기를 사용할 수 있습니다.