2種類のコンポーネント

Next.jsのコンポーネントは、サーバー側で描画されるサーバーコンポーネント（既定）と、ブラウザで動くクライアントコンポーネントに分かれます。useStateやonClickを使う部品には、ファイル先頭に'use client'と書きます。

サーバーでデータを取る

サーバーコンポーネントでは、コンポーネント関数の中で直接await fetch(...)が書けます。外部APIから取得したデータをそのままJSXに流し込めるのがNext.jsの強みです。

学ぶ目的

「動きが必要な部品だけ'use client'」という使い分けの感覚をつかみ、外部データを表示するページを作れるようになります。

• サーバーコンポーネントとクライアントコンポーネント
• 'use client'の意味
• fetchによるデータ取得と表示