サーバーで動く部品｜基礎を学ぶ

動く場所が2つある

React実践までは、書いたコードが動く場所は1つでした。ブラウザです。ページを開くと JavaScript が届き、ブラウザの中で部品が組み立てられ、そこで初めて画面になります。

Next.js では場所が2つになります。サーバーとブラウザです。同じ JSX を書いていても、その部品がどちらで動くかで、できることが変わります。

自分のパソコンで開発サーバーを動かしているとき、部品の中に console.log("ここ") を1行入れてみます。

export default function ItemList() {
  console.log("ItemList が動いた");
  return <ul>...</ul>;
}

このログがターミナルに出たなら、その部品はサーバーで動いています。ブラウザの開発者ツールのコンソールに出たなら、ブラウザで動いています。両方に出ることもあります。この1行だけで、自分の書いた部品がどちらの世界にいるかが分かります。

サーバーで動く部品は、データベースを直接読めます。API の鍵のような、他人に見られては困る文字も安全に扱えます。そのかわり、押されたことに反応する仕組みは持てません。ボタンを押すのはブラウザの中の出来事だからです。

ブラウザで動く部品はその逆です。クリックも入力も受け取れますし、useState で値を持てます。そのかわり、書いたコードは全部ブラウザに届くので、鍵は置けません。

実際にコードを移す前に、部品ごとに「どちらで動くべきか」を決めておきます。判断のもとになるのは1つだけで、押す・入力する・値を持ち続ける、のどれかがあるかです。あるならブラウザ、無いならサーバーです。

次のレッスンから、この仕分けを実際のコードで表現していきます。

fleama の部品を、サーバーとブラウザに仕分ける表を作ります。