サーバーでfetch
取得のコードが短くなる
React でデータを出すときは、いつも同じ手順でした。空の入れ物を useState で用意し、useEffect の中で fetch を呼び、返ってきたら setState で入れ直す。取得のためだけに3つの仕組みを並べていたわけです。
Next.js のページはサーバーで動くので、この手順が要りません。ページの関数を async にして、return の前に await fetch と書くだけです。
export default async function HomePage() {
const res = await fetch("/api/items");
const items = await res.json();
return <ul>{items.map((item) => <li key={item.id}>{item.title}</li>)}</ul>;
}なぜこれで足りるのか
useState と useEffect は「あとから届いたものを画面に反映する」ための道具です。ブラウザで動く部品は、まず表示してから通信するしかないので、届いたことを知らせる仕組みが要りました。
サーバーで動くページは順番が逆です。データが揃ってから HTML を組み立てて送るので、届く前の空の状態そのものが存在しません。届いたことを知らせる相手がいないので、状態も副作用も要らなくなります。
消えるもの
書かなくてよくなるものを並べると、減った量がよく分かります。
"use client"の宣言useStateによる空配列の用意useEffectと依存配列- 読み込み中フラグの出し入れ
そのうえ、組み立て終わった HTML が返るので、ソースを表示したときに商品名が入っています。第1章で見た SPA の弱点が、ここでひとつ解けます。
演習
useEffect で取っている一覧を、サーバーで取る形に書き換えます。