Next.js - SWR - Yanonoblog!

背景
SWRとは
SWRを利用する
- 使用方法
useSWR とuseEffect の使い分け
- useEffect は、副作用を伴う一般的な処理
- useSWRはAPIを取得する関数の監視を行う
続く…
- コメント
- プログラミングスクールのご紹介 (卒業生より)
参考

背景

実務ではReactを使っているのですがNext.jsのキャッチアップしておきたいと思ったので、その内容を整理したいと思います。

本記事では、Next.jsに関する情報をまとめています。

内容は易しめです。

前回の続きになります！

▶ Next.js - API Routes

SWRとは

SWR（Stale-while-revalidate）は、Next.jsによって提供されるデータフェッチングライブラリで、APIからデータをフェッチしてキャッシュすることでページ間でデータを共有し、高速な読み込みを実現します。

Reactと統合されたデータフェッチングライブラリであるため、例えばRailsで作成されたAPIエンドポイントをフェッチする場合にも使用することができます。

SWRは、Reactのフックとして提供されるため、Reactコンポーネント内で簡単に使用することができます。

SWRを利用する

使用方法

yarn add swr

SWRを利用するには、以下のようにimport文を用意しておきます。

import useSWR from 'swr'

インポートされるuseSWRというのが独自フックです。これを使って以下のようにSWRの値を定数に設定します。

定数 = useSWR( パス, [関数])

修正前 - useEffect

修正前のコードでは、useEffect フックで状態の変更を監視し、変更されたタイミングでAPIからデータを取得し状態を更新していました。

export default function Home() {
  const [selected, setSelected] = useState("0")

  const [data, setData] = useState({id:0,data:{name:'-',email:'-',tel:'-'}})
  useEffect(()=>{
    fetch(`/api/hello?id=${selected}`)
      .then(res=>res.json())
      .then(res=>setData(res))
  },[selected])

  const doAction = (e: React.ChangeEvent<HTMLSelectElement>) => setSelected(e.target.value)

修正後 - useSWR

修正後のコードではuseSWRフックを使用しています。

第一引数に取得したいデータのURLを渡し、第二引数には、取得したデータをパースするための関数を渡します。この例ではfetcher関数がデータの取得とパースを担当しています。

import useSWR from 'swr'

const fetcher = (url: string) => fetch(url).then(res => res.json())

export default function Home() {
  const [selected, setSelected] = useState("0")

  const { data } = useSWR(`/api/hello?id=${selected}`, fetcher)

  const doAction = (e: React.ChangeEvent<HTMLSelectElement>) => setSelected(e.target.value)

自動的にAPIからデータを取得し、キャッシュしておいて、必要に応じて再利用することができます。

useSWRの返り値は複数のオブジェクトのため代入は分割代入で行う

値の代入はconst dataではなく、const {data}と分割代入にする必要があります。

useSWRで返されるのはデータだけではなく、エラー発生時にはエラーの値も合わせて返されます。

今回は返されるオブジェクトから値のデータだけをdataに取り出し利用していますが、**{data, err}**というようにすれば、エラー発生時の情報をerrから得ることもできるようになります。

useSWR とuseEffect の使い分け

useSWR フックと useEffect フックは、両方とも React フックであり、React コンポーネントのライフサイクルを監視して、コンポーネントが描画されたときや、指定した変数が変更されたときに処理を実行することができます。

useEffect は、副作用を伴う一般的な処理

useEffectは、Reactのコンポーネント内で副作用を伴う処理を実行するために使用されます。

API からデータを取得したり、イベントリスナーを設定したりする場合などです。

useSWR は、API からデータを取得するために使用できるのはuseEffectと同じですが、取得したデータを簡単にキャッシュすることができます。

useSWRはAPIを取得する関数の監視を行う

useSWR は、コンポーネントの再描画をトリガーとするのではなく、API からデータを取得するという明示的なアクションによってのみ呼び出されるため、API からデータを取得するための処理を簡単に記述することができます。

useEffect は、監視している変数が変更されるたびに再度処理が実行されるため、意図しないタイミングで処理が実行される可能性があるため、API からデータを取得する場合は、useSWRが適しています。

共通点は初期描画時と変更を感知して処理を実行させるためのフックであること

useEffectは、汎用的であるが監視している変数が変更されるたびに再度処理が実行されるため、意図しないタイミングで処理が実行されることがある

useSWR は、キャッシュなどを使って不要なリクエストを送信することを避けられるため、APIからのデータ取得に適している

続く…

本記事の内容は以上になります！

続きのアウトプットも随時更新したいと思います。

間違いがありましたら修正いたしますので、ご指摘ください。

興味があれば他の記事も更新していきますので是非ご覧になってください♪

プログラミングスクールのご紹介 (卒業生より)

お世話になったプログラミングスクールであるRUNTEQです♪

https://runteq.jp/r/ohtFwbjW

こちらのリンクを経由すると１万円引きになります。

RUNTEQを通じて開発学習の末、受託開発企業をご紹介いただき、現在も双方とご縁があります。

もし、興味がありましたらお気軽にコメントか、TwitterのDMでお声掛けください。

https://twitter.com/outputky

背景