Server Components｜基礎を学ぶ - ゆめさくコード

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

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

何も書かなければサーバー

App Router では、app/ の中に置いた部品は何も書かなければサーバーで動きます。これを Server Components と呼びます。特別な宣言も、特別な import も要りません。今まで書いてきた普通の関数のままです。

TypeScript (JSX)

export default function ItemList() {
  const items = getItems();
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

これで、商品を読む処理はサーバーで終わり、ブラウザには出来上がった HTML だけが届きます。

React実践の書き方と比べる

React実践では、同じことをするのに次のように書いていました。

TypeScript (JSX)

const [items, setItems] = useState<Item[]>([]);
useEffect(() => {
  setItems(getItems());
}, []);

最初は空の配列で1回描き、そのあと useEffect が動いて、もう一度描き直す。2度手間ですし、一瞬だけ空の一覧が見えます。サーバーで動く部品なら、この往復がまるごと要りません。空の状態を持たなくてよいのが、Server Components のいちばん分かりやすい効き目です。

サーバーで動く部品にできないこと

かわりに、使えなくなるものがあります。

useState と useEffect などのフック
onClick や onChange のようなイベントの受け取り
window や localStorage などブラウザだけにあるもの

どれもブラウザの中の話なので、サーバーには存在しません。これらが要る部品だけを、次のレッスンでブラウザ側に移します。

演習

一覧部品を、サーバーで動く形に書き直します。

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

何も書かなければサーバー

TypeScript (JSX)

export default function ItemList() {
  const items = getItems();
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

これで、商品を読む処理はサーバーで終わり、ブラウザには出来上がった HTML だけが届きます。

React実践の書き方と比べる

React実践では、同じことをするのに次のように書いていました。

TypeScript (JSX)

const [items, setItems] = useState<Item[]>([]);
useEffect(() => {
  setItems(getItems());
}, []);

サーバーで動く部品にできないこと

かわりに、使えなくなるものがあります。

useState と useEffect などのフック

onClick や onChange のようなイベントの受け取り

window や localStorage などブラウザだけにあるもの

どれもブラウザの中の話なので、サーバーには存在しません。これらが要る部品だけを、次のレッスンでブラウザ側に移します。

Server Components

何も書かなければサーバー

React実践の書き方と比べる

サーバーで動く部品にできないこと

演習

ヒント

Server Components

何も書かなければサーバー

React実践の書き方と比べる

サーバーで動く部品にできないこと

演習

ヒント