Swr

SWR는 Data Fetching을 위한 React Hook으로 네트워크 상태 라이브러리입니다.
리액트 쿼리가 아닌 SWR을 사용하는 이유가 뭘까요. SWR을 만든 회사가 Next.js를 만든 vercel입니다.
nextjs프레임워크에서 swr를 네트워크 관리 툴, 네트워크 데이터 패칭으로 사용해 볼겁니다.
nextjs 프레임워크 자체에서도 따라가고 있는 swr패턴이 있습니다.
HTTP cache 전략 중에 하나에요. 사용자가 요청을 하면 기존에 cache에도 있던 데이터를 먼저 보내주고 나서 그동안 revalidate를 합니다.
그 약자를 따서 만든것이 swr(stale-while-revalidate)패턴입니다.

SWR is a strategy to first return the data from cache (stale), then send thd fetch request (revalidate), and finally come with the up-to-date data. SWR은 전략중에 하나인데, 우선 빠르게 cache되어있는 데이터를 보내주고나서 revalidate를 하기위해서 데이터를 신선하게 만들기 위해서 다시 fetching요청을 한다음에 그 요청에 대해서 신선한 데이터가 오면 다시 최신으로 업데이트 시켜줍니다.

import useSWR from 'swr'

function Profile() {
  // 첫번째 인자: 어떤 경로에서 데이터를 받을 건지 API경로를 명시
  // 두번째 인자: 어떤 fetcher를 이용할 것인지 명시
  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>
}