Next.js Features

ServerComponents

サーバーサイドで実行されるReactコンポーネント

このページはServer Component
サーバーサイドで実行され、HTMLとしてクライアントに送信されます

サーバーから取得したデータ:

Timestamp:
2026-04-03T05:33:44.587Z
Environment:
production
Node Version:
v24.14.1
// Server Component は async 関数にできる export default async function Page() { const data = await fetchData(); // サーバーサイドで実行 return <div>{data}</div>; }
Server Components のメリット
パフォーマンスとセキュリティの向上

  • バンドルサイズ削減

    依存ライブラリがクライアントに送信されない

  • 直接データアクセス

    DBやファイルシステムに直接アクセス可能

  • セキュリティ向上

    APIキーやトークンがクライアントに露出しない

  • 高速な初期表示

    サーバーでHTMLを生成して送信

Server vs Client
使い分けのガイドライン

Server Component を使う場合

  • • データ取得が必要
  • • バックエンドリソースにアクセス
  • • 重い依存関係を使用
  • • インタラクションが不要

Client Component を使う場合

  • • イベントリスナーが必要
  • • useState/useEffect を使用
  • • ブラウザ API を使用
  • • リアルタイム更新が必要
Client Component の宣言
"use client" ディレクティブでClient Componentに変換

Server Component（デフォルト）

// 何も宣言しない = Server Component export default function Page() { return <div>Server で実行</div>; }

Client Component

"use client"; // ← これを追加 export default function Counter() { const [count, setCount] = useState(0); return <button onClick={...}> }
Next Steps
次のステップ

他のサンプルページもぜひご覧ください。

カタログを見る