SWR이란?

SWR은 "Stale-While-Revalidate"의 약자로, Vercel 팀이 개발한 React Hooks 라이브러리입니다. 이름은 HTTP RFC 5861에 의해 알려진 HTTP 캐시 무효화 전략에서 유래한 이름으로, "오래된 데이터를 보여주면서 새로운 데이터를 가져오는" 전략을 의미합니다.

✅ SWR을 사용하면 컴포넌트는 지속적이며 자동으로 데이터 업데이트 스트림을 받게 됩니다.
✅ UI는 항상 빠르고 반응적입니다.

SWR의 핵심 기능

1. 기본적인 데이터 페칭

2. 자동 재검증

SWR은 다음과 같은 상황에서 자동으로 데이터를 재검증합니다:

● 페이지 포커스 시
● 네트워크 재연결 시
● 일정 간격으로 폴링

3. 캐시 및 중복 요청 방지

첨부1.

첨부2.

요청은 같게 보내고, 데이터는 다르게 저장할 수 있습니다.
이름이 다르기 때문입니다.(서버는 #뒤를 무시합니다.)

SWR의 장점

1. 간단한 사용법
   : Hook 기반의 직관적인 API
   : 최소한의 설정으로 시작 가능

2. 실시간성
   : 자동 데이터 갱신으로 항상 최신 데이터 유지
   : 오프라인 상황 대응

3. 성능 최적화
   : 캐시 활용으로 빠른 응답
   : 중복 요청 방지

추가)Toolkit을 사용하면 SWR을 쓸 필요가 없고, 이는 반대로도 마찬가지 입니다.

사용 예시1.조건부 페칭 : 이를 사용하여 비동기 처럼 사용할 수 있다.

function MyComponent() {
  const { data } = useSWR(shouldFetch ? '/api/data' : null, fetcher)
  // ...
}

정리

SWR은 React 애플리케이션에서 데이터 페칭을 훨씬 쉽고 효율적으로 만들어줍니다. 자동 캐싱, 재검증, 실시간 데이터 업데이트 등의 기능을 통해 개발자는 복잡한 데이터 관리 로직에서 벗어나 비즈니스 로직에 집중할 수 있습니다.
이 라이브러리는 특히 실시간 데이터가 중요한 대시보드, SNS, 실시간 채팅 등의 애플리케이션에서 효율적으로 사용할 수 있습니다.