diff --git a/docs/02-app/01-building-your-application/02-data-fetching/01-fetching.mdx b/docs/02-app/01-building-your-application/02-data-fetching/01-fetching.mdx
index 9ddc24fb..d22cee8b 100644
--- a/docs/02-app/01-building-your-application/02-data-fetching/01-fetching.mdx
+++ b/docs/02-app/01-building-your-application/02-data-fetching/01-fetching.mdx
@@ -1,11 +1,11 @@
---
-title: 'データのフェッチとキャッシング'
-nav_title: 'データのフェッチとキャッシング'
-description: 'Next.jsでサーバまたはクライアント上でデータを取得するためのベストプラクティスを学びます。'
+title: 'データフェッチとキャッシング'
+nav_title: 'データフェッチとキャッシング'
+description: 'Next.jsでサーバーまたはクライアント側でデータを取得するためのベストプラクティスを学びましょう。'
---
- 例
+ Examples
- [Next.js Commerce](https://vercel.com/templates/next.js/nextjs-commerce)
- [On-Demand ISR](https://on-demand-isr.vercel.app)
@@ -13,9 +13,9 @@ description: 'Next.jsでサーバまたはクライアント上でデータを
-このガイドでは、Next.jsにおけるデータのフェッチとキャッシングの基本を実践的な例やベストプラクティスを通じて説明します。
+このガイドでは、Next.jsにおけるデータフェッチとキャッシングの基本を、実践的な例とベストプラクティスを通じて案内します。
-ここにNext.jsでデータをフェッチするミニマルな例があります：
+次のコードは、Next.jsでのデータフェッチのミニマムな例です：
@@ -54,19 +54,19 @@ export default async function Page() {
-この例は、非同期のReact Server Componentで`fetch` APIを使用して基本的なサーバサイドのデータ取得を実演しています。
+この例は、非同期React server component内で`fetch` APIを使用した基本的なサーバーサイドデータフェッチを示しています。
-## 参照 {#reference}
+## リファレンス {#reference}
- [`fetch`](/docs/app/api-reference/functions/fetch)
- React [`cache`](https://react.dev/reference/react/cache)
-- Next.js [`unstable_cache`](/docs/app/api-reference/functions/unstable_cache)
+- Next.js [`unstable_cache`](/docs/app/api-reference/legacy-apis/unstable_cache)
## 例 {#examples}
-### `fetch` APIを使用してサーバでデータを取得する {#fetching-data-on-the-server-with-the-fetch-api}
+### `fetch` APIを使用したサーバーでのデータフェッチ {#fetching-data-on-the-server-with-the-fetch-api}
-このコンポーネントはブログポストのリストを取得し表示します。`fetch`からのレスポンスは自動的にキャッシュされます。
+このコンポーネントはブログ投稿のリストをフェッチして表示します。`fetch`からのレスポンスは自動的にキャッシュされます。
@@ -105,17 +105,17 @@ export default async function Page() {
-このルートの他の場所で[Dynamic APIs](/docs/app/building-your-application/rendering/server-components#dynamic-rendering)を使用していない場合、`next build`中に静的ページにプレンダリングされます。データは[Incremental Static Regeneration](/docs/app/building-your-application/data-fetching/incremental-static-regeneration)を使用して更新できます。
+このルートの他の箇所で[Dynamic APIs](/docs/app/building-your-application/rendering/server-components#dynamic-rendering)を使用していない場合、`next build`中に静的ページとして事前レンダリングされます。このデータは[Incremental Static Regeneration](/docs/app/building-your-application/data-fetching/incremental-static-regeneration)を使用して更新できます。
-`fetch`からのレスポンスをキャッシュしたくない場合は以下を行います：
+`fetch`からのレスポンスをキャッシングしたくない場合、以下のように行えます：
```js
let data = await fetch('https://api.vercel.app/blog', { cache: 'no-store' })
```
-### ORMやデータベースを使用してサーバでデータを取得する {#fetching-data-on-the-server-with-an-orm-or-database}
+### ORMまたはデータベースを使用したサーバーでのデータフェッチ {#fetching-data-on-the-server-with-an-orm-or-database}
-このコンポーネントはブログポストのリストを取得し表示します。データベースからのレスポンスはデフォルトではキャッシュされませんが、[追加の設定](#caching-data-with-an-orm-or-database)でキャッシュされることもあります。
+このコンポーネントはブログ投稿のリストをフェッチして表示します。データベースからのレスポンスはデフォルトでキャッシュされませんが、[追加の設定](#caching-data-with-an-orm-or-database)でキャッシュされる可能性があります。
@@ -156,21 +156,21 @@ export default async function Page() {
-このルートの他の場所で[Dynamic APIs](/docs/app/building-your-application/rendering/server-components#dynamic-rendering)を使用していない場合、`next build`中に静的ページにプレンダリングされます。データは[Incremental Static Regeneration](/docs/app/building-your-application/data-fetching/incremental-static-regeneration)を使用して更新できます。
+このルートの他の箇所で[Dynamic APIs](/docs/app/building-your-application/rendering/server-components#dynamic-rendering)を使用していない場合、`next build`中に静的ページとして事前レンダリングされます。このデータは[Incremental Static Regeneration](/docs/app/building-your-application/data-fetching/incremental-static-regeneration)を使用して更新できます。
-ページのプレンダリングを防ぐためには、以下をファイルに追加することができます：
+ページの事前レンダリングを防ぐには、次のものをファイルに追加できます：
```js
export const dynamic = 'force-dynamic'
```
-ただし、`cookies`や`headers`、ページpropsからの`searchParams`の読み取りなどの関数を通常使用すると、そのページは自動的に動的にレンダリングされます。この場合、`force-dynamic`を明示的に使う必要はありません。
+しかし、通常は、`cookies`、`headers`、またはページpropsからの`searchParams`の読み取りのような関数を使用し、自動的にページが動的にレンダリングされるようにします。この場合、明示的に`force-dynamic`を使用する必要はありません。
-### クライアントでデータを取得する {#fetching-data-on-the-client}
+### クライアントでのデータフェッチ {#fetching-data-on-the-client}
-まずはサーバ側でのデータフェッチを試みることをお勧めします。
+まず、サーバーサイドでのデータフェッチを試みることをお勧めします。
-ただし、クライアント側でのデータ取得が適しているケースもあります。こういった場合には、`useEffect`で`fetch`を手動で呼び出す（非推奨）か、クライアントフェッチに人気のあるReactライブラリ（[SWR](https://swr.vercel.app/)や[React Query](https://tanstack.com/query/latest)など）を利用することができます。
+ただし、クライアントサイドでのデータフェッチが意味を持つケースもあります。こういったシナリオでは、`useEffect`内で手動で`fetch`を呼び出すか（推奨されません）、コミュニティで人気のあるReactライブラリ（例： [SWR](https://swr.vercel.app/) または [React Query](https://tanstack.com/query/latest)）を活用してクライアントフェッチを行えます。
@@ -239,9 +239,9 @@ export function Posts() {
-### ORMやデータベースを使用してデータをキャッシュする {#caching-data-with-an-orm-or-database}
+### ORMまたはデータベースでデータをキャッシュする {#caching-data-with-an-orm-or-database}
-`unstable_cache` APIを使用してレスポンスをキャッシュし、`next build`を実行するときにページをプレンダリングすることができます。
+`unstable_cache` APIを使用して、レスポンスをキャッシュし、`next build`を実行する際にページを事前レンダリングできるようにします。
@@ -302,13 +302,13 @@ export default async function Page() {
-この例では、データベースクエリの結果を1時間（3600秒）キャッシュしています。また、キャッシュタグ`posts`を追加しており、後で[Incremental Static Regeneration](/docs/app/building-your-application/data-fetching/incremental-static-regeneration)で無効化できます。
+この例では、データベースクエリの結果を1時間（3600秒）キャッシュします。また、キャッシュタグ`posts`を追加し、これにより[Incremental Static Regeneration](/docs/app/building-your-application/data-fetching/incremental-static-regeneration)で無効化できます。
-### 複数の関数でデータを再利用する {#reusing-data-across-multiple-functions}
+### 複数の関数間でデータを再利用する {#reusing-data-across-multiple-functions}
-Next.jsでは、`generateMetadata`や`generateStaticParams`のようなAPIを使用して、ページでフェッチしたデータを再利用する必要があります。
+Next.jsでは、API `generateMetadata`や`generateStaticParams`を使用して、`page`で取得したのと同じデータを使う必要があります。
-`fetch`を使用している場合、リクエストは自動的に[メモ化](/docs/app/building-your-application/caching#request-memoization)されます。これは、同じURLと同じオプションで安全に呼び出すことができ、1つのリクエストのみが行われることを意味します。
+`fetch`を使用している場合、リクエストは自動的に[request memoization](/docs/app/building-your-application/caching#request-memoization)されます。これは、同じURLと同じオプションで安全に呼び出すと、1つのリクエストのみが行われることを意味します。
@@ -405,7 +405,7 @@ export default async function Page({ params }) {
-`fetch`を使用していない場合、つまりORMやデータベースを直接使用している場合は、データの取得をReactの`cache`関数でラップすることができます。これにより、重複のない1つのクエリが作成されます。
+`fetch`を使用せず、代わりに直接ORMやデータベースを使用する場合、データフェッチをReactの`cache`関数でラップできます。これにより重複が排除され、1回のクエリのみが実行されます。
```jsx
import { cache } from 'react'
@@ -422,32 +422,32 @@ export const getPost = cache(async (id) => {
})
```
-### キャッシュされたデータの再検証 {#revalidating-cached-data}
+### キャッシュされたデータを再検証する {#revalidating-cached-data}
-キャッシュされたデータの再検証については、[Incremental Static Regeneration](/docs/app/building-your-application/data-fetching/incremental-static-regeneration)を参照してください。
+キャッシュされたデータを再検証する方法について、[Incremental Static Regeneration](/docs/app/building-your-application/data-fetching/incremental-static-regeneration)で詳しく知ることができます。
## パターン {#patterns}
-### 並列および順次データフェッチ {#parallel-and-sequential-data-fetching}
+### 並行データフェッチと逐次データフェッチ {#parallel-and-sequential-data-fetching}
-コンポーネント内でデータをフェッチするときは、2つのデータフェッチパターンに注意する必要があります。ParallelとSequentialです。
+コンポーネント内でデータをフェッチする際には、2つのデータフェッチパターン：並行と逐次に注意する必要があります。
-- **Sequential**: コンポーネントツリー内のリクエストが互いに依存しているパターンです。これにより、読み込み時間が長くなる可能性があります。
-- **Parallel**: ルート内のリクエストが並行して開始され、同時にデータをロードします。これにより、データをロードするのにかかる総時間を短縮できます。
+- **逐次**：コンポーネントツリー内のリクエストが互いに依存している。これにより読み込み時間が長くなることがあります。
+- **並行**：ルート内のリクエストは積極的に開始され、同時にデータをロードします。これによりデータのロードにかかる全体的な時間が短縮されます。
-#### 順次データフェッチ {#sequential-data-fetching}
+#### 逐次データフェッチ {#sequential-data-fetching}
-ネストされたコンポーネントがあり、それぞれが独自のデータをフェッチする場合、これらのデータリクエストが[メモ化](/docs/app/building-your-application/caching#request-memoization)されていない場合、データフェッチは順次行われます。
+入れ子のコンポーネントがあり、各コンポーネントが独自のデータをフェッチする場合、これらのデータリクエストが[request memoization](/docs/app/building-your-application/caching#request-memoization)されていない場合、データフェッチは逐次的に行われます。
-1つのフェッチが他の結果に依存するため、このパターンを使用したい場合もあります。例えば、`Playlists`コンポーネントは`artistID` propに依存しているため、`Artist`コンポーネントがデータのフェッチを完了するまでデータフェッチを開始しません。
+1つのフェッチが他のフェッチの結果に依存するため、このパターンを望むケースがあるかもしれません。例えば、`Playlists`コンポーネントは`artistID` propに依存しているため、`Artist`コンポーネントがデータのフェッチを終えた後にのみデータのフェッチを開始します：
@@ -464,7 +464,7 @@ export default async function Page({
return (
<>
{artist.name}
- {/* Playlistsコンポーネントがロードされる間のフォールバックUIを表示 */}
+ {/* Playlistsコンポーネントが読み込まれている間、フォールバックUIを表示 */}
Loading...}>
{/* PlaylistsコンポーネントにアーティストIDを渡す */}
@@ -474,7 +474,7 @@ export default async function Page({
}
async function Playlists({ artistID }: { artistID: string }) {
- // アーティストIDを使用してプレイリストをフェッチ
+ // アーティストIDを使用してプレイリストを取得
const playlists = await getArtistPlaylists(artistID)
return (
@@ -498,7 +498,7 @@ export default async function Page({ params: { username } }) {
return (
<>
{artist.name}
- {/* Playlistsコンポーネントがロードされる間のフォールバックUIを表示 */}
+ {/* Playlistsコンポーネントが読み込まれている間、フォールバックUIを表示 */}
Loading...}>
{/* PlaylistsコンポーネントにアーティストIDを渡す */}
@@ -508,7 +508,7 @@ export default async function Page({ params: { username } }) {
}
async function Playlists({ artistID }) {
- // アーティストIDを使用してプレイリストをフェッチ
+ // アーティストIDを使用してプレイリストを取得
const playlists = await getArtistPlaylists(artistID)
return (
@@ -524,19 +524,19 @@ async function Playlists({ artistID }) {
-[`loading.js`](/docs/app/building-your-application/routing/loading-ui-and-streaming)（ルートセグメント用）や[React ``](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense)（ネストされたコンポーネント用）を使用して即時の読み込み状態を表示し、Reactが結果をストリーミングするまで待つことができます。
+[`loading.js`](/docs/app/building-your-application/routing/loading-ui-and-streaming)（ルートセグメント用）または[React ``](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense)（ネストされたコンポーネント用）を使用して、即時の読み込み状態を表示し、Reactが結果をストリーミングしている間に表示できるようにします。
-これにより、データリクエストによってルート全体がブロックされるのを防ぎ、ユーザーは準備ができているページの部分と対話できるようになります。
+これにより、データリクエストによって全体のルートがブロックされるのを防ぎ、ユーザーは準備ができたページの一部と対話できます。
-#### 並列データフェッチ {#parallel-data-fetching}
+#### 並行データフェッチ {#parallel-data-fetching}
-デフォルトでは、レイアウトとページセグメントは並列にレンダリングされます。これはリクエストが並行して開始されることを意味します。
+デフォルトでは、レイアウトとページセグメントは並行してレンダリングされます。これにより、リクエストが並行に開始されます。
-しかし、`async`/`await`の性質上、同じセグメントやコンポーネント内で待機するリクエストは、その下のリクエストをブロックします。
+ただし、 `async`/`await`の性質により、同じセグメントまたはコンポーネント内の待機されたリクエストは、その下のリクエストをブロックします。
-データを並行してフェッチするためには、データを使用するコンポーネントの外でリクエストを事前に開始することができます。これにより、リクエストを並行して開始する時間が節約できますが、両方のPromiseが解決されるまでユーザーはレンダリング結果を見ることができません。
+データを並行してフェッチするには、データを使用するコンポーネントの外側でリクエストを積極的に開始してください。これにより、両方のリクエストが並行して開始されるため時間が節約されますが、両方のプロミスが解決されるまでユーザーはレンダリングされた結果を見られません。
-以下の例では、`getArtist`および`getAlbums`関数が`Page`コンポーネントの外で定義され、`Promise.all`を使用してコンポーネント内で開始されています。
+以下の例では、`getArtist`および`getAlbums`関数は`Page`コンポーネントの外に定義され、`Promise.all`を使用してコンポーネント内部で開始されます：
@@ -562,7 +562,7 @@ export default async function Page({
const artistData = getArtist(username)
const albumsData = getAlbums(username)
- // 両方のリクエストを並列で開始
+ // 両方のリクエストを並行して開始
const [artist, albums] = await Promise.all([artistData, albumsData])
return (
@@ -594,7 +594,7 @@ export default async function Page({ params: { username } }) {
const artistData = getArtist(username)
const albumsData = getAlbums(username)
- // 両方のリクエストを並列で開始
+ // 両方のリクエストを並行して開始
const [artist, albums] = await Promise.all([artistData, albumsData])
return (
@@ -609,13 +609,13 @@ export default async function Page({ params: { username } }) {
-さらに、[Suspense Boundary](/docs/app/building-your-application/routing/loading-ui-and-streaming)を追加してレンダリング作業を分割し、可能な限り早く結果の一部を表示することができます。
+さらに、[Suspense Boundary](/docs/app/building-your-application/routing/loading-ui-and-streaming)を追加して、レンダリング作業を分割し、できるだけ早く結果の一部を表示することができます。
-### データのプリロード {#preloading-data}
+### データの事前読み込み {#preloading-data}
-ウォーターフォールを防ぐもう1つの方法は、ブロックリクエストの上のユーティリティ関数を作成して事前に呼び出すことによる*プリロード*パターンを使用することです。たとえば、`checkIsAvailable()`が`