useSWR

SWR은 먼저 캐시(스태일)로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략, 즉 캐싱 전략이라고 할 수 있다.

캐싱 후 데이터를 저장해놓고 저장된 메모리를 활용하기 때문에 다른 페이지에 갔다가 다시 해당 페이지로 돌아와도 로딩을 볼 필요가 없다.

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

useSWR hook은 2개의 인자를 받는다. 첫번째 인자인 API URL은 api를 요청할 url이자 고유한 식별자 자체로 캐시를 저장할 때 쓰이는 key가 된다. 두번째 인자인 fetcher는 데이터를 불러오고 그 데이터를 리턴한다.

hook은 요청의 상태에 기반한 data와 error를 반환한다.

swr은 먼저 캐시의 데이터를 보여주고 아무도 모르게 api 데이터 내용이 바뀌었는지 체크하면서 새로운 내용을 자동으로 업데이트 한다.

캐시에서 키를 확인해서 데이터를 가지고 오기 때문에 모든 페이지에서 캐싱된 데이터를 사용하는 것이 가능하다. 때문에 전역설정이 매우 쉽게 이뤄진다😍

또 mutate사용하여 저장된 캐시 데이터를 쉽게 변경할 수 있고 사용자에게 즉각적으로 최적화된 UI를 보여줄 수 있다.

• SWR

next.js 를 만든 vercel이란 회사의 행보가 너무 멋지다.
팀에서 만든 라이브러리들도 하나같이 보기 쉽게 되어있고 일관성있고 👀