Next.js 기본 사용법(7) - Data Fetching | getServerSideProps

이번 포스트에서는 서버 사이드 렌더링을 통해 데이터를 가져오는 getServerSideProps에 대해 알아본다.

 

1. 개념

getServerSideProps는 사전 렌더링되는 페이지의 필요 데이터가 요청 시에 가져와야하는 경우에만 사용한다.

서버가 매 요청의 결과를 계산해야 하고, 결과가 추가 설정 없이는 CDN에 의해 캐시될 수 없기 때문에, getStaticProps보다 느리다.

getServerSideProps를 페이지에서 export할 경우, Next.js는 이 페이지를 매 요청마다 getServerSideProps로부터 리턴 받은 데이터를 사용하여 사전 렌더링한다.

마찬가지로, getServerSideProps는 페이지에서만 export 가능하다.

function Page({ data }) {
  // Render data...
}

// This gets called on every request
export async function getServerSideProps(context) {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

export default Page

context 파라미터는 이전 getStaticProps를 다룰 때 언급했듯이 다양한 키들을 포함하고 있는 객체다.

• params: 해당 페이지가 동적 경로를 사용한다면 params는 경로 파라미터를 포함(ex. [id].js -> {id: ...})
• req: HTTP IncommingMessage 객체
• res: HTTP Response 객체
• query: 쿼리 스트링 객체
• preview: preview가 true일 경우, 해당 페이지는 프리뷰 모드
• previewData: setPreviewData에 의해 설정된 데이터
• resolvedUrl: 클라이언트 전환을 위해 _next / data 접두사를 제거하고 정규화된 요청 URL 버전
• locale: 활성화된 장소 포함(가능한 경우)
• locales: 지원 가능한 모든 장소를 포함(가능한 경우)
• defaultLocale: 설정된 기본 장소를 포함(가능한 경우)

 

2. 반환 객체

props

페이지 컴포넌트에 의해 리턴되는 필수객체다.

 

notFound

페이지가 404 상태와 페이지를 반환하는 것을 허용할 것인지에 대한 boolean 값으로 선택 값이다.

export async function getServerSideProps(context) {
  const res = await fetch(`https://...`)
  const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: {}, // will be passed to the page component as props
  }
}

 

redirect

내부나 외부의 자원으로 redirect 할 것인지 허용하는 선택 값이다.

반드시, { destination: string, permanent: boolean } 형태이어야만 한다.

export async function getServerSideProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  if (!data) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    }
  }

  return {
    props: {}, // will be passed to the page component as props
  }
}

 

3. SWR

만약, 페이지에 자주 업데이트되는 데이터를 포함하고 있고, 데이터를 사전 렌더링할 필요가 없다면, 데이터를 클라이언트 측에서 가져올 수 있다.

• 먼저 페이지가 데이터 없이 보이고, 정적 생성을 통해 사전 렌더링된다.
• 채워지지 않은 데이터들은 로딩 상태로 보여진다.
• 클라이언트 측에서 데이터를 가져온 후에 데이터가 표시된다.

Next.js에서 클라이언트 측에서 데이터를 가져올 경우를 위해 SWR이라는 것을 만들었다.

이것은 React hook과 같은 것으로, 아래와 같이 사용할 수 있다.

import useSWR from 'swr'

const fetcher = (url) => fetch(url).then((res) => res.json())

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

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

 

---

 

이상으로, Data Fetching에 사용되는 함수들을 알아보았다.

다음 포스트에서는 Next.js에서 css를 간단히 사용하는 방법에 대해 알아본다.