처음 만난 Next.js 문서
8.3
Mutation & Revalidation
SWR에 캐싱된 데이터는 원격에 있는 데이터가 변경될 경우 최신 데이터가 아니게 됩니다. 그래서 주기적으로 또는 수동으로 캐싱된 데이터를 검증하고 갱신할 필요가 있습니다. 앞 장에서 Next.js의 캐시에 대해 설명할 때 이미 나왔던 것처럼, 이러한 재검증 및 갱신 과정을 Revalidation이라고 부릅니다.
그렇다면 SWR에 캐싱된 데이터를 직접 갱신하려면 어떻게 해야할까요? SWR에서는 데이터를 갱신 하는 것을 mutate라고 부르며, 관련된 다양한 기능들을 제공합니다.
8.3.1 Global Mutate
Global Mutate는 이름 그대로 전역 mutator를 사용해서 캐싱된 데이터를 갱신하는 방법을 의미합니다. Global Mutate를 사용하기 위해서는 아래와 같이 useSWRConfig() 훅 또는 swr 패키지로부터 전역 mutator를 가져오고, 가져온 전역 mutator 사용해서 특정 key에 대한 데이터를 갱신하면 됩니다.
import { useSWRConfig } from "swr";
function App() {
const { mutate } = useSWRConfig();
mutate(key, data, options);
}
import { mutate } from "swr";
function App() {
mutate(key, data, options);
}
8.3.2 Bound Mutate
Bound Mutate는 특정 API 호출에 대해서만 캐싱된 데이터를 갱신하는 방법입니다. Bound Mutate를 사용하기 위해서는 useSWR() 훅의 호출 결과로 반환되는 mutate() 함수를 호출하면 됩니다. 이 경우에는 이미 키 값이 매핑되어 있기 때문에 그냥 호출하기만 하면 해당 API에 대해 갱신이 이뤄집니다.
아래 코드는 useSWR() 훅을 사용하여 '/api/user'라는 경로로 API를 호출하는 코드를 useUser()라는 별도의 커스텀 훅으로 분리한 예시 코드입니다. 이렇게 하게 되면 실제 API를 호출하려는 컴포넌트에서는 useUser() 훅만 호출하면 되고, 데이터를 갱신하고 싶을 때는 해당 훅에서 반환하는 mutate() 함수를 호출하면 됩니다.
import useSWR from 'swr';
import fetcher from '@/lib/fetcher';
function useUser() {
const { isLoading, data, error, mutate } = useSWR('/api/user', fetcher);
return {
isLoading,
user: data,
isError: error,
mutate,
};
}
export default userUser;
import useUser from '@/hooks/api/useUser';
function Content() {
const { isLoading, user, error, mutate } = useUser();
if (!isLoading) {
return <div>로딩 중...</div>;
}
if (error) {
return <div>에러 발생!</div>;
}
return (
<div>
<h1>안녕하세요, {user.name}</h1>
{/* 버튼을 누르면 갱신 됨 */}
<button onClick={mutate}>갱신하기</button>
</div>
);
}
export default Content;
SWR에서는 이러한 다양한 방법으로 캐싱된 데이터를 갱신할 수 있다고 이해하면 됩니다.
마지막 업데이트: 2025년 10월 24일 02시 29분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.