[NextJS] SWR & React Suspense

본 게시물은 SWR Suspense 설정에 관한 것을 담고 있습니다.

ex)

import useSWR from "swr";

const PostTitle = () => {
    const { data } = useSWR(`/api/post/${id}`);
	return {data ? data?.post?.title ? : "Loading..."}
}

const Page = () => {
 return <div><PostTitle /></div>
}

보통 Loading 매개변수나 삼항 연산자를 통해서 로딩과정을 처리합니다.

Suspense를 활용하면 삼항 연산자 없이 위와같은 효과를 나타낼 수 있습니다.

import useSWR, { SWRConfig } from "swr";

const Page = () => {
 return <SWRConfig value={{ suspense: true }} ><PostTitle /></SWRConfig>
}

SWRConfig 에서 suspense:true 설정만 해주면 끝입니다.
그후 Suspense를 사용하는 컴포넌트를 감싸주기만 하면 됩니다.
그 다음 Suspense 컴포넌트의 fallback prop로 컴포넌트가 로딩중일때 보여줄 요소를 입력해주면 됩니다.

import useSWR, { SWRConfig } from "swr";
import { Suspense } from "react";

const PostTitle = () => {
    const { data } = useSWR(`/api/post/${id}`);
	return data?.post?.title
}

const Page = () => {
 return <SWRConfig value={{ suspense: true }} >
   <Suspense fallback="Loading...">
   	<PostTitle />
   </Suspense>
</SWRConfig>
}

위는 SWR 예제이고 React-query 또한 로직은 동일합니다.