LESSON 09 · 約30分

必要なデータを取得する

取得先、待ち時間、失敗の扱いまでをセットで考えます。

コードを試す前に

基本演習はApp Router・JavaScript/JSX・Cache Components無効で進めます。11の有効化例は独立した発展実験です。01〜04は先に読んで、コードの実行は05の環境構築後に戻って試せます。

短い学習用の例です。各例は段階ごとの独立した例であり、全コードを一つのプロジェクトへ順に上書きして完成する形式ではありません。必要なファイル・依存関係・前提条件は注記に記載しています。

開発環境の準備を確認する →

このレッスンでわかること

asyncなServer Componentでデータを使える
取得の失敗と空の結果を区別できる

表示に必要な場所で読む

Server Componentはasync関数にでき、fetchやサーバー側のデータ層を呼べます。自分のサーバーの処理を使うためだけに、必ず自分自身のHTTP APIを経由する必要はありません。まず読み取り関数を分離しましょう。

取得できたか、形は正しいか

fetchは404や500の応答でも通常はrejectされないため、response.okで成功を確認します。必要ならデータの形式も検証します。0件は正常な結果、通信の失敗は異常、権限不足は別の状態としてUIを設計します。

速くする前に、依存関係を見る

独立した処理なら並行実行を検討できます。ただしAの結果がBに必要なら順番があります。同じリクエスト中の重複排除と、リクエストをまたいだキャッシュは別の仕組みです。fetchは常に自動で永続キャッシュされる、と覚えないでください。

公開APIの取得を関数に分ける

app/notes/page.jsx

async function getPosts() {
  const response = await fetch('https://api.vercel.app/blog')
  if (!response.ok) throw new Error('記事を取得できませんでした')
  return response.json()
}

export default async function NotesPage() {
  const posts = await getPosts()
  if (posts.length === 0) return <p>記事はまだありません。</p>

  return (
    <main>
      <h1>記事一覧</h1>
      <ul>{posts.map((post) => <li key={post.id}>{post.title}</li>)}</ul>
    </main>
  )
}

公式ドキュメントでも使われる公開サンプルAPIです。通信環境と外部APIに依存します。Cache Componentsを有効にした構成では、レッスン10のSuspense境界かレッスン11のキャッシュ方針も必要です。 07の固定データの一覧とは別の実験です。17のテストを行う際は07の一覧へ戻します。

TRY IT YOURSELF

成功以外の状態を作る

取得関数が空配列を返す場合を試す
意図的に例外を投げる場合を試す
読み込み中・0件・失敗に何を表示するか書く

できたらOK：通信成功だけでなく、3つの状態を説明できる

QUICK CHECK

理解を確かめよう

公式資料でもう少し詳しく

ここまで読めたら、ひとつ前進。