Next.js 入門コース / レッスン 2
Server Components とデータ取得
デフォルトはサーバー
App Router のコンポーネントは既定で Server Component。サーバー側で実行されるため、async/await で直接データを取得でき、その分クライアントに送る JS が減ります。ボタンの onClick など対話が必要な部分だけ "use client" を宣言します。
app/courses/page.tsx（Server Component）
type Course = { id: number; name: string };
export default async function Courses() {
const res = await fetch("https://api.example.com/courses", {
next: { revalidate: 3600 }, // 1時間キャッシュ
});
const courses: Course[] = await res.json();
return (
<ul>
{courses.map((c) => <li key={c.id}>{c.name}</li>)}
</ul>
);
}
app/like-button.tsx（Client Component）
"use client";
import { useState } from "react";
export function LikeButton() {
const [n, setN] = useState(0);
return <button onClick={() => setN(n + 1)}>👍 {n}</button>;
}
使い分けの目安
「データ表示はサーバー、操作はクライアント」が基本方針。まず全部 Server Component で書き、state やイベントが必要になった箇所だけを小さな Client Component に切り出すと、パフォーマンスの良い構成になります。
✅ 理解度チェック
useState を使うコンポーネントに必要な宣言は？