データフェッチングとキャッシング
このガイドでは、Next.jsにおけるデータフェッチングとキャッシングの基本を、実用的な例とベストプラクティスを交えて説明します。
以下は、Next.jsでのデータフェッチングの最小限の例です:
- TypeScript
- JavaScript
export default async function Page() {
const data = await fetch('https://api.vercel.app/blog')
const posts = await data.json()
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}
export default async function Page() {
const data = await fetch('https://api.vercel.app/blog')
const posts = await data.json()
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}
この例は、非同期のReact server componentでfetch
APIを使用した基本的なサーバーサイドのデータフェッチを示しています。
参考資料
fetch
- React
cache
- Next.js
unstable_cache
例
fetch
APIを使用したサーバーでのデータフェッチ
このコンポーネントはブログ投稿のリストを取得して表示します。fetch
からのレスポンスはデフォルトではキャッシュされません。
- TypeScript
- JavaScript
export default async function Page() {
const data = await fetch('https://api.vercel.app/blog')
const posts = await data.json()
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}
export default async function Page() {
const data = await fetch('https://api.vercel.app/blog')
const posts = await data.json()
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}
このルートの他の場所でDynamic APIsを使用していない場合、next build
中に静的ページとしてプリレンダリングされます。その後、データはIncremental Static Regenerationを使用して更新できます。
ページのプリレンダリングを防ぐには、次のコードをファイルに追加します:
export const dynamic = 'force-dynamic'
ただし、通常はcookies
、headers
、またはページpropsからのsearchParams
の読み取りなどの関数を使用するため、ページは自動的に動的にレンダリングされます。この場合、明示的にforce-dynamic
を使用する必要はありません。
ORMまたはデータベースを使用したサーバーでのデータフェッチ
このコンポーネントはブログ投稿のリストを取得して表示します。データベースからのレスポンスはデフォルトではキャッシュされませんが、追加の設定でキャッシュすることができます。
- TypeScript
- JavaScript
import { db, posts } from '@/lib/db'
export default async function Page() {
const allPosts = await db.select().from(posts)
return (
<ul>
{allPosts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}
import { db, posts } from '@/lib/db'
export default async function Page() {
const allPosts = await db.select().from(posts)
return (
<ul>
{allPosts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}
このルートの他の場所でDynamic APIsを使用していない場合、next build
中に静的ページとしてプリレンダリングされます。その後、データはIncremental Static Regenerationを使用して更新できます。
ページのプリレンダリングを防ぐには、次のコードをファイルに追加します:
export const dynamic = 'force-dynamic'
ただし、通常はcookies
、headers
、またはページpropsからのsearchParams
の読み取りなどの関数を使用するため、ページは自動的に動的にレンダリングされます。この場合、明示的にforce-dynamic
を使用する必要はありません。
クライアントでのデータフェッチ
まずはサーバーサイドでデータを取得することをお勧めします。
しかし、クライアントサイドでのデータフェッチが理にかなう場合もあります。このようなシナリオでは、useEffect
で手動でfetch
を呼び出す(推奨されません)か、クライアントフェッチ用のコミュニティの人気のあるReactライブラリ(SWRやReact Queryなど)を利用することができます。
- TypeScript
- JavaScript
'use client'
import { useState, useEffect } from 'react'
export function Posts() {
const [posts, setPosts] = useState(null)
useEffect(() => {
async function fetchPosts() {
const res = await fetch('https://api.vercel.app/blog')
const data = await res.json()
setPosts(data)
}
fetchPosts()
}, [])
if (!posts) return <div>Loading...</div>
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}
'use client'
import { useState, useEffect } from 'react'
export function Posts() {
const [posts, setPosts] = useState(null)
useEffect(() => {
async function fetchPosts() {
const res = await fetch('https://api.vercel.app/blog')
const data = await res.json()
setPosts(data)
}
fetchPosts()
}, [])
if (!posts) return <div>Loading...</div>
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}
ORMまたはデータベースを使用したデータのキャッシング
unstable_cache
APIを使用して、next build
の実行時にレスポンスをキャッシュすることができます。
- TypeScript
- JavaScript
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>
)
}
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
を追加し、Incremental Static Regenerationで無効化することができます。
複数の関数でデータを再利用する
Next.jsはgenerateMetadata
やgenerateStaticParams
のようなAPIを使用しており、page
で取得した同じデータを使用する必要があります。
fetch
を使用している場合、cache: 'force-cache'
を追加することでリクエストをメモ化できます。これにより、同じURLを同じオプションで安全に呼び出すことができ、1つのリクエストのみが行われます。
Good to know:
- 以前のバージョンのNext.jsでは、
fetch
を使用するとデフォルトでcache
の値がforce-cache
になっていました。これはバージョン15で変更され、デフォルトがcache: no-store
になりました。
- TypeScript
- JavaScript
import { notFound } from 'next/navigation'
interface Post {
id: string
title: string
content: string
}
async function getPost(id: string) {
const res = await fetch(`https://api.vercel.app/blog/${id}`, {
cache: 'force-cache',
})
const post: Post = await res.json()
if (!post) notFound()
return post
}
export async function generateStaticParams() {
const posts = await fetch('https://api.vercel.app/blog', {
cache: 'force-cache',
}).then((res) => res.json())
return posts.map((post: Post) => ({
id: String(post.id),
}))
}
export async function generateMetadata({
params,
}: {
params: Promise<{ id: string }>
}) {
const { id } = await params
const post = await getPost(id)
return {
title: post.title,
}
}
export default async function Page({
params,
}: {
params: Promise<{ id: string }>
}) {
const { id } = await params
const post = await getPost(id)
return (
<article>
<h1>{post.title}</h1>
<p>{post.content}</p>
</article>
)
}
import { notFound } from 'next/navigation'
async function getPost(id) {
const res = await fetch(`https://api.vercel.app/blog/${id}`)
const post = await res.json()
if (!post) notFound()
return post
}
export async function generateStaticParams() {
const posts = await fetch('https://api.vercel.app/blog').then((res) =>
res.json()
)
return posts.map((post) => ({
id: String(post.id),
}))
}
export async function generateMetadata({ params }) {
const { id } = await params
const post = await getPost(id)
return {
title: post.title,
}
}
export default async function Page({ params }) {
const { id } = await params
const post = await getPost(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
})
キャッシュされたデータの再検証
Incremental Static Regenerationを使用してキャッシュされたデータを再検証する方法について学びます。
パターン
並列および逐次データフェッチ
コンポーネント内でデータをフェッチする際には、並列と逐次の2つのデータフェッチパターンを意識する必要があります。


- 逐次: コンポーネントツリー内のリクエストが互いに依存している場合。これにより、読み込み時間が長くなる可能性があります。
- 並列: ルート内のリクエストが積極的に開始され、同時にデータを読み込みます。これにより、データの読み込みにかかる総時間が短縮されます。
逐次データフェッチ
ネストされたコンポーネントがあり、各コンポーネントが独自のデータをフェッチする場合、これらのデータリクエストがメモ化されていない限り、データフェッチは逐次的に行われます。
このパターンを望む場合もあります。たとえば、Playlists
コンポーネントはartistID
propに依存しているため、Artist
コンポーネントがデータフェッチを完了するまでPlaylists
はデータフェッチを開始しません:
- TypeScript
- JavaScript
export default async function Page({
params,
}: {
params: Promise<{ username: string }>
}) {
const { username } = await params
// アーティスト情報を取得
const artist = await getArtist(username)
return (
<>
<h1>{artist.name}</h1>
{/* Playlistsコンポーネントが読み込まれる間、フォールバックUIを表示 */}
<Suspense fallback={<div>Loading...</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>
)
}
export default async function Page({ params }) {
const { username } = await params
// アーティスト情報を取得
const artist = await getArtist(username)
return (
<>
<h1>{artist.name}</h1>
{/* Playlistsコンポーネントが読み込まれる間、フォールバックUIを表示 */}
<Suspense fallback={<div>Loading...</div>}>
{/* アーティストIDをPlaylistsコンポーネントに渡す */}
<Playlists artistID={artist.id} />
</Suspense>
</>
)
}
async function Playlists({ artistID }) {
// アーティスト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
を使用してコンポーネント内で開始されます:
- TypeScript
- JavaScript
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,
}: {
params: Promise<{ username: string }>
}) {
const { username } = await params
const artistData = getArtist(username)
const albumsData = getAlbums(username)
// 両方のリクエストを並行して開始
const [artist, albums] = await Promise.all([artistData, albumsData])
return (
<>
<h1>{artist.name}</h1>
<Albums list={albums} />
</>
)
}
import Albums from './albums'
async function getArtist(username) {
const res = await fetch(`https://api.example.com/artist/${username}`)
return res.json()
}
async function getAlbums(username) {
const res = await fetch(`https://api.example.com/artist/${username}/albums`)
return res.json()
}
export default async function Page({ params }) {
const { username } = await params
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 Boundaryを追加して、レンダリング作業を分割し、可能な限り早く結果の一部を表示することができます。
データのプリロード
ウォーターフォールを防ぐもう1つの方法は、ユーティリティ関数を作成してブロッキングリクエストの上で積極的に呼び出すことによって、プリロードパターンを使用することです。たとえば、checkIsAvailable()
は<Item/>
のレンダリングをブロックしますが、preload()
をその前に呼び出すことで<Item/>
のデータ依存関係を積極的に開始できます。<Item/>
がレンダリングされる時点で、そのデータはすでにフェッチされています。
preload
関数はcheckIsAvailable()
の実行をブロックしないことに注意してください。
- TypeScript
- JavaScript
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)
// ...
}
import { getItem } from '@/utils/get-item'
export const preload = (id) => {
// voidは指定された式を評価し、undefinedを返します
// https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/void
void getItem(id)
}
export default async function Item({ id }) {
const result = await getItem(id)
// ...
}
- TypeScript
- JavaScript
import Item, { preload, checkIsAvailable } from '@/components/Item'
export default async function Page({
params,
}: {
params: Promise<{ id: string }>
}) {
const { id } = await params
// アイテムデータの読み込みを開始
preload(id)
// 別の非同期タスクを実行
const isAvailable = await checkIsAvailable()
return isAvailable ? <Item id={id} /> : null
}
import Item, { preload, checkIsAvailable } from '@/components/Item'
export default async function Page({ params }) {
const { id } = await params
// アイテムデータの読み込みを開始
preload(id)
// 別の非同期タスクを実行
const isAvailable = await checkIsAvailable()
return isAvailable ? <Item id={id} /> : null
}
Good to know: "preload"関数はパターンであり、APIではないため、任意の名前を持つことができます。
React cache
とserver-only
を使用したプリロードパターン
cache
関数、preload
パターン、およびserver-only
パッケージを組み合わせて、アプリ全体で使用できるデータフェッチユーティリティを作成できます。
- TypeScript
- JavaScript
import { cache } from 'react'
import 'server-only'
export const preload = (id: string) => {
void getItem(id)
}
export const getItem = cache(async (id: string) => {
// ...
})
import { cache } from 'react'
import 'server-only'
export const preload = (id) => {
void getItem(id)
}
export const getItem = cache(async (id) => {
// ...
})
このアプローチを使用すると、データを積極的にフェッチし、レスポンスをキャッシュし、このデータフェッチがサーバーでのみ行われることを保証できます。
utils/get-item
のエクスポートは、Layouts、Pages、または他のコンポーネントによって使用され、アイテムのデータがフェッチされるタイミングを制御できます。
Good to know:
- サーバーデータフェッチ関数がクライアントで使用されないようにするために、
server-only
パッケージを使用することをお勧めします。
クライアントに機密データが露出しないようにする
Reactの汚染API、taintObjectReference
とtaintUniqueValue
を使用して、オブジェクトインスタンス全体や機密値がクライアントに渡されないようにすることをお勧めします。
アプリケーションで汚染を有効にするには、Next.js Configのexperimental.taint
オプションをtrue
に設定します:
module.exports = {
experimental: {
taint: true,
},
}
次に、experimental_taintObjectReference
またはexperimental_taintUniqueValue
関数に汚染したいオブジェクトまたは値を渡します:
- TypeScript
- JavaScript
import { queryDataFromDB } from './api'
import {
experimental_taintObjectReference,
experimental_taintUniqueValue,
} from 'react'
export async function getUserData() {
const data = await queryDataFromDB()
experimental_taintObjectReference(
'Do not pass the whole user object to the client',
data
)
experimental_taintUniqueValue(
"Do not pass the user's address to the client",
data,
data.address
)
return data
}
import { queryDataFromDB } from './api'
import {
experimental_taintObjectReference,
experimental_taintUniqueValue,
} from 'react'
export async function getUserData() {
const data = await queryDataFromDB()
experimental_taintObjectReference(
'Do not pass the whole user object to the client',
data
)
experimental_taintUniqueValue(
"Do not pass the user's address to the client",
data,
data.address
)
return data
}
- TypeScript
- JavaScript
import { getUserData } from './data'
export async function Page() {
const userData = getUserData()
return (
<ClientComponent
user={userData} // これはtaintObjectReferenceのためエラーを引き起こします
address={userData.address} // これはtaintUniqueValueのためエラーを引き起こします
/>
)
}
import { getUserData } from './data'
export async function Page() {
const userData = await getUserData()
return (
<ClientComponent
user={userData} // これはtaintObjectReferenceのためエラーを引き起こします
address={userData.address} // これはtaintUniqueValueのためエラーを引き起こします
/>
)
}