Server Components
何も書かなければサーバー
App Router では、app/ の中に置いた部品は何も書かなければサーバーで動きます。これを Server Components と呼びます。特別な宣言も、特別な import も要りません。今まで書いてきた普通の関数のままです。
export default function ItemList() {
const items = getItems();
return (
<ul>
{items.map((item) => (
<li key={item.id}>{item.title}</li>
))}
</ul>
);
}これで、商品を読む処理はサーバーで終わり、ブラウザには出来上がった HTML だけが届きます。
React実践の書き方と比べる
React実践では、同じことをするのに次のように書いていました。
const [items, setItems] = useState<Item[]>([]);
useEffect(() => {
setItems(getItems());
}, []);最初は空の配列で1回描き、そのあと useEffect が動いて、もう一度描き直す。2度手間ですし、一瞬だけ空の一覧が見えます。サーバーで動く部品なら、この往復がまるごと要りません。空の状態を持たなくてよいのが、Server Components のいちばん分かりやすい効き目です。
サーバーで動く部品にできないこと
かわりに、使えなくなるものがあります。
useStateとuseEffectなどのフックonClickやonChangeのようなイベントの受け取りwindowやlocalStorageなどブラウザだけにあるもの
どれもブラウザの中の話なので、サーバーには存在しません。これらが要る部品だけを、次のレッスンでブラウザ側に移します。
演習
一覧部品を、サーバーで動く形に書き直します。