【Next.js】「CSR(UseSWR)」について

useSWRとは？

「クライアントサイドレンダリング」の技術です。なので、もしブラウザでJavaScriptを無効化していたら動かなくなります。（なお、SSGやSSRやISRなどはサーバーサイドで動作するのでブラウザのJavaScriptが無効化されていても問題なく動作します）

「静的なページでSEO対策をしつつ、さらにリアルタイムにデータを取得する」と言うことを実現できます。

非同期なので少しラグがあった上で実行されます。公式ページではgetStaticPropsと組み合わせて使うことが推奨されています。

useSWR('クライアントサイドからフェッチしたいURL','読み込む値(jsonなど)',初期値(initialData))

1	useSWR('クライアントサイドからフェッチしたいURL','読み込む値(jsonなど)',初期値(initialData))

引数	内容	説明
第一引数	クライアントサイドからフェッチしたいURL
第二引数	読み込む値(jsonなど)	フェッチする値です。
第三引数	初期値(initialData)	ビルド時に生成した値(プリレンダーされた値)です。 getStaticPropsなどで生成します。

値	説明
data	フェッチしたいURLから受け取ったデータ
mutate	コンポーネント内の様々な箇所で使用することでキャッシュを更新してくれる関数

import useSWR from 'swr';

  const { data: 変数, mutate } = useSWR(url, json, {
    initialData: 初期値,
  });

useEffect(() => {
    mutate();
  }, []);

import useSWR from 'swr';

const { data: 変数, mutate } = useSWR(url, json, {

initialData: 初期値,

});

useEffect(() => {

mutate();

}, []);

基本的にはuseEffectなどでmutateを呼び出して最新データで更新されるようにします。ページをロードした際にまずは初期値で値が表示されて、その後非同期でラグがあった後にフェッチしたデータで値を更新します。

初期値(initialData)はアプリのビルド時に取得した値(プリレンダーされた値)が使われます。（getStaticPropsなどで生成します。）

初期表示したデータ（ビルド時のデータ）と、useSWRで読み込んだデータに解離が発生してきてしまいます。なので、それを防ぐためにISRを使って、ユーザーがサイトに訪れた際に再ビルドするようにします。

【Next.js】「ISR(Incremental Static Regeneration)」について