#next-js #swr

SWR이란?

Nov 1, 2022


SWR (Stale-while-revalidate) 란?

데이터를 가져오기 위한 React Hook 라이브러리이다.
SWR은 원격 데이터를 가져올 때 캐싱된 데이터가 있으면 그 데이터를 먼저 반환(stale)한 다음 가져오기 요청(revalidate)을 보내고,
마지막으로 최신 데이터와 함께 제공하는 라이브러리입니다. **캐시 데이터를 제공함으로써 사용자에게 응답속도가 빠르다 **

SWR 사용법

res = useSWR() 형태로 사용하며 React Hook으로, 주 인자로 key와 fetcher가 있다.
첫 번째 인자는 API URL이면서 캐싱할 때 사용되는 key가 된다.
이는 useSWR(‘/api/user/123’, fetcher)를 여러 컴포넌트에서 사용하여도 같은 key의 데이터가 있다면 캐싱된 것을 가져오는 것입니다.

두 번째 인자는 fetcher이다. Fetch API를 기본으로 하며, 제일 많이 사용되는 Axios나 GraphQL을 사용할 수 있습니다.

SWR의 특징 및 장점



*****

© 2021, Ritij Jain | Pudhina Fresh theme for Jekyll.