SWR에 대해

SWR이란

• Stale-While-Revalidate의 약자로, HTTP 캐시 무효 전략뜻합니다.

• 쉽게 말하자면, 캐시 데이터(원래 있던 데이터)를 가져와 보여주고 캐시 데이터를 업데이트 해야할 경우 캐시 데이터를 백그라운드에서 업데이트 할 수 있다. 자동으로 업데이트 되기 때문에 항상 최신의 데이터를 유지한다.

• 빠르게 사용자에게 화면을 보여줄 수 있는 장점을 가지고 있습니다.

import useSWR from 'swr';

// 데이터 가져오는 fetcher 함수
const fetcher = (url) => fetch(url).then((res) => res.json());

function Profile() {
  // useSWR 훅을 사용하여 데이터 페칭
  const { data, error, isLoading } = useSWR('/api/user', fetcher);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Failed to load</div>;

  // 데이터가 성공적으로 로드된 경우 렌더링
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.email}</p>
    </div>
  );
}

사용자가 페이지를 방문할 때 캐시된 데이터가 즉시 보여지며, 백그라운드에서 최신 데이터가 받아진다.
받아온 최신 데이터가 캐시에 반영되면 화면이 자동으로 갱신된다. 이 과정이 매우 빠르게 이루어지기 때문에 사용자는 오래된 데이터를 인식하기 어렵다.
따라서, SWR을 사용하면 일반적으로 사용자에게 보여지는 데이터는 최신 상태로 유지되며, 자동 업데이트 덕분에 수동으로 데이터를 새로고침할 필요도 거의 없다.

서버에 데이터를 전달하고, 사용자에게 바로 보여지는 화면은 캐시 데이터이다. 서버에 데이터를 전달하기 때문에 UI에 보여지는 데이터와 서버 데이터는 동기화가 된 상태를 유지한다.

mutate

Mutate는 캐시 데이터를 수동으로 변경하거나, 데이터 재검증을 할 때 사용된다.

mutate(key)를 사용하면
해당 키에 연결된 데이터를 다시 가져와 캐시 데이터를 업데이트 하는 재검증 역할을 한다.

import useSWR, { mutate } 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>;

  const updateUserName = () => {
    // 캐시를 수동으로 업데이트하여 즉각적인 변경 반영
    mutate('/api/user', { ...data, name: 'New Name' }, false);
  };

  return (
    <div>
      <h1>{data.name}</h1>
      <button onClick={updateUserName}>Update Name</button>
    </div>
  );
}

위의 코드를 보면 수동으로 데이터를 업데이트한다.
mutate(key, data, shouldRevalidate):
key: 업데이트할 캐시 항목의 키.
data: 새로운 데이터(옵션). 이 데이터를 제공하면 캐시가 즉시 업데이트된다.
shouldRevalidate: true일 경우, 데이터를 백그라운드에서 다시 가져와 캐시를 최신 상태로 유지한다. false일 경우, 데이터 재검증을 생략한다.

SWR은 캐시 데이터를 보여준 후 백그라운드에서 최신 데이터를 받아와 변경된 부분을 다시 사용자에게 보여주는 역할을 한다.
Mutate를 사용하면 수동으로 업데이트하여 서버에서 데이터를 받아와 업데이트 하는 것이 아닌, 즉각적으로 변경된 ui를 제공할 수 있다. ui를 변경 후 서버에 데이터를 전달하고, mutate를 통해 재검증을 할 수 있는 시기를 지정할 수 있다.