asyncコンポーネント
await は1回だけではない
前回のページは await fetch を1つ書きました。書ける場所は1つに限られていません。ページの関数の中なら、return の前にいくつでも await を並べられます。
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 で取って表示します。