[컴][웹] reactjs 의 swr package

cache / react next / nextjs / reactjs

reactjs 의 swr package

swr package 라는 vercel 에서 만든 package 를 사용한다. 이 녀석은 stale-while-revalidate 이라는 전략을 쉽게 구현할 수 있도록 해준다. 즉 일단 cache 된 값을 가져오고 보여주고(stale), 그러는 동안에 정보를 요청해서 최신 data 를 받은 후에 뿌려준다.

좀 더 쉽게 설명한다면, data 를 가져오는 동안에 cache 된 정보를 그냥 보여주면서, 시간을 버는 것이라 보면 된다.

• React Hooks for Data Fetching – SWR

사용도 어렵지 않다. 다음은 예제이다.

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>
}

코드도 간단한다. fetcher 만 구현해서 넣으면 된다. 그러면, 값을 가져오는 동안 이전에 cache 했던 값을 보여주는 것은 알아서 해주는 것이다.