[React - Study]

SWR(stale-while-revalidate)란?

SWR ?

데이터를 가져오기 위한 React Hook 라이브러리이다. SWR은 원격 데이터를 가져올 때 싱된 데이터가 있으면 그 데이터를 먼저 반환(stale)한 다음 가져오기 요청(revalidate)을 보내고, 마지막으로 최신 데이터와 함께 제공하는 라이브러리이다.

SWR의 특징 및 장점

• Lightweight
• Realtime
• Suspense
• Pagination
• Backend Agnostic
• SSR / SSG Ready
• TypeScript Ready
• Remote + Local

사용법

import useSWR from "swr";

function Profile () {
	const { data, error } = useSWR('/api/user/123', fetcher)
    
    if(error) return <div>failed to load</div>
    if(!error) return <div>loading...</div>
    
    //render data
    return <div>hello {data.name}!</div>
}

useSWR로 React Hook으로, 주된 인자로 key와 fetcher가 있다.

첫 번째 인자는 API URL이면서 캐싱할 때 사용되는 key가 된다. 이는 useSWR('/api/user/123', fetcher)를 여러 컴포넌트에서 사용하여도 같은 key의 데이터가 있다면 캐싱된 것을 가져오는 것이다.

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