SWR은 데이터 가져 오기를위한 React Hooks 라이브러리입니다.
" SWR "이라는 이름은 HTTP RFC 5861에 의해 대중화 된 캐시 무효화 전략 인 stale-while-revalidate 에서 파생됩니다. SWR은 먼저 Cache (Stale)에서 데이터를 반환 한 다음 요청을 보내고 마지막으로 최신 데이터와 함께 제공됩니다.
하나의 후크만으로 프로젝트의 데이터 페치 로직을 크게 단순화 할 수 있습니다. 또한 더 나은 경험을 구축하는 데 도움이되는 속도, 정확성 및 안정성의 모든 측면에서도 다루었습니다.
... 그리고 훨씬 더.
SWR을 사용하면 구성 요소가 데이터 업데이트 스트림을 지속적으로 자동으로 얻을 수 있습니다. 따라서 UI는 항상 빠르고 반응성이 높습니다.
swr.vercel.app에서 전체 설명서 및 예를보십시오.
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 >
} 이 예에서 React Hook useSWR key 와 fetcher 함수를 수락합니다. key 는 요청의 고유 식별자, 일반적으로 API의 URL입니다. 그리고 fetcher key 매개 변수로 받아들이고 데이터를 비동기 적으로 반환합니다.
useSWR 또한 data , isLoading 및 error 의 3 가지 값을 반환합니다. 요청 (Fetcher)이 아직 완료되지 않은 경우 data undefined isLoading 이 true 입니다. 응답을 받으면 fetcher 의 결과를 기반으로 data 와 error 설정하고 False에 isLoading 및 구성 요소를 다시 렌더링합니다.
fetcher 모든 비동기 기능이 될 수 있으므로 좋아하는 데이터 페치 라이브러리를 사용하여 해당 부분을 처리 할 수 있습니다.
swr.vercel.app에서 전체 설명서 및 예를보십시오.
이 라이브러리는 Community의 기여로 Next.js의 팀에 의해 만들어졌습니다.
기고자
멋진 swr NPM 패키지 이름을 제공해 주신 Ryan Chen에게 감사드립니다!
MIT 라이센스.