Next.jsで「use client」と「use server」を使い分けることで、効率的にアプリケーションを構築することができます。それぞれの役割と使い方を整理し、Reactフックを使う際の注意点についてまとめてみました。
1. "use client"
use clientは、クライアントサイドで実行する必要があるコンポーネントに指定します。この指示を使うことで、ユーザーのインタラクションが可能なコンポーネントを構築できます。
主な特徴と役割
useStateなどの多くのReactフックは、use client指定のコンポーネント内でのみ利用可能です。
クライアントサイドで実行が必要なReactフック
useState: 状態管理のためのフックで、クライアント側での実行が前提。
useReducer: useState同様。
useEffect: DOM操作やAPIリクエストなどの副作用を処理。サーバーサイドにはDOMがないため、クライアントサイドでのみ利用。
useRef: DOM要素への参照やレンダリング間で変わらない値の保持。DOMがクライアント側でのみ利用可能なため。
useLayoutEffect: DOMの変更がレイアウトに与える影響を処理するフック。DOMのレンダリング直前に呼び出され、サーバー側では効果がないため、クライアントサイドでのみ使用。
使い方
クライアントサイド専用コンポーネントでは、ファイルの最初に"use client"と記述します。これにより、クライアントサイドで実行されるコンポーネントとしてマークされます。
// ファイルの最初に "use client" を記述
"use client";
import { useState, useEffect, useRef, useReducer, useLayoutEffect } from 'react';
function MyComponent() {
const [state, setState] = useState(0);
const ref = useRef(null);
useEffect(() => {
// 副作用の処理
}, []);
return (
<div ref={ref}>
<p>State: {state}</p>
<button onClick={() => setState(state + 1)}>Increase</button>
</div>
);
}
export default MyComponent;
2. 「"use server"」
非同期関数内の冒頭に**"use server"**を追加することで、クライアントから実行可能であることをマークできます。
このような関数をサーバーアクション（Server Action）と呼ばれます。
// 以下サーバーアクション
async function example(data) {
'use server';
// 関数本体...
}
関数すべてにuse serverを指定する代わりに、ファイル冒頭に指定することもできます。
その場合は、そのファイル内のすべての関数がサーバーアクションとしてマークされます。
※非同期関数のみしか指定できない。
まとめ
エラーがでたからuse clientを追加するのはやめて、なぜ必要なのか理解してよりよい開発をしていきたいと思います。