[Next.js] Next.js의 Data Fetching

Next.js에서는 웹페이지의 사용 방식에 따라서 다양한 방식으로 데이터를 가져올 수 있다.

아래에서 설명하는 방법으로 적절한 방법으로 사용하면 될 것 같다.

 

• SSR (Server-side rendering)
• SSG (Static-site generation)
• CSR (Client-side rendering)
• ISR (Incremental Static Regeneration)

 

 

SSR

export async function getServerSideProps(context) {
  return {
    props: {}
  }
}

해당 함수를 사용하면 서버에서만 실행되고 브라우저에서는 실행되지 않는다.

 

페이지에서만 사용할 수 있다.

 

언제 getServerSideProps를 사용해야 되나?

데이터를 가져와야 하는 페이지를 렌더링해야 할 때에만 사용해야 한다.

 

 

SSG

export async function getStaticProps(context) {
  return {
    props: {}
  }
}

빌드 시에 반환된 props를 사용해서 이 페이지를 미리 렌더링 한다.

 

언제 getStaticProps를 사용해야 되나?

빌드할 때 한번 실행되는 것이라 변하지 않는 페이지를 제작할 때 사용한다.

 

SSR, SSG는 서버에서 페이지를 만드는 것은 동일하나

SSR은 접근할 때마다, SSG는 한 번만 만든다.

정적인 페이지를 제작 할 땐 SSG를 사용하면 좋다.

 

 

CSR

csr은 기존에 React에서 사용하던 것과 같이 useEffect를 사용하여 데이터를 가져오면 된다.

 

 

ISR

export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    revalidate: 10
  }
}

일정 주기마다 데이터의 최신 여부를 검사하고 업데이트된 데이터로 페이지를 다시 생성한다.

getStaticProps와 revalidate(주기)를 함께 쓰면 된다.