SWR(Stale-while-revalidate)

SWR은 먼저 캐시(스태일)로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략이다.

# 설치
npm i swr

useSWR

api로부터 데이터를 fetch하기 위해 url과 fetcher 함수가 필요하다.

import useSWR from "swr";

const fetcher = (url: string) => fetch(url).then((res) => res.json());
export default fetchSWR){
  const { data, error } = useSWR("/api/user", fetcher);
  
  return data
}

url은 주소와 동시에 useSWR 내의 key역할을 한다. 즉, "/api/user": { ...data }와 같은 형식으로 저장된다. 이후 다른 컴포넌트에서 호출할 시에도 key를 활용해 새로 검증하지 않으면서 최신 데이터를 불러온다.

또한, 다른 페이지탭을 이용하다 현재 페이지로 돌아올 시 자동으로 api를 호출해 실시간인 듯한 효과도 겸한다.

SWRconfig

여러 api를 호출할 때마다 일일이 fetcher를 작성하는 일은 번거롭고 비효율적이다. 이러한 불편함을 대비해 SWR은 전역 설정 기능을 제공한다.

// _app.tsx
import { SWRConfig } from "swr";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <SWRConfig
      value={{ fetcher: (url: string) => fetch(url).then((res) => res.json()) }}
    >
        <Component />
    </SWRConfig>
  );
}

export default MyApp;

위와 같이 전역으로 설정해두면 useSWR에서 fetcher를 적지 않아도 된다..

const { data, error } = useSWR("/api/user");

노마드 코더 - 캐럿마켓 클론코딩
SWR