vercel/swr

React Hook 기반 데이터 fetching 라이브러리로 stale-while-revalidate 캐싱 전략을 제공합니다.

개발 재료맘대로 써도 됨 · MIT웹·Next.js·풀스택난이도

32,401+0이번 주1,349146TypeScript

중간맛 분석

TypeScript 기반의 가벼운 React Hook 라이브러리입니다. 번들 크기가 작으면서도 캐싱, 요청 중복 제거, 포커스 시 재검증, 네트워크 복구 감지, 폴링, 낙관적 UI 업데이트 등을 지원합니다. npm에 설치 후 useSWR Hook을 import하여 바로 사용 가능하며, Next.js SSR/SSG와 React Native도 지원합니다. 기본 fetcher 함수만 정의하면 data, isLoading, error 상태를 자동으로 관리합니다.

이런 레포예요

이럴 때 쓰면 좋아요

API 응답을 캐싱하면서 백그라운드에서 자동으로 최신 데이터를 갱신하는 대시보드
사용자 포커스 복귀 시 자동으로 데이터를 다시 로드하는 실시간 협업 도구
네트워크 복구 후 자동으로 데이터를 재검증하는 모바일 앱

핵심 기능

Stale-while-revalidate 캐싱 전략으로 즉각적인 UI 렌더링과 백그라운드 데이터 갱신내장 요청 중복 제거 및 캐시 관리포커스, 네트워크 복구, 폴링 기반 자동 재검증

대안 대비 차별점

Vercel 팀에서 만들어 Next.js와 완벽 통합되며, 단순한 Hook 인터페이스로 가볍고 빠르면서도 성능에 최적화된 데이터 fetching 경험을 제공합니다.

준비물

React 16.8.0 이상 (Hooks 지원)

바로 시작하기

SWR 패키지 설치

npm install swr

React 컴포넌트에서 useSWR 훅 임포트 및 fetcher 함수 정의

import useSWR from 'swr'

const fetcher = (url) => fetch(url).then(r => r.json())

컴포넌트에서 데이터 페칭

function Profile() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (isLoading) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

별 추이 · 7일

32,401+0 / 7일

활용성 · 따라 만들기 좋은가

따라 하기 좋음샘플 점수 50/100

관대한 라이선스
테스트 있음
예제 디렉토리
최근 활동
AGENTS.md
llms.txt
템플릿

🟢 최근 활동 있음 · 2019년 생성

AI가 README 기반으로 요약했습니다 · 원문 보기