Next.jsのベストプラクティス（コンポーネント編）

まずコンポーネントって何？

コンポーネントとはアプリを構成する部品のことです。Webサイトはいろいろな部品から成り立っており、コンポーネント化することでその部品を再利用することができます。

Next.jsでは部品が作られる場所が重要

• クライアント側なのか？サーバー側なのか？

クライアント側はサーバー側にデータが欲しいとリクエストを送ります。Next.jsはサーバー側（サーバー側に近いクライアント）とクライアント側（クライアント側に近いクライアント）があり、サーバーに近いことでデータのやり取りがしやすいです。またクライアント側で画面を切り替えるだけの時はサーバーとやり取りがあまりないです。この2つの場合をどのようにコードに落とし込んだらいいのかを説明します。

Server Component

Server Componentを使うときには、デフォルトでServer Componentになります。

ユースケース

• 非同期処理を使うとき。サーバーからリクエストを送る場合、Server Componentではasync/awaitなどを使うことが可能です。

Client Component

Client Componentを使うときは、ファイルの先頭に"use client"をつけます。Client Componentはあまり使わない方がいいです。

ユースケース

• Hooksを使う時：useState, useEffect, useRefなど、これらはクライアント側で状態を管理するため、サーバー側では管理できないものです。
• イベントハンドラーを使う時：onClick, onChangeなどはクライアント側で動くもので、サーバーとは関係のない動きをします。
• ブラウザーのAPIを利用する時：localStorage / sessionStorage, window / documentを使う時です。
• クライアント操作が多い時：フォームコンポーネント、検索コンポーネント、タブ切り替えやハンバーガーメニュー開閉（真偽値）など。

注意点：Client Boundary

• Client Componentの子コンポーネントは自動的にClient Componentになります。そのため、意図しないClient Componentに注意が必要です。　

→対策：Compositionパターンで回避できます。

ベストプラクティス

• サーバーコンポーネントを積極的に使う。クライアントコンポーネントは控えめに！