Next.js のサーバーコンポーネントとクライアントコンポーネントの使用時期と使用方法-jsチュートリアル-php.cn

Server vs. Client Components in Next.js When and How to Use Them

Next.js 13 では React Server Components が導入され、開発者はコンポーネントをパフォーマンスのためにサーバー上で、または対話性のためにクライアント上でレンダリングする場所と方法を選択できるようになりました。この柔軟性により、速度と動的な機能を組み合わせたアプリを構築できます。

この記事では、基本だけでなく、動的で効率的なアプリを構築する際によく必要となる、クライアントコンポーネント内でサーバーコンポーネントを使用する方法についても詳しく説明します。

サーバーコンポーネントについて

サーバーコンポーネントは完全にサーバー上でレンダリングされ、クライアント側の JavaScript は必要ありません。これらは、ヘッダー、フッター、さらにはユーザーの操作を必要としないデータ駆動型コンポーネントなどの静的コンテンツに最適です。

例: 単純なサーバーコンポーネント

// app/components/Header.js
export default function Header() {
  return (
    <header>
      <h1>My Static Header</h1>
    </header>
  );
}

ログイン後にコピー

このコンポーネントはサーバー上でレンダリングされ、クライアント側の操作を一切含まないため、JavaScript の使用量が少なくなり、読み込みが速くなります。

サーバーコンポーネントの利点

JavaScript ペイロードの削減: サーバーコンポーネントにより、ブラウザに送信される JavaScript の量が削減されます。
データ取得の改善: サーバーコンポーネントはデータベースの近くでデータを取得できるため、ネットワーク遅延が減少します。

サーバーコンポーネントでのデータの取得

