API

반복되는 API Call

• 자주 변경되지 않는 API는 캐싱해서 사용하면 API 호출 비용과 응답시간을 최적화할 수 있다.

• 자주 변경되는 API도 캐싱을 사용한다면 호출 비용은 발생하지만 캐싱된 데이터를 먼저 보여주고 백그라운드에서 API를 호출하여 갱신해준다면 응답시간 측면의 이득으로 인해 유려한 사용자 경험을 제공해줄 수 있다.

Prefetching

pre-fetch, 렌더링 이전에 데이터를 미리 받아놓기

Client Side Prefetching

• router-prefetch → 이동할 라우터의 페이지 데이터를 미리 fetching

• client side의 transition을 빠르게 하기 위함

• next/link 는 자동으로 prefetching

• next/link 의 <Link/> 를 사용하지 않는 경우에 유의미하다.

const router = useRouter(); 

useEffect(() => {
  router.prefetch('/dashboard')
}, [router])

Server Side Prefetching

• 렌더링에 필요한 데이터를 미리 서버에서 fetch 하여 렌더링 시 바로 보여줄 수 있도록 제공

• initialData prop → getServerSideProps, getStaticProps 등을 이용하여 서버 data를 미리 fetching하고 props로 넘겨 useQuery의 initialData로 넘겨주는 방식

  • 단점 → useQuery를 사용하는 컴포넌트까지 props로 넘겨주어야 하므로 props driling이 심해지고 refetching 시점을 따로 작성해주어야 한다.

export const getStaticProps = async() => {
  const posts = await getPosts();
  return {props: { posts }}
}

const Posts = ({ posts  }) => {
  const { data } = useQuery({
    queryKey: ['posts'],
    queryFn: getPosts,
    initialData: posts
   })
}

• hydration prefetching → 마찬가지로 getServerSideProps, getStaticProps 을 이용하여 서버에서 fetching한 데이터를 queryClient에 담아 dehydrateState로 넘겨주고 <Hydrate /> HOC로 전달한다.

  • Hydrate HOC는 받은 state를 client의 queryClient로 셋업을 진행한다.

  • 해당 데이터는 useQuery에서 stale data로 취급되어 렌더링이 우선 진행되고 백그라운드에서 최신데이터를 refetch 받아 교체해준다.

Caching

• Stale → 이전에 fetch된 신선하지 않은 데이터

  • 신선하지 않은 데이터를 우선 보여주고 백그라운드에서 최신 데이터를 리패칭하는 과정이 진행된다.

  • stale time(default 0s) 만큼 fresh 상태로 존재하다가 stale 상태로 변경됨

  • stale 상태에선 특정 Refetching 조건 충족시 백그라운드에서 refetching 과정이 일어남

    • 새 QueryInstance가 마운트 될 때 (페이지 이동)

    • 브라우저 탭 focus out/in 전환 시

    • 네트워크가 재연결 될 때

    • refetchInterval 설정 시

• Cache → fetch 되어 재사용되는 데이터

  • cache time(default 5m)동안 저장된다.

  • QueryCache 내부 queries에 데이터가 존재하는 상태

Persist Caching

• 메모리 상태가 아닌 브라우저 내 스토리지에 캐싱된 데이터를 저장하여 페이지를 새로고침해도 refetching 하지 않고 이전에 저장된 데이터를 사용할 수 있도록 만들 수 있다.

if (typeof window === 'undefined') {
  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
    </QueryClientProvider>
  )
}

return (
  <PersistQueryClientProvider 
    client={queryClient}
    persistOptions={{
      persister: createSyncStoragePersister({
        storage: window.localStorage // or window.sessionStorage
      })
    }}
  >
    <Hydrate state={state}>
      <Component {...pageProps} />
    </Hydrate>
  </QueryClientProvider>
)