라이브러리 - SWR

SWR

 

✅ SWR이란?

---

Stale-While-Revalidate

Stale: 오래된, 낡은

While: ~하는 동안에

Revalidate: 다시 유효성을 검사하다, 다시 확인하다.

 

"오래된 데이터를 보여주는 동안에 새 데이터를 가져와서 갱신한다."

 

SWR은 데이터 불러오는 작업을 위한 여러가지 훅을 가지고 있다.

(SWR은 NextJS를 만든 사람들이 만들었다. 그래서 NextJS와 아주 잘 맞는다.)

 

API 요청을 다시 하지 않고, 전에 받은 캐시에 있는 데이터를 가져온다.

그런데 SWR은 정말 똑똑하기 때문에 아무도 모르게 API 요청을 보내 데이터 내용이 바뀌었는지 체크한다.

(만약 데이터가 바뀌었다면 데이터를 업데이트 해준다.)

 

✅ 사용법

---

설치

npm i swr

 

(React를 rc 버전으로 사용하고 있으면 뒤에 --legacy-peer-deps를 추가해 설치한다.)

 

useSWR()을 사용할 때는 2개의 인자가 필요하다.

1. 요청을 보낼 URL

2. fetcher fn

 

예시

import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import useSWR from "swr";

const fetcher = (url: string) => fetch(url).then((response) => response.json());

export default function useUser() {
  const { data, error, mutate } = useSWR("/api/users/me", fetcher);
  const router = useRouter();

  // return router.replace("/enter");

  return data;
}

 

mutate: 캐시 안에 저장된 data를 수정하는 함수

 

useSWR()은 유저가 다른 탭으로 갔다가 다시 돌아왔을 때 데이터를 새로고침 하는 것도 해준다.

 

✅ bound mutate, unbound mutate

---

bound mutate: 해당 페이지에서 얻은 데이터만 변경하고 싶을 때

unbound mutate: 다른 페이지의 데이터를 변경하고 싶을 때

 

✅ SWRConfig

---

모든 페이지에 적용되어 fetcher 같은 것의 기본값을 지정할 수 있는 provider

(SWR에 있는 모든 쿼리에 적용된다.)

 

예시(_app.tsx)

import "../styles/globals.css";
import type { AppProps } from "next/app";
import { SWRConfig } from "swr";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <SWRConfig
      value={{
        fetcher: (url: string) =>
          fetch(url).then((response) => response.json()),
      }}
    >
      <div className="mx-auto w-full max-w-xl">
        <Component {...pageProps} />
      </div>
    </SWRConfig>
  );
}

export default MyApp;

 

이런 식으로 fetcher의 기본값을 지정할 수 있고, 다른 글로벌 옵션도 지정할 수 있다.

ex) refreshInterval: 2000 -> 2초마다 새로고침