// app/components/PostList.js
export default async function PostList() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return (
    <ul>
      {posts.slice(0, 5).map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

ログイン後にコピー

この PostList コンポーネントはサーバー上のデータをフェッチし、事前にレンダリングされた HTML をクライアントに送信して、読み込み時間を短縮します。

クライアントコンポーネントを使用する場合

クライアントコンポーネントは、フォーム入力、イベントリスナー、動的コンテンツなどの対話性が必要な場合に不可欠です。これらのコンポーネントは、クライアント上で JavaScript を使用してユーザー操作を処理します。

例: インタラクティブ性のためのクライアントコンポーネント

// app/components/SearchBar.js
'use client';  // This makes the component a client component

import { useState } from 'react';

export default function SearchBar() {
  const [searchTerm, setSearchTerm] = useState('');

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search..."
      />
      <p>Searching for: {searchTerm}</p>
    </div>
  );
}

ログイン後にコピー

SearchBar は対話型であるため、クライアントコンポーネントである必要があります。 useState フックとその他の React フックは、クライアントコンポーネントでのみ使用できます。

サーバーコンポーネントとクライアントコンポーネントを組み合わせるユースケースがあるかもしれないので、次にその方法について説明しましょう:

サーバーコンポーネントとクライアントコンポーネントの結合

Next.js 13 の核となる強みは、サーバーコンポーネントとクライアントコンポーネントを組み合わせる機能です。ベストプラクティスは、デフォルトでサーバーコンポーネントを使用し、クライアントコンポーネントをコンポーネントツリーのできるだけ深いところにプッシュすることです。

例: サーバーコンポーネントとクライアントコンポーネントの結合

// app/layout.js
import SearchBar from './components/SearchBar';

export default function Layout({ children }) {
  return (
    <div>
      <header>My Blog</header>
      <SearchBar />  {/* Client component for interactivity */}
      {children}
    </div>
  );
}

ログイン後にコピー

SearchBar コンポーネントはクライアント側の対話性を処理しますが、レイアウトの残りの部分はサーバーでレンダリングされ、パフォーマンスと対話性のバランスが取れます。

逆に、クライアントコンポーネント内でサーバーコンポーネントを使用するユースケースも考えられます。その方法を確認してみましょう。

クライアントコンポーネント内でサーバーコンポーネントを使用する方法

サーバーコンポーネントはクライアントコンポーネント内にネストできますが、クライアントコンポーネントに直接インポートできないことを理解することが重要です。サーバーコンポーネントをクライアントコンポーネントに含めるには、2 つの間の境界が壊れないように、それを子またはプロップとして渡します。

例: サーバーコンポーネントをクライアントコンポーネントに渡す

サーバーコンポーネントが子としてクライアントコンポーネントに渡される実際の例を次に示します。

// app/components/Header.js
export default function Header() {
  return (
    <header>
      <h1>My Static Header</h1>
    </header>
  );
}

ログイン後にコピー

上記の例では:

プロファイル は、データを取得したり、静的コンテンツを表示したりするサーバーコンポーネントです。
ダッシュボード は、インタラクション (プロファイルの表示/非表示) を処理するクライアントコンポーネントです。
Profile サーバーコンポーネントは、子としてダッシュボードクライアントコンポーネントに渡されます。

このパターンでは、クライアント側の対話性を維持しながら、サーバーレンダリングの利点 (JavaScript の削減、パフォーマンスの向上) を利用できます。

サードパーティのライブラリとクライアントコンポーネント

認証プロバイダーや UI コンポーネントなどの多くのサードパーティライブラリは、クライアントコンポーネントでのみ使用できる React フックに依存しています。クライアントコンポーネント内にサードパーティライブラリをラップすることで、この制限を回避する方法は次のとおりです。

例: サードパーティのカルーセルの使用

// app/components/PostList.js
export default async function PostList() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return (
    <ul>
      {posts.slice(0, 5).map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

ログイン後にコピー

サードパーティの React-Slick カルーセルをクライアントコンポーネントでラップすることで、インタラクティブ性などのクライアント側の機能にアクセスしながら、サーバーでレンダリングされたページでそれを使用できます。

サーバーコンポーネントとクライアントコンポーネント間の小道具の処理

サーバーとクライアントのコンポーネント間でデータを受け渡す場合、props はシリアル化可能である必要があります (文字列、数値、ブール値など)。関数やクラスのインスタンスなどの複雑なオブジェクトは渡すことができません。

例: サーバーからクライアントへのデータの受け渡し

// app/components/SearchBar.js
'use client';  // This makes the component a client component

import { useState } from 'react';

export default function SearchBar() {
  const [searchTerm, setSearchTerm] = useState('');

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search..."
      />
      <p>Searching for: {searchTerm}</p>
    </div>
  );
}

ログイン後にコピー

UserCard クライアントコンポーネントは、サーバーコンポーネントから渡されたデータを動的にレンダリングしながら、すべてがシリアル化可能であることを保証し、サーバーとクライアントの境界を問題なく通過できるようになりました。

以上のことを踏まえて、ベストプラクティスでこれを締めくくるのは興味深いでしょう。次に進みましょう:

サーバーとクライアントのコンポーネント構成のベストプラクティス

サーバーとクライアントのコンポーネントを効果的に構成するためのヒントをいくつか紹介します。

デフォルトでサーバーコンポーネント: JavaScript の負荷を軽減し、パフォーマンスを向上させるために、静的コンテンツまたはデータ駆動型コンテンツには可能な限りサーバーコンポーネントを使用します。
対話性のためにクライアントコンポーネントを使用する: ユーザー対話またはブラウザー固有の API が必要な場合にのみ、クライアントコンポーネントを使用します。
クライアントコンポーネントをツリーの下に移動: クライアントコンポーネントをコンポーネントツリーのできるだけ深くにプッシュします。これにより、より多くのアプリがサーバー上でレンダリングされるようになり、パフォーマンスが向上します。
サーバーコンポーネントを子として渡す: サーバーコンポーネントをクライアントコンポーネント内で使用する必要がある場合は、直接インポートするのではなく、子またはプロップとして渡します。