[NEXT.JS] SWR

개요

SWR(Stale-While-Revalidate)은 React Hooks를 사용하여 데이터 가져오기와 캐싱을 간단하게 만들어주는 라이브러리입니다. Next.js와 함께 사용하면 매우 효율적인 데이터 페칭을 구현할 수 있습니다. SWR은 Vercel에서 개발한 라이브러리로, 최신 데이터 페칭 전략을 제공합니다.

 

 

특징

자동 캐싱 및 재검증 (Stale-While-Revalidate)

SWR의 이름에서 알 수 있듯이, 데이터가 오래되었는지 여부에 따라 자동으로 데이터를 캐싱하고, 백그라운드에서 재검증합니다.

이는 데이터의 신선도를 유지하면서 빠른 응답을 제공합니다.

import useSWR from 'swr';
import axios from 'axios';

const fetcher = url => axios.get(url).then(res => res.data);

const Component = () => {
  const { data, error } = useSWR('/api/data', fetcher);

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

  return <div>{data}</div>;
};

 

집계된 요청 및 중복 제거

동일한 키로 여러 컴포넌트에서 요청을 보낼 경우, SWR은 요청을 집계하고 하나의 요청만 서버에 보냅니다.

이를 통해 불필요한 네트워크 트래픽을 줄이고, 성능을 최적화할 수 있습니다.

const { data: user1 } = useSWR('/api/user/1', fetcher);
const { data: user2 } = useSWR('/api/user/2', fetcher);

 

중단 및 재시도

네트워크 오류가 발생할 경우, SWR은 자동으로 재시도를 수행합니다.

또한, 데이터 페칭을 중단할 수도 있어 유연한 네트워크 요청 처리가 가능합니다.

const { data, error, isValidating, mutate } = useSWR('/api/data', fetcher);

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

return (
  <div>
    {data}
    <button onClick={() => mutate()}>Refresh</button>
  </div>
);

 

동적 및 조건부 요청

SWR은 동적 또는 조건부로 데이터를 가져올 수 있습니다. 예를 들어, 사용자의 입력에 따라 데이터 요청을 보낼 수 있습니다.

const { data } = useSWR(userId ? `/api/user/${userId}` : null, fetcher);

 

로컬 및 전역 상태 관리

SWR은 로컬 컴포넌트 상태를 관리할 뿐만 아니라, 전역 상태 관리 도구와도 쉽게 통합할 수 있습니다.

이를 통해 애플리케이션 전반에 걸쳐 일관된 데이터 상태를 유지할 수 있습니다.

const { data, mutate } = useSWR('/api/user', fetcher);

const updateUser = async newUser => {
  mutate({ ...data, ...newUser }, false);
  await axios.put('/api/user', newUser);
  mutate();
};

 

 

사용법

설치

npm install swr

 

사용

import useSWR from 'swr';
import axios from 'axios';

const fetcher = url => axios.get(url).then(res => res.data);

const UserProfile = () => {
  const { data, error } = useSWR('/api/user', fetcher);

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

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.email}</p>
    </div>
  );
};

export default UserProfile;

 

 

문의사항이나 피드백은 댓글로 남겨주세요.