asyncコンポーネント｜基礎を学ぶ

Next.jsフルスタック：サーバー・データ取得・API

Server ComponentsとClient Components、use client、サーバーfetch、asyncコンポーネント、動的ルート、params、notFound、キャッシュ、Route Handler、GET・POST API、Server Actions、フォームを扱う全24レッスンのフルスタックコースです。fleamaの商品取得と出品機能をNext.js内へ実装します。

await は1回だけではない

前回のページは await fetch を1つ書きました。書ける場所は1つに限られていません。ページの関数の中なら、return の前にいくつでも await を並べられます。

TypeScript (JSX)

export default async function HomePage() {
  const listRes = await fetch("/api/items");
  const items = await listRes.json();

  const pickupRes = await fetch("/api/items/2");
  const pickup = await pickupRes.json();

  return <div>{pickup.title}</div>;
}

普通の関数と同じ読み方でよい

ここが Next.js のページの気楽なところです。上から順に読めば何をしているか分かります。取得が2つあれば2行、3つあれば3行になるだけで、順番も分岐も普通の JavaScript のままです。

ブラウザ側で同じことをすると、状態が2つ、useEffect が2つ、読み込み中の判定が2つに増えていきました。取得が増えるほど読みにくくなっていたのは、非同期を状態で表そうとしていたからです。

気を付けること

await を縦に並べると、上の取得が終わってから下の取得が始まります。互いに関係のない取得なら、待ち時間がそのぶん足し算になります。

関係が無いと分かっているときは Promise.all でまとめて待てます。今日は形を覚えるところまでにして、まずは縦に並べる書き方を身に付けます。

演習

一覧に加えて、注目商品の詳細を await で取って表示します。

Next.jsフルスタック：サーバー・データ取得・API

await は1回だけではない

TypeScript (JSX)

export default async function HomePage() {
  const listRes = await fetch("/api/items");
  const items = await listRes.json();

  const pickupRes = await fetch("/api/items/2");
  const pickup = await pickupRes.json();

  return <div>{pickup.title}</div>;
}

普通の関数と同じ読み方でよい

気を付けること

await を縦に並べると、上の取得が終わってから下の取得が始まります。互いに関係のない取得なら、待ち時間がそのぶん足し算になります。

関係が無いと分かっているときは Promise.all でまとめて待てます。今日は形を覚えるところまでにして、まずは縦に並べる書き方を身に付けます。

asyncコンポーネント

await は1回だけではない

普通の関数と同じ読み方でよい

気を付けること

演習

ヒント

asyncコンポーネント

await は1回だけではない

普通の関数と同じ読み方でよい

気を付けること

演習

ヒント