Ceeds Academy教材アプリ教材・症状語・タグで検索
索引グラフ試す
アプリFW/ライブラリ▸Next.js

Next.js: Server/Client Components とデータ取得

knowledge所要 25分最新草稿
前提: Next.js: App Router の基礎(ルーティング)
意味グラフ(この教材と内容的に近い教材・1ネスト)
例え(Analogies)
Server/Client=厨房と客席

Server Componentは「厨房で仕込む」(サーバーでデータ取得・軽い)、Client Componentは「客席で動く」(ボタン等の反応)。必要な部分だけ客席に出す。

概要

📍 app-frameworks ▸ Next.js ▸ Server/Client Components | 種別: knowledge | facts_as_of 2026-06(Next.js 16)

公式ドキュメント — knowledge

🎞 スライド

Server / Client Components

どこで動く?(テキスト図)

[Server Component](既定・軽い)
サーバーで実行 → await で直接データ取得
│ インタラクティブな部分だけ
▼
[Client Component]("use client")
ブラウザで実行 → useState / onClick が使える

使い分け

既定は Server(軽量)。state やイベントが要る所だけ Client。

—
出典(sources)

nextjs.org/docs (Server and Client Components / Data Fetching) ; Next.js 16 / 2026-06確認

確認問題(Review-Questions)
useStateを使いたいコンポーネントに必要な宣言は?記述
基礎公式
解答・解説▾ 開く

ファイル先頭に "use client"(Client Componentにする)。

Next.jsの既定のコンポーネント種別は?択一
基礎公式
解答・解説▾ 開く

Server Component。

目次
例え概要公式ドキュメント出典確認問題
鮮度
最新
更新: 2026-06-15
次回棚卸し: 2026-12-15
周期: 6か月
版: Next.js 16
Server/Client境界
Server/Client境界

概要

Next.js は既定で Server Components(サーバーで描画・軽い)。インタラクティブな部分は Client Components("use client")。データ取得はサーバーで行う。

公式ドキュメント準拠(Next.js 16)

// Server Component(既定): サーバーで実行、直接 await で取得
export default async function Page() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();
  return <main>{data.title}</main>;
}
// Client Component: 先頭に "use client"。useState 等が使える
"use client";
import { useState } from "react";
  • 既定は Server(軽い)。useState/onClick などは Client("use client")に。

出典: nextjs.org/docs: Server and Client Components

🧭 誤解訂正集

よくある誤解 正しい理解
全部 Client にする 既定は Server(軽量)。必要な部分だけ Client
Server で useState を使う インタラクティブは Client("use client")にする
データ取得は Client で行う データ取得はサーバー(Server Component)で

📖 用語

  • Server Component … サーバーで実行・描画する既定の部品(軽い)。
  • Client Component … ブラウザで動く部品(先頭に "use client")。
  • "use client" … その部品を Client にする宣言。
  • 副作用/インタラクティブ … useState・onClick 等、ブラウザでの状態/操作。

✅ 確認の目安(can-do)

Server/Client Components の違い(どこで動く・何ができる)を説明でき、**「この部品は Server のままか・Client にするか」**を判断できる。