Zenn
👋

久しぶりに触るNext.js: サーバーコンポーネントについて

2024/12/20に公開
Next.js
React
tech

以前にNext.jsを使っていたときは、Page Routerが使われていました。App Routerやサーバーコンポーネントが登場してから学び直したいと思っており、ようやくThe Road to Next.jsを受講して学んでいます。

この記事では、The Road to Next.jsを通じて学んだサーバーコンポーネントについてまとめ、Next.jsの新しい仕組みに触れた感想を共有したいと思います。

サーバーコンポーネントとは？

まず、サーバーコンポーネント (Server Components) の概要について簡単におさらいします。

  • サーバーコンポーネントは、サーバー側でレンダリングされ、クライアントにHTMLとして送信されます。
  • クライアント側ではJavaScriptを必要とせず、これによりパフォーマンスの向上やSEOの改善が期待できます。
  • 一方で、クライアントコンポーネントは、従来通りクライアント側でレンダリングされ、インタラクションの管理や状態を持ちます。

Next.jsにおけるサーバーコンポーネントとクライアントコンポーネント

Next.jsでは、特に指定がない限り、すべてのコンポーネントがサーバーコンポーネントとして扱われます。その挙動について詳しく見ていきましょう。

サーバーコンポーネントがデフォルト

Next.jsでは、"use client"ディレクティブを指定しない限り、すべてのコンポーネントがサーバーコンポーネントになります。

// サーバーコンポーネント
export default function ServerComponent() {
  return <div>これはサーバーコンポーネントです</div>;
}

このコードでは、ServerComponentはサーバー側でレンダリングされます。

クライアントコンポーネントにするには

クライアントコンポーネントを作成する場合は、コンポーネントの先頭に"use client"ディレクティブを追加します。

"use client";

export default function ClientComponent() {
  return <div>これはクライアントコンポーネントです</div>;
}

"use client"を付けることで、このコンポーネントがクライアント側で動作するようになります。

親コンポーネントがクライアントコンポーネントの場合

注意点として、親がクライアントコンポーネントの場合、その子コンポーネントも自動的にクライアントコンポーネントとして扱われます。以下の例を見てみましょう。

"use client";

import ServerComponent from "./ServerComponent";

export default function ClientComponent() {
  return <ServerComponent />;
}

ClientComponentがクライアントコンポーネントであるため、ServerComponentもクライアント側でレンダリングされます。

childrenの場合は？

ただし、childrenはこのルールの例外です。childrenとして渡されたコンポーネントはそのままの設定（サーバーまたはクライアント）で動作します。

"use client";

export default function ClientComponent({ children }) {
  return <div>{children}</div>;
}

この場合、childrenがサーバーコンポーネントであれば、その部分は引き続きサーバー側でレンダリングされます。この柔軟性により、特定の部分だけをクライアント側で動かしたり、最適化を図ることが可能です。

まとめ

  • Next.jsは進化し続けており、特にApp Routerやサーバーコンポーネントの採用で大きな変化がありました。
  • サーバーコンポーネントをうまく使いこなすことで、パフォーマンスの向上や効率的な開発ができそうです。

The Road to Next.js」のコースを通じて学びながら、これからも得た知識や気づきを記事として投稿していきたいと思います。

この記事が皆さんの学びの一助になれば幸いです！

Discussion