[Next.js] SWR 개념 알아보기

: SWR은 vercel에서 제작한, 데이터를 가져오기 위한 모듈이다.

Next.js에서 유독 많이 보이는 개념이라, 정리하고자 한다. 아마도 swr이 서버 사이드 랜더링도 되기 때문인 것 같다.

사용

import useSWR from 'swr'
 
function Profile() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher)
 
  if (error) return <div>failed to load</div>
  if (isLoading) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

• key : 일반적으로 API URL을 말한다.
• fetcher : key값을 이용해 데이터를 가져오는 함수이다. fetch 혹은 axios를 이용해 데이터를 가져온다.

활용

/api/shops라는 api에서 데이터를 가져오는 SWR hook을 사용해보자.

const fetcher = (url) => axios.get(url).then((res) => res.data);
const { data, error } = useSWR("/api/shops", fetcher);

fetcher 함수는 위에 언급한대로 axios를 이용해 url에 get 요청을 보내 데이터를 받아옵니다. fetcher 함수와 useSWR을 이용하면 위 코드와 같이 data를 받아온다.

Typescript

Typescript를 사용하고 있다면 다음과 같이 SWR에서 반환하는 데이터의 타입을 지정해 줄 수 있습니다.

interface ShopsReturn {
  ok: boolean;
  shops: string[];
}

export default function Test() {
  const fetcher = (url: string) => axios.get(url).then((res) => res.data);
  const { data, error } = useSWR<ShopsReturn>("/api/shops", fetcher);

  return <h1>{data.ok}</h1>

Next.js에서 swr사용하기

SWR과 함께 SEO를 위해 페이지를 미리 렌더링할 수 있으며 클라이언트 측에서 캐싱, 재검증, 초점 추적, 일정 간격으로 다시 가져올 수 있다.