[SWR] SWR 동작 시나리오

https://swr.vercel.app/ko/docs/advanced/understanding

Understanding SWR – SWR

최근에 swr 이해 문서가 업데이트 되었다. 일부 내용을 한번 살펴보자

---

useSWR 은 data,error,isLoading..및 stateful한 값을 반환합니다. 이러한 값들을 반환하는 시나리오를 설명합니다.

 

Fetch and Revalidate

• 1. data 는 undefined
• 2. 데이터를 fetch 해옵니다 (isLoading 과 isValidating 값은 true)
• 3. data 값을 가져옵니다.
• 4. 재검증이 일어납니다 (revalidate가 일어남 => isValidating 가 true) 
  • => 일어나는 도중엔 data는 3번때 가져온 값을 유지 (캐싱) 합니다.
• 5. 재검증 후 새로운 데이터를 셋팅합니다.

---

isLoading isValidating

isValidating: 데이터 로드 여부에 상관없이 진행중인 요청이 있을 때 true

isLoading: 진행중인 요청이 있고, 아직 데이터가 로드되지 않은 상태일 때 true

 

아래 예제를 봅시다.

isLoading 이 true 면 skeleton 을 보여주고,

isValidating 이 true 면 spinner 를 보여줍니다.

function Stock() {
  const { data, isLoading, isValidating } = useSWR(STOCK_API, fetcher, {
    refreshInterval: 3000
  });
 
  // If it's still loading the initial data, there is nothing to display.
  // We return a skeleton here.
  if (isLoading) return <div className="skeleton" />;
 
  // Otherwise, display the data and a spinner that indicates a background
  // revalidation.
  return (
    <>
      <div>${data}</div>
      {isValidating ? <div className="spinner" /> : null}
    </>
  );
}

즉 첫 진입시, 데이터가 없는 상태에서 api를 호출중이므로(isLoading true) 여서 skeleton 이 노출되지만,

data를 가져온 이후, api요청을 refresh하는 경우 isValidating 이 true이므로 spinner 가 노출됩니다.