【Next.js】use clientとuse serverの違いについて詳しく解説

はじめに

今回は、Next.jsで追加されたuse clientとuse serverの違いについて説明していきます！

基本内容

Next.jsはReactのフレームワークの一つであり、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）をサポートしています。

use clientとは

use clientは、クライアントサイドでのみ実行されるコードを指定するために使用されます。例えば、useStateなどのReactフックはuseClientコンポーネント内でしか使用できません。デフォルトでは、Next.jsのファイルはサーバーコンポーネントとして認識されているため、以下のように書くとエラーが発生します。

import { useState } from 'react';

export const Test = () => {
  const [count, setCount] = useState(false);
  return(
    <>
        <div>カウント:{count}</div>
    </>
  
  )
}

この場合、ファイルの先頭に"use client";を追加して、クライアントコンポーネントであることを明示する必要があります。

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

export const Test = () => {
  const [count, setCount] = useState(false);
  return(
    <>
        <div>カウント:{count}</div>
    </>
  
  )
}

従来のNext.jsでは、すべてのファイルがクライアントコンポーネントとして認識され、サーバーサイドのコードはバックエンドに分離されていました。しかし、Next.js 13ではこの点が変更され、より柔軟なフルスタック開発が可能になりました。

use serverとは

use serverは、サーバーサイドでのみ実行されるコードを指定するために使用されます。
use serverの特徴は、フロントエンドのコード内でサーバーサイドの処理を記述できることです。これにより、Next.jsだけでフルスタック開発を完結させることが可能です。
メリット、デメリットは以下の通りになります。

メリット

①APIを叩く必要がない
　従来は、フロントエンド側でAPIを呼び出し、サーバー側でデータを処理していました。しかし、Next.js内でサーバーサイドのコードを書くことで、APIエンドポイントを作成する必要がなくなります。

②直接ブラウザ側でPrisma（データベース）の操作が可能
　クライアントサイドから直接データベースとやり取りできるため、データフェッチや操作がシンプルになります。

③フォームタグのactionイベントは、JavaScript環境がなくても動作
　JavaScriptが無効な状態でも、HTMLのフォーム送信が正常に動作します。これは、クライアントとサーバー間のHTML要素が返される際に、JavaScriptのイベントハンドラが有効になる前でも、actionイベントがHTMLとして自動的に動作するためです。

デメリット

①役割の曖昧さ
　以前はフロントエンドとバックエンドで明確に分離されていた役割が、クライアント側でサーバーの処理を書くことで曖昧になり、従来のWeb開発のスタイルに逆戻りしているように感じます。

まとめ

use clientとuse serverは、それぞれクライアントサイドとサーバーサイドでの動作を制御するための重要なフックです。これらを適切に使い分けることで、パフォーマンスの向上やSEO対策、ユーザー体験の向上を図ることができます。Next.jsを活用して、効率的なフルスタック開発を実現しましょう！