App Routerのデータフェッチングを使ってみた

特徴

• 関数単位で非同期処理などをSSG,SSR ,ISRにするのかを選択できる(デフォルトはSSR)
• fetchをNext.js側でカスタマイズして、重複排除をしてくれる

環境

アーキテクチャーは、Next.js(App Roiter),json-serverを使用しています。

json-serverの値は、json placeholderのusersとpostsを使用しております。

Static Data Fetching(SSG)

下記のように使います。

const staticFetch = async() => {
  const url = "http://localhost:3001/users"
  const res = await fetch(url, { cache: 'force-cache' })
  const user:User[] = await res.json()
  return user
}

fetch(url, { cache: 'force-cache' })の第二引数は静的生成の場合、不要です。

fetchの第二引数に何を置くのかによって、データを取得しにいく手法を変更できます。

今回の場合は静的生成となりbuild後、何度リクエストしても同じデータが返却されます。

なので、変更されることがない会社概要や採用情報などのページに使用するのがいいかもしれません。

Dynamic Data Fetching(SSR)

下記のように使います。

const dynamicFetch = async() => {
    const url = "http://localhost:3001/users"
    const res = await fetch(url, { cache: 'no-store' })
    const user:User[] = await res.json()
    return user
}

fetch(url, { cache: 'no-store' })

第二引数に指定されているように、cacheを保存しないので毎回新しい情報が返却されることとなります。

なので、投稿機能などのリアルタイムが求められる機能に使用するのがいいかもしれません。

Revalidating Data(ISR)

const revalidatingFetch = async() => {
  const url = "http://localhost:3001/users"
  const res = await fetch(url, { next: { revalidate: 3 } })　// 3秒
  const user:User[] = await res.json()
  return user
}

fetch(url, { next: { revalidate: 3 } })

第二引数に指定されているように、build後に静的生成を行うが、3秒後にリクエストがあった際に、再度build処理(正確には、1度目にキャッシュを返し2度目のリクエストで新しい情報を返却)がかかる機能になります。

なので、ブログやニュース記事などの定期的に更新はするがリアルタイムでなくても良い時などに使用するのがいいかもしれません。

まとめ

今まで、上記らの機能(SSG,SSR,ISR)はあったのですが、今回関数単位で実装できるようになったことが大きい点なのではないかなと思いました。

以前のNext.jsでは、ページ単位でSSG,SSR,ISRをしていたので、ページの中でSSGをしたい場合でも一つのAPI がSSRを求められた場合、静的生成を諦めないといけない状況だったのが、可能となりました。