サーバーでfetch｜基礎を学ぶ

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

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

取得のコードが短くなる

React でデータを出すときは、いつも同じ手順でした。空の入れ物を useState で用意し、useEffect の中で fetch を呼び、返ってきたら setState で入れ直す。取得のためだけに3つの仕組みを並べていたわけです。

Next.js のページはサーバーで動くので、この手順が要りません。ページの関数を async にして、return の前に await fetch と書くだけです。

TypeScript (JSX)

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 で取っている一覧を、サーバーで取る形に書き換えます。

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

取得のコードが短くなる

Next.js のページはサーバーで動くので、この手順が要りません。ページの関数を async にして、return の前に await fetch と書くだけです。

TypeScript (JSX)

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>;
}

なぜこれで足りるのか

消えるもの

書かなくてよくなるものを並べると、減った量がよく分かります。

"use client" の宣言

useState による空配列の用意

useEffect と依存配列

読み込み中フラグの出し入れ

そのうえ、組み立て終わった HTML が返るので、ソースを表示したときに商品名が入っています。第1章で見た SPA の弱点が、ここでひとつ解けます。

サーバーでfetch

取得のコードが短くなる

なぜこれで足りるのか

消えるもの

演習

ヒント

サーバーでfetch

取得のコードが短くなる

なぜこれで足りるのか

消えるもの

演習

ヒント