メインコンテンツまでスキップ

データを取得してストリームする方法

このページでは、server componentとclient componentでデータを取得する方法、およびデータに依存するコンテンツをストリームする方法を説明します。

データの取得​

Server Components​

Server Componentsでデータを取得するには、次の方法があります：

  1. fetch APIを使用する
  2. ORMやデータベースを使用する

fetch APIを使用する​

fetch APIを使用してデータを取得するには、コンポーネントを非同期関数に変換し、fetch呼び出しを待機します。例えば：

app/blog/page.tsx
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>
  )
}

ORMやデータベースを使用する​

ORMやデータベースを使用してデータを取得するには、コンポーネントを非同期関数に変換し、呼び出しを待機します：

app/blog/page.tsx
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>
  )
}

Client Components​

Client Componentsでデータを取得する方法は2つあります：

  1. Reactのuseフックを使用する
  2. SWRやReact Queryのようなコミュニティライブラリを使用する

useフックを使用する​

Reactのuseフックを使用して、サーバーからクライアントにデータをストリームできます。まず、Server componentでデータを取得し、そのプロミスをClient Componentにpropとして渡します：

app/blog/page.tsx
import Posts from '@/app/ui/posts'
import { Suspense } from 'react'

export default function Page() {
  // データ取得関数を待機しない
  const posts = getPosts()

  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Posts posts={posts} />
    </Suspense>
  )
}

次に、Client Componentでuseフックを使用してプロミスを読み取ります：

app/ui/posts.tsx
'use client'
import { use } from 'react'

export default function Posts({
  posts,
}: {
  posts: Promise<{ id: string; title: string }[]>
}) {
  const allPosts = use(posts)

  return (
    <ul>
      {allPosts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

上記の例では、<Posts />コンポーネントを<Suspense> boundaryでラップする必要があります。これは、プロミスが解決される間、フォールバックが表示されることを意味します。ストリーミングについて詳しく学びましょう。

コミュニティライブラリ​

SWRやReact Queryのようなコミュニティライブラリを使用して、Client Componentsでデータを取得できます。これらのライブラリは、キャッシュ、ストリーミング、その他の機能に独自のセマンティクスを持っています。例えば、SWRを使用する場合：

app/blog/page.tsx
'use client'
import useSWR from 'swr'

const fetcher = (url) => fetch(url).then((r) => r.json())

export default function BlogPage() {
  const { data, error, isLoading } = useSWR(
    'https://api.vercel.app/blog',
    fetcher
  )

  if (isLoading) return <div>Loading...</div>
  if (error) return <div>Error: {error.message}</div>

  return (
    <ul>
      {data.map((post: { id: string; title: string }) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

ストリーミング​

警告： 以下の内容は、アプリケーションでdynamicIO設定オプションが有効になっていることを前提としています。このフラグはNext.js 15 canaryで導入されました。

Server Componentsでasync/awaitを使用すると、Next.jsは動的レンダリングを選択します。これは、データがユーザーのリクエストごとにサーバーで取得され、レンダリングされることを意味します。遅いデータリクエストがある場合、ルート全体がレンダリングをブロックされます。

初期ロード時間とユーザーエクスペリエンスを向上させるために、ストリーミングを使用してページのHTMLを小さなチャンクに分割し、それらのチャンクをサーバーからクライアントに段階的に送信できます。

ストリーミングを使用したサーバーレンダリングの仕組みストリーミングを使用したサーバーレンダリングの仕組み

アプリケーションでストリーミングを実装する方法は2つあります：

  1. loading.jsファイルを使用する
  2. Reactの<Suspense>コンポーネントを使用する

loading.jsを使用する​

ページと同じフォルダにloading.jsファイルを作成して、データが取得されている間にページ全体をストリームできます。例えば、app/blog/page.jsをストリームするには、app/blogフォルダ内にファイルを追加します。

loading.jsファイルを含むブログフォルダ構造loading.jsファイルを含むブログフォルダ構造
app/blog/loading.tsx
export default function Loading() {
  // ここでローディングUIを定義します
  return <div>Loading...</div>
}

ナビゲーション時に、ユーザーはページがレンダリングされている間にレイアウトとローディング状態をすぐに見ることができます。レンダリングが完了すると、新しいコンテンツが自動的に入れ替わります。

ローディングUIローディングUI

舞台裏では、loading.jsはlayout.js内にネストされ、page.jsファイルとその下のすべての子を自動的に<Suspense> boundaryでラップします。

loading.jsの概要loading.jsの概要

このアプローチはルートセグメント（レイアウトとページ）に適していますが、より細かいストリーミングには<Suspense>を使用できます。

<Suspense>を使用する​

<Suspense>を使用すると、ページのどの部分をストリームするかをより細かく制御できます。例えば、<Suspense> boundaryの外にあるページコンテンツをすぐに表示し、boundary内のブログ投稿のリストをストリームできます。

app/blog/page.tsx
import { Suspense } from 'react'
import BlogList from '@/components/BlogList'
import BlogListSkeleton from '@/components/BlogListSkeleton'

export default function BlogPage() {
  return (
    <div>
      {/* このコンテンツはすぐにクライアントに送信されます */}
      <header>
        <h1>Welcome to the Blog</h1>
        <p>Read the latest posts below.</p>
      </header>
      <main>
        {/* <Suspense> boundaryでラップされたコンテンツはストリームされます */}
        <Suspense fallback={<BlogListSkeleton />}>
          <BlogList />
        </Suspense>
      </main>
    </div>
  )
}

意味のあるローディング状態を作成する​

インスタントローディング状態は、ナビゲーション後にユーザーにすぐに表示されるフォールバックUIです。最良のユーザーエクスペリエンスを提供するために、意味のあるローディング状態を設計し、アプリが応答していることをユーザーに理解させることをお勧めします。例えば、スケルトンやスピナー、またはカバーフォトやタイトルなどの将来の画面の小さくても意味のある部分を使用できます。

開発中は、React Devtoolsを使用してコンポーネントのローディング状態をプレビューおよび検査できます。