[Next.js] 요청 시 데이터 가져오기

요청 시 데이터 가져오기

빌드 시간이 아닌 요청 시간에 데이터를 가져와야 하는 경우 서버 측 렌더링(SSR)을 사용 할 수 있습니다.

서버 측 렌더링을 사용하려면 페이지에 getStaticProps 대신 getServerSideProps를 사용 해야 합니다.

---

getServerSideProps 사용하기

getServerSideProps는 아래와 같은 형태로 사용합니다.

export async function getServerSideProps(context) {
  return {
    props: {
      // props for your component
    }
  }
}

getServerSideProps는 요청 시 호출 되기 때문에 해당 매개변수(context)에는 요청별 매개변수가 포함됩니다.

 

getServerSideProps는 요청 시 데이터를 가져와야 하는 페이지를 미리 렌더링 해야 하는 경우에만 사용 해야 합니다.

첫번째 바이트까지의 시간은 서버가 모든 요청에 대해 결과를 계산 해야 하고

추가 구성 없이 CDN에서 결과를 캐시 할 수 없기 때문에 getStaticProps보다 느릴 수 있습니다.

---

클라이언트 측 렌더링(CSR)

데이터를 미리 렌더링 할 필요가 없는 경우 클라이언트 측 렌더링(CSR)을 사용 할 수 있습니다.

- 외부 데이터가 필요하지 않은 페이지 부분을 정적으로 생성(사전 렌더링)합니다.

- 페이지가 로드되면 JavaScript를 사용하여 클라이언트에서 외부 데이터를 가져오고 나머지 부분을 채웁니다.

이 접근 방식은 사용자 대시보드 페이지에 적합합니다.

대시보드는 사용자별 비공개 페이지이기 때문에 SEO와 관련이 없으며 페이지를 미리 렌더링 할 필요가 없습니다.

데이터는 자주 업데이트 되므로 요청 시 데이터를 가져와야 합니다.

---

SWR

Next.js에서는 데이터를 가져오기 위한 React Hook으로 SWR을 만들었습니다.

클라이언트 측에서 데이터를 가져오는 경우 적극 권장합니다.

 

캐싱, 재검증, 초점 추적, 간격에 따라 다시 가져오기를 처리합니다.

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetch)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

데이터 가져오기를 위한 React Hooks – SWR

---

Learn | Next.js