React를 위해 구축된 현대적인 데이터 페칭

SWR은 내장 캐싱, 재검증 및 요청 중복 제거를 갖춘 최소한의 API입니다. 단일 React 훅으로 UI를 빠르고 일관되며 항상 최신 상태로 유지합니다.

하나의 훅으로 데이터 가져오기

키와 fetcher를 useSWR에 전달하세요. 훅은 요청을 관리하고, 응답을 캐시하며, 데이터를 최신 상태로 유지합니다. UI를 구동하기 위해 data, error, isLoading을 얻을 수 있습니다.

import useSWR from 'swr'
 
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>
}

가져오기, 요청 및 재검증

SWR은 속도, 정확성 및 안정성의 모든 측면을 다루어 더 나은 경험을 구축하는 데 도움이 됩니다.

빠른 페이지 탐색간격별 폴링데이터 종속성포커스 시 재검증네트워크 복구 시 재검증로컬 뮤테이션(낙관적 UI)스마트 오류 재시도페이지네이션 및 스크롤 위치 복구React Suspense

가볍고 독립적

모든 데이터 소스(REST, GraphQL 또는 사용자 정의 fetcher)를 지원하는 작은 API 표면.

실시간 및 복원력

자동 백그라운드 재검증, 포커스/재연결 업데이트, 페이지네이션 및 스트리밍 유틸리티.

네이티브 React 인체공학

Suspense를 위해 구축되었으며, SSR 및 SSG와 호환되며 처음부터 완전히 타입이 지정되어 있습니다.

SWR로 구축 시작하기

시작하기