はじめに
Next.jsをつかってフロントエンドの開発をする際に、どうやらこの2つは意識して書きわけたほうがいいことに気づいた。
また、この2つを厳密にかかないと赤文字で警告されｲﾗｯ💢ときたため、きもちよく心持ちにするためにもこのあたりを整理しようと思う。
🧠サーバーコンポーネントってなんですの？
React18以降で必須の概念で、18以降の登場した新手のモンスターですね。ブラウザではなく「サーバー上で実行されるReactコンポーネント」です。
Next.js 13+ ではデフォルトでこの形式になるようです。
画面表示するデータ取得（DB、API）をサーバでやってしまえちゃいます。クライアントに余計なJsが送られることなく、表示が早くなります。
🖐️クライアントサイドコンポーネントってなんですの？
同じみ、Reactコンポーネントです。useStateetc...
状態管理・イベント・ユーザー操作といったものを指します。
</>それぞれどんな感じなのか？
サーバーコンポーネントはこんなかんじ。
DBにアクセスできる処理だったり、データを加工してがちゃがちゃする処理とか含める感じですよね。
import { getUser } from '@/lib/db';
export default async function Page() {
const user = await getUser(); // DBアクセスできる！
return <h1>Hello, {user.name}</h1>;
}
一方で、クライアントコンポーネントはこんなかんじ。
'use client'; // 大事
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}
use clientと記述することでクライアントコンポーネントですよ！って明示できちゃうんです。
個人的に本や動画教材などでは、あんまりこれをどこで応用するのかピンとこなかったんですが、ここで使うのか！って理解しました。
コードの読み手にも、伝わる内容になっていいですよね。
こいつはどっちになるんだ？と迷ったら
ここはあくまで主観ですが、use clientをつけるかつけないか迷った時、自分はこう考えています。
→ どこで動かしたい？何を動かしたい？
例：
- DBやAPIでデータを取得したい（コンテナ層的な考え？）なら
use clientをつかわない！ - ボタンをクリックしたいなら
use clientをつかう！
ここを自分の中に問うことでクリアになっていくのではないでしょうか？
おわりに
どこまでクライアントにするのか、そもそもサーバーコンポーネントを活用するべきか？
SEOとかを意識しているの？初期表示速度あげたいの？なども検討の上でサーバーコンポーネントを扱っていきたいですね。