Menu

データフェッチとキャッシング

例

このガイドでは、Next.jsにおけるデータフェッチとキャッシングの基本を、実践的な例と推奨事項とともに解説します。

以下は、Next.jsでのデータフェッチの最小限の例です：

app/page.tsx
TypeScript
export default async function Page() {
  let data = await fetch('https://api.vercel.app/blog')
  let posts = await data.json()
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

この例は、非同期のReactサーバーコンポーネントでfetch APIを使用した基本的なサーバー側のデータフェッチを示しています。

参照

例

fetch APIを使用したサーバー側でのデータフェッチ

このコンポーネントは、ブログ記事のリストをフェッチして表示します。fetchからのレスポンスは自動的にキャッシュされます。

app/page.tsx
TypeScript
export default async function Page() {
  let data = await fetch('https://api.vercel.app/blog')
  let posts = await data.json()
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

このルート内の他の動的APIを使用していない場合、next build時に静的ページとしてプリレンダリングされます。データは増分静的再生成を使用して更新できます。

fetchからのレスポンスをキャッシュしたくない場合は、以下のようにできます：

let data = await fetch('https://api.vercel.app/blog', { cache: 'no-store' })

ORMまたはデータベースを使用したサーバー側でのデータフェッチ

このコンポーネントは、ブログ記事のリストをフェッチして表示します。データベースからのレスポンスはデフォルトではキャッシュされませんが、追加の設定で可能です。

app/page.tsx
TypeScript
import { db, posts } from '@/lib/db'
 
export default async function Page() {
  let allPosts = await db.select().from(posts)
  return (
    <ul>
      {allPosts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

このルート内の他の動的APIを使用していない場合、next build時に静的ページとしてプリレンダリングされます。データは増分静的再生成を使用して更新できます。

ページのプリレンダリングを防ぐには、ファイルに以下を追加できます：

export const dynamic = 'force-dynamic'

ただし、cookies、headers、またはページのpropsから受信するsearchParamsの読み取りなどの関数を一般的に使用すると、ページが動的にレンダリングされます。この場合、明示的にforce-dynamicを使用する必要はありません。

クライアント側でのデータフェッチ

まずはサーバー側でデータフェッチを試みることをお勧めします。

しかし、クライアント側のデータフェッチが適切な場合もあります。これらのシナリオでは、useEffectで手動でfetchを呼び出す（推奨されません）か、クライアントフェッチのためのコミュニティの人気のReactライブラリ（SWRやReact Queryなど）に依存できます。

app/page.tsx
TypeScript
'use client'
 
import { useState, useEffect } from 'react'
 
export function Posts() {
  const [posts, setPosts] = useState(null)
 
  useEffect(() => {
    async function fetchPosts() {
      let res = await fetch('https://api.vercel.app/blog')
      let data = await res.json()
      setPosts(data)
    }
    fetchPosts()
  }, [])
 
  if (!posts) return <div>読み込み中...</div>
 
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

ORMまたはデータベースでのデータキャッシング

unstable_cache APIを使用して、next build実行時にページをプリレンダリングできるようにレスポンスをキャッシュできます。

app/page.tsx
TypeScript
import { unstable_cache } from 'next/cache'
import { db, posts } from '@/lib/db'
 
const getPosts = unstable_cache(
  async () => {
    return await db.select().from(posts)
  },
  ['posts'],
  { revalidate: 3600, tags: ['posts'] }
)
 
export default async function Page() {
  const allPosts = await getPosts()
 
  return (
    <ul>
      {allPosts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

この例では、データベースクエリの結果を1時間（3600秒）キャッシュします。また、postsというキャッシュタグを追加しており、増分静的再生成で無効化できます。

複数の関数間でデータを再利用する

Next.jsはgenerateMetadataやgenerateStaticParamsなどのAPIを使用します。ここでは、pageと同じデータフェッチを使用する必要があります。

fetchを使用している場合、リクエストは自動的にメモ化されます。つまり、同じURLと同じオプションを安全に呼び出すことができ、1回のリクエストのみが行われます。

app/page.tsx
TypeScript
import { notFound } from 'next/navigation'
 
interface Post {
  id: string
  title: string
  content: string
}
 
async function getPost(id: string) {
  let res = await fetch(`https://api.vercel.app/blog/${id}`)
  let post: Post = await res.json()
  if (!post) notFound()
  return post
}
 
export async function generateStaticParams() {
  let posts = await fetch('https://api.vercel.app/blog').then((res) =>
    res.json()
  )
 
  return posts.map((post: Post) => ({
    id: post.id,
  }))
}
 
export async function generateMetadata({ params }: { params: { id: string } }) {
  let post = await getPost(params.id)
 
  return {
    title: post.title,
  }
}
 
export default async function Page({ params }: { params: { id: string } }) {
  let post = await getPost(params.id)
 
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  )
}

fetchを使用せず、代わりにORMやデータベースを直接使用している場合、React cache関数でデータフェッチをラップできます。これにより、重複を排除し、1回のクエリのみを実行します。

import { cache } from 'react'
import { db, posts, eq } from '@/lib/db' // Drizzle ORMの例
import { notFound } from 'next/navigation'
 
export const getPost = cache(async (id) => {
  const post = await db.query.posts.findFirst({
    where: eq(posts.id, parseInt(id)),
  })
 
  if (!post) notFound()
  return post
})

キャッシュされたデータの再検証

増分静的再生成でキャッシュされたデータの再検証について詳しく学びます。

パターン

並列および順次的なデータフェッチ

コンポーネント内でデータをフェッチする際は、2つのデータフェッチパターンを意識する必要があります：並列とシーケンシャル。

シーケンシャルと並列のデータフェッチ
  • シーケンシャル: コンポーネントツリー内のリクエストが互いに依存している。読み込み時間が長くなる可能性がある。
  • 並列: ルート内のリクエストが積極的に開始され、同時にデータを読み込む。データ読み込みの総時間を短縮できる。

シーケンシャルなデータフェッチ

ネストされたコンポーネントがあり、各コンポーネントが独自のデータをフェッチする場合、それらのデータリクエストがメモ化されていないと、データフェッチはシーケンシャルに行われます。

一方のフェッチが他方の結果に依存するため、このパターンが望ましい場合があります。例えば、PlaylistsコンポーネントはArtistコンポーネントのデータフェッチが完了するまでデータフェッチを開始しません。これはPlaylistsがartistIDプロパティに依存しているためです：

app/artist/[username]/page.tsx
TypeScript
export default async function Page({
  params: { username },
}: {
  params: { username: string }
}) {
  // アーティスト情報を取得
  const artist = await getArtist(username)
 
  return (
    <>
      <h1>{artist.name}</h1>
      {/* Playlistsコンポーネントの読み込み中にフォールバックUIを表示 */}
      <Suspense fallback={<div>読み込み中...</div>}>
        {/* アーティストIDをPlaylistsコンポーネントに渡す */}
        <Playlists artistID={artist.id} />
      </Suspense>
    </>
  )
}
 
async function Playlists({ artistID }: { artistID: string }) {
  // アーティストIDを使用してプレイリストを取得
  const playlists = await getArtistPlaylists(artistID)
 
  return (
    <ul>
      {playlists.map((playlist) => (
        <li key={playlist.id}>{playlist.name}</li>
      ))}
    </ul>
  )
}

loading.js（ルートセグメント用）またはReact <Suspense>（ネストされたコンポーネント用）を使用して、Reactが結果をストリーミングする間、即座に読み込み状態を表示できます。

これにより、データリクエストによってルート全体がブロックされることを防ぎ、ページの準備ができた部分とユーザーが対話できるようになります。

並列データフェッチ

デフォルトでは、レイアウトとページのセグメントは並列でレンダリングされます。つまり、リクエストは並列に開始されます。

ただし、async/awaitの性質により、同じセグメントまたはコンポーネント内で待機されたリクエストは、その下のリクエストをブロックします。

データを並列にフェッチするには、データを使用するコンポーネントの外でリクエストを積極的に開始することで、リクエストを並列化できます。これにより両方のリクエストを並列に開始できますが、両方のプロミスが解決されるまで、ユーザーはレンダリングされた結果を見ることはできません。

以下の例では、getArtistとgetAlbums関数はPageコンポーネントの外で定義され、Promise.allを使用してコンポーネント内で開始されます：

app/artist/[username]/page.tsx
TypeScript
import Albums from './albums'
 
async function getArtist(username: string) {
  const res = await fetch(`https://api.example.com/artist/${username}`)
  return res.json()
}
 
async function getAlbums(username: string) {
  const res = await fetch(`https://api.example.com/artist/${username}/albums`)
  return res.json()
}
 
export default async function Page({
  params: { username },
}: {
  params: { username: string }
}) {
  const artistData = getArtist(username)
  const albumsData = getAlbums(username)
 
  // 両方のリクエストを並列に開始
  const [artist, albums] = await Promise.all([artistData, albumsData])
 
  return (
    <>
      <h1>{artist.name}</h1>
      <Albums list={albums} />
    </>
  )
}

さらに、Suspenseバウンダリーを追加して、レンダリング作業を分割し、可能な限り早く結果の一部を表示できます。

データのプリロード

ウォーターフォールを防ぐもう1つの方法は、_プリロード_パターンを使用して、ブロッキングリクエストの前に積極的に呼び出されるユーティリティ関数を作成することです。例えば、checkIsAvailable()が<Item/>のレンダリングをブロックするため、<Item/>のデータ依存関係を積極的に開始するために、その前にpreload()を呼び出すことができます。<Item/>がレンダリングされる時には、そのデータは既にフェッチされています。

preload関数はcheckIsAvailable()の実行をブロックしないことに注意してください。

components/Item.tsx
TypeScript
import { getItem } from '@/utils/get-item'
 
export const preload = (id: string) => {
  // voidは与えられた式を評価し、undefinedを返します
  // https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/void
  void getItem(id)
}
export default async function Item({ id }: { id: string }) {
  const result = await getItem(id)
  // ...
}
app/item/[id]/page.tsx
TypeScript
import Item, { preload, checkIsAvailable } from '@/components/Item'
 
export default async function Page({
  params: { id },
}: {
  params: { id: string }
}) {
  // アイテムデータの読み込みを開始
  preload(id)
  // 別の非同期タスクを実行
  const isAvailable = await checkIsAvailable()
 
  return isAvailable ? <Item id={id} /> : null
}

補足： "preload"関数は、APIではなくパターンであるため、任意の名前を持つことができます。

React の cache と server-only を使用した Preload パターン

cache関数、preloadパターン、server-onlyパッケージを組み合わせて、アプリ全体で使用できるデータフェッチユーティリティを作成できます。

utils/get-item.ts
import { cache } from 'react'
import 'server-only'
 
export const preload = (id: string) => {
  void getItem(id)
}
 
export const getItem = cache(async (id: string) => {
  // ...
})
utils/get-item.js
import { cache } from 'react'
import 'server-only'
 
export const preload = (id) => {
  void getItem(id)
}
 
export const getItem = cache(async (id) => {
  // ...
})

このアプローチにより、データを積極的にフェッチし、レスポンスをキャッシュし、データフェッチがサーバー上でのみ行われることを保証できます。

utils/get-itemのエクスポートは、レイアウト、ページ、または他のコンポーネントで使用でき、アイテムのデータをいつフェッチするかを制御できます。

補足：

  • サーバーデータフェッチ関数がクライアント上で使用されないようにするため、server-onlyパッケージの使用をお勧めします。

機密データがクライアントに公開されるのを防ぐ

機密オブジェクトインスタンスまたは機密値がクライアントに渡されるのを防ぐために、React のタントAPI、taintObjectReference と taintUniqueValue の使用をお勧めします。

アプリケーションでタイントを有効にするには、Next.js の設定 experimental.taint オプションを true に設定します：

next.config.js
module.exports = {
  experimental: {
    taint: true,
  },
}

次に、タイントするオブジェクトまたは値を experimental_taintObjectReference または experimental_taintUniqueValue 関数に渡します：

app/utils.ts
import { queryDataFromDB } from './api'
import {
  experimental_taintObjectReference,
  experimental_taintUniqueValue,
} from 'react'
 
export async function getUserData() {
  const data = await queryDataFromDB()
  experimental_taintObjectReference(
    '全ユーザーオブジェクトをクライアントに渡さないでください',
    data
  )
  experimental_taintUniqueValue(
    'ユーザーのアドレスをクライアントに渡さないでください',
    data,
    data.address
  )
  return data
}
app/utils.js
import { queryDataFromDB } from './api'
import {
  experimental_taintObjectReference,
  experimental_taintUniqueValue,
} from 'react'
 
export async function getUserData() {
  const data = await queryDataFromDB()
  experimental_taintObjectReference(
    '全ユーザーオブジェクトをクライアントに渡さないでください',
    data
  )
  experimental_taintUniqueValue(
    'ユーザーのアドレスをクライアントに渡さないでください',
    data,
    data.address
  )
  return data
}
app/page.tsx
TypeScript
import { getUserData } from './data'
 
export async function Page() {
  const userData = getUserData()
  return (
    <ClientComponent
      user={userData} // taintObjectReferenceにより、これはエラーを引き起こします
      address={userData.address} // taintUniqueValueにより、これはエラーを引き起こします
    />
  )
}