先生と生徒の会話形式で理解しよう

生徒

「Next.jsって、サーバーとブラウザのどっちで動いているんですか？」

先生

「Next.jsは、サーバーで動く部分と、ブラウザで動く部分の両方を持っています。」

生徒

「データベースは、どこでつなぐのが正しいんでしょうか？」

先生

「その答えが、Server ComponentsでDB接続を行う理由につながります。」

1. Next.jsのServer Componentsとは何か

Next.jsのServer Componentsとは、サーバー側で実行される部品のことです。サーバーとは、インターネットの向こう側にあるコンピューターで、ページの内容を作ってから利用者に送ります。反対に、ブラウザで動く部品は、あなたのパソコンの中で実行されます。

Server Componentsは、画面を表示する前にサーバーで処理が終わるため、重たい作業や大切な情報を扱う処理に向いています。

2. データベース（DB）とは何かを簡単に理解しよう

データベースとは、たくさんの情報を整理して保存しておく場所です。住所録やノートを何冊も管理する代わりに、巨大な引き出しにきれいに収納しているイメージです。

会員情報や商品一覧など、大事な情報はデータベースに保存されます。そのため、勝手に見られたり、書き換えられたりしないように注意が必要です。

3. なぜServer ComponentsでDB接続をするのか

データベースには、利用者に見せてはいけない情報も含まれています。 Server Componentsはサーバーでしか動かないため、データベースの接続情報が外に漏れる心配がありません。

もしブラウザ側でDB接続をすると、接続情報が画面の裏側から見えてしまう危険があります。これを防ぐため、Next.jsではServer ComponentsでDB接続を行うのが基本です。

4. Server ComponentsでのシンプルなDB取得例


import { db } from "./db";

export default async function Page() {
  const users = await db.getUsers();

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

（サーバーでデータを取得し、画面には名前の一覧だけが表示されます）

この例では、データベースから情報を取り出す処理がすべてサーバーで行われています。ブラウザには結果だけが送られるため、安全で効率的です。

5. パフォーマンスが良くなる理由

Server ComponentsでDB接続をすると、ページの表示が速くなります。なぜなら、データ取得と画面作成をサーバーでまとめて行えるからです。

利用者のパソコンは、完成した画面を受け取るだけなので、古いパソコンや通信環境が弱くても安心です。

6. Client Componentsとの役割分担

Next.jsにはClient Componentsという、ブラウザ側で動く部品もあります。これは、ボタンを押したときの動きなど、画面の操作に向いています。


"use client";
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

（ボタンを押すたびに数字が増えて表示されます）

データベース操作はServer Components、画面操作はClient Componentsと分けることで、アプリ全体が分かりやすくなります。

7. Server Componentsで安全に条件付き表示をする例


import { db } from "./db";

export default async function Page() {
  const isLogin = await db.checkLogin();

  return (
    <div>
      {isLogin ? <p>ログイン中です</p> : <p>ログインしてください</p>}
    </div>
  );
}

（ログイン状態に応じて表示内容が変わります）

このように、サーバーで判断した結果だけを表示できるのも大きな特徴です。

8. Server ComponentsでDB接続する設計の考え方

Server Componentsは、裏方として働く存在です。利用者には見えない場所で、データの取得や整理を行います。

大事な処理をサーバーに任せることで、安心して使えるWebサイトを作れます。これが、Next.jsでServer ComponentsとDB接続を組み合わせる最大の理由です。

まとめ

ここまで、Next.jsのServer Componentsとデータベース接続について、基礎から丁寧に見てきました。 Next.jsは、サーバーで動く部分とブラウザで動く部分を明確に分けて考えられるのが大きな特徴です。特にServer Componentsは、画面が表示される前にサーバー側で処理を完了できるため、データベース接続のような重要で慎重に扱う必要がある処理にとても向いています。

データベースには、会員情報やログイン状態、管理者だけが扱うデータなど、利用者に直接見せてはいけない情報が数多く保存されています。これらをブラウザ側で処理してしまうと、意図せず情報が漏れてしまう危険があります。 Server ComponentsでDB接続を行う設計にすることで、接続情報や内部処理を完全にサーバーの中に閉じ込めることができます。その結果、安全性が高く、安心して運用できるWebアプリケーションを作れるようになります。

また、Server Componentsを使うことで、パフォーマンス面でも大きなメリットがあります。サーバー側でデータ取得と画面生成をまとめて行うため、ブラウザは完成したHTMLを受け取るだけで済みます。これにより、通信量が減り、表示速度が向上します。古いパソコンや通信環境が不安定な場合でも、快適にページを表示できるのは大きな利点です。

一方で、すべてをServer Componentsにすればよいわけではありません。ボタンを押したときの反応や、画面上での細かな動きはClient Componentsが得意です。 Next.jsでは、データベース操作や認証チェックなどの裏側の処理はServer Components、ユーザー操作に関わる部分はClient Componentsというように役割分担する考え方が重要になります。この分け方を意識することで、コードの見通しが良くなり、保守もしやすくなります。

実際の開発では、Server Componentsで取得したデータを元に、必要最小限の情報だけを画面に渡す設計を心がけることがポイントです。これにより、セキュリティと使いやすさの両方を高いレベルで保つことができます。 Next.jsの基本を理解し、Server ComponentsとDB接続の役割を正しく使い分けることが、安全で高速なWebサイトやWebアプリケーションを作る第一歩と言えるでしょう。

Server Componentsでの処理イメージ例


import { db } from "./db";

export default async function Page() {
  const posts = await db.getPosts();

  return (
    <div>
      {posts.map(post => (
        <p key={post.id}>{post.title}</p>
      ))}
    </div>
  );
}

（サーバー側で記事データを取得し、タイトルだけが画面に一覧表示されます）

このように、Server Componentsではデータ取得から表示内容の決定までを一気に行えます。ブラウザ側には結果だけが渡るため、構造がシンプルで理解しやすくなります。

先生と生徒の振り返り会話

生徒

「Server ComponentsでDB接続をする理由が、少しずつ分かってきました。ただ、最初は全部サーバーでやったほうが楽そうにも感じます。」

先生

「そう感じるのは自然ですね。でも、画面の動きや操作はClient Componentsのほうが得意です。それぞれの役割を意識することが大切ですよ。」

生徒

「データベースやログイン判定はServer Components、ボタンや入力欄はClient Components、という考え方ですね。」

先生

「その通りです。 Next.jsは、その分担をとても自然に書ける仕組みを持っています。まずは安全な設計を意識することが、結果的に良いアプリにつながります。」

生徒