Data Fetching in Next.js - Client-side

Client-side Data Fetching

Client-side Data Fetching은 페이지에 SEO, 데이터의 사전 렌더링이 필요가 없거나 페이지의 콘텐츠들이 자주 업데이트될 경우 유용하다.

페이지 레벨에서 client-side data fetching이 이루어질 경우 데이터를 런타임에 가져오며 페이지 콘텐츠는 데이터가 바뀜에 따라 업데이트된다.

컴포넌트 레벨에서 사용할 때에는 컴포넌트가 마운트될 때 데이터를 가져오며 데이터가 변경되면 컴포넌트의 내용이 업데이트된다.

client-side data fetching을 사용하면 페이지 로드 속도와 어플리케이션의 성능에 영향을 미친다.
왜냐하면 data fetching이 컴포넌트나 페이지가 마운트될 때 이루어지며 가져온 데이터가 캐시되지 않기 때문이다.

Client-side data fetching with SWR

SWR은 data fetching을 위해 Next.js 팀에서 만든 리액트 훅 라이브러리이다.
client-side data fetching에 적극 권장되며 캐싱, 재검증, 추적, 일정한 간격으로 데이터 다시 가져오기 등의 기능을 제공한다.

import useSWR from 'swr'

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

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

  if (error) return <div>Failed to load</div>
  if (!data) return <div>Loading...</div>

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  )
}

SWR은 자동으로 데이터를 캐싱하며 데이터가 오래되었을 경우(stale하면) 데이터를 재검증한다.