← Next.js コース
9. Server Components — サーバーでHTMLを作る
App Router のコンポーネントは、何も書かなければサーバー側で実行され、HTML に変換されてからブラウザに届く Server Component になります。これまでのレッスンで書いた page.tsx や layout.tsx は、すべて Server Component です。
サーバーで HTML を作る利点は2つあります。ブラウザに送る JavaScript が減るので表示が速くなることと、データベースの接続情報や API キーなどの秘密をブラウザに見せずに使えることです。
つまずきやすいのは console.log の出る場所です。Server Component はサーバーで動くので、ログはブラウザの開発者ツールではなく、npm run dev を実行しているターミナルに出ます。
サンプルコード(フレームワーク環境が必要なため表示のみ)
// app/page.tsx — 何も書かなければ Server Component
export default function HomePage() {
// ここはサーバーで実行される。
// このログはブラウザではなくターミナルに出る。
console.log("サーバーでレンダリング中");
const now = new Date().toLocaleString();
return (
<main>
<h1>ようこそ</h1>
<p>このHTMLはサーバーで {now} に作られました。</p>
</main>
);
}