API
๋ฐ๋ณต๋๋ API Call
์์ฃผ ๋ณ๊ฒฝ๋์ง ์๋ API๋ ์บ์ฑํด์ ์ฌ์ฉํ๋ฉด API ํธ์ถ ๋น์ฉ๊ณผ ์๋ต์๊ฐ์ ์ต์ ํํ ์ ์๋ค.
์์ฃผ ๋ณ๊ฒฝ๋๋ API๋ ์บ์ฑ์ ์ฌ์ฉํ๋ค๋ฉด ํธ์ถ ๋น์ฉ์ ๋ฐ์ํ์ง๋ง ์บ์ฑ๋ ๋ฐ์ดํฐ๋ฅผ ๋จผ์ ๋ณด์ฌ์ฃผ๊ณ ๋ฐฑ๊ทธ๋ผ์ด๋์์ API๋ฅผ ํธ์ถํ์ฌ ๊ฐฑ์ ํด์ค๋ค๋ฉด ์๋ต์๊ฐ ์ธก๋ฉด์ ์ด๋์ผ๋ก ์ธํด ์ ๋ คํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํด์ค ์ ์๋ค.
Prefetching
pre-fetch, ๋ ๋๋ง ์ด์ ์ ๋ฐ์ดํฐ๋ฅผ ๋ฏธ๋ฆฌ ๋ฐ์๋๊ธฐ
Client Side Prefetching
router-prefetch
โ ์ด๋ํ ๋ผ์ฐํฐ์ ํ์ด์ง ๋ฐ์ดํฐ๋ฅผ ๋ฏธ๋ฆฌ fetchingclient side์ transition์ ๋น ๋ฅด๊ฒ ํ๊ธฐ ์ํจ
next/link
๋ ์๋์ผ๋ก prefetchingnext/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>
)
Last updated