次のjsでswrを使用する

参照ドキュメント:https://swr.vercel.app/ko/docs/with-nextjs
react-query vs swr : https://fe-developers.kakaoent.com/2022/220224-data-fetching-libs/

SWR優勢

データキャッシュ

SWR自動再検証

ページに頻繁に更新されるデータが含まれており、事前にレンダリングする必要がない場合は、SWR方式を使用します.

さぎょうモード

まず、データがない場合はすぐにページを表示します.失われたデータのロード状態を表示できます

その後、クライアントからデータを取得し、準備ができたら表示

=>この方法は、ユーザーダッシュボードページなどに適しています.ダッシュボードは非公開なので、SEOも必要ありませんし、ページをレンダリングする必要もありません.
データの更新が頻繁で、リクエスト時にデータをインポートする必要があります.

既定ではレンダリング

Next.jsは2つの形式のレンダリングをサポートします.
1. SSG
2. SSR
SWRとともにSEOプリレンダリングページを作成し、キャッシュ、再検証、フォーカストラッキング、クライアント間隔で再インポートなどの機能を備えます.SWRConfigのfallbackオプションを使用して、プリパッケージされたデータをすべてのSWR hooksに初期値として渡すことができます.

 export async function getStaticProps () {
  // `getStaticProps`는 서버 사이드에서 실행됩니다.
  const article = await getArticleFromAPI()
  return {
    props: {
      fallback: {
        '/api/article': article
      }
    }
  }
}

function Article() {
  // `data`는 `fallback`에 있기 때문에 항상 사용할 수 있습니다.
  const { data } = useSWR('/api/article', fetcher)
  return <h1>{data.title}</h1>
}

export default function Page({ fallback }) {
  // `SWRConfig` 경계 내부에 있는 SWR hooks는 해당 값들을 사용합니다.
  return (
    <SWRConfig value={{ fallback }}>
      <Article />
    </SWRConfig>
  )
}

上のコードのページはまだプリレンダリングされています.SEOをサポートし、応答速度は速いが、クライアントのSWRによって完全に駆動される.データはダイナミックで、時間が経つにつれて自己更新できます.