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

Next.js のクライアントコンポーネントとサーバーコンポーネント

DDD

リリース： 2024-09-13 06:23:35

オリジナル

636 人が閲覧しました

Client vs Server Components in Next.js

このバージョンの Next.js では、クライアントコンポーネントとサーバーコンポーネントの概要、その違い、それぞれをいつ使用するかを検討し、それらを実装するのに役立つ実用的な例を提供します。プロジェクト。

Next.js のクライアントコンポーネントとサーバーコンポーネントとは何ですか?

Next.js では、クライアントコンポーネント と サーバーコンポーネント の間には明確な区別があります。この分離により、コードを処理する場所と方法についてより適切な決定を下せるようになり、パフォーマンスとユーザーエクスペリエンスに直接影響を与えることができます。

クライアントコンポーネント

クライアントコンポーネント はブラウザーで実行され、対話性とウィンドウやドキュメントなどのブラウザー API へのアクセスを可能にします。これらは、アプリケーションの動的インターフェイスを管理し、ユーザーのアクションに応答するのに最適です。

主な特徴:

ブラウザ (クライアント) で実行します。
useState や useEffect などのフックにアクセスできます。
フォームやボタンなどの動的なインタラクションを処理するために使用されます。
ユーザーのアクションに迅速に対応する必要がある場合に不可欠です。

クライアントコンポーネントの例:

'use client'; // Indicates that this component runs on the client

import { useState } from 'react';

export default function ClientComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Client-side Counter</h1>
      <p>The count value is: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

ログイン後にコピー

この古典的な例は、ユーザーがページと直接対話できるようにするカウンターです。「使用クライアント」。ディレクティブは、このコンポーネントがブラウザーで実行されるように Next.js に指示します。

サーバーコンポーネント

サーバーコンポーネント は Next.js アーキテクチャの新機能です。これらのコンポーネントはサーバー上で処理され、すでにレンダリングされた HTML をブラウザーに送信します。これにより、クライアントに到達する JavaScript の量が減り、最初のページの読み込みが高速化されます。

主な特徴:

サーバー上でレンダリングされます。
ウィンドウやドキュメントなどのブラウザ API や useState などの React フックにはアクセスできません。
データベースまたは外部 API と直接対話できます。
JavaScript の代わりに HTML をクライアントに送信することでパフォーマンスを最適化します。

サーバーコンポーネントの例:

export default async function ServerComponent() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());

  return (
    <div>
      <h1>Data from the Server</h1>
      <p>{data.message}</p>
    </div>
  );
}

ログイン後にコピー

この例では、コンポーネントはサーバー上でレンダリングされ、API からデータを取得して、レンダリングされた HTML を返します。これは、データ取得ロジックがクライアントに到達しないことを意味し、パフォーマンスが向上します。

Next.js の新機能

Next.js は、サーバーとクライアントのコンポーネントがどのように対話するかを改良します。最も注目すべき改善点のいくつかを以下に示します:

1.デフォルトのサーバーコンポーネント

コンポーネントは、デフォルトで サーバーコンポーネント になりました。これは、明示的に クライアントコンポーネント が必要でない限り、ブラウザに送信する JavaScript の量を減らしてアプリケーションが自動的に最適化することを意味します。

2. 最適化されたストリーミング

ストリーミングにより、コンポーネントを部分的に読み込むことができます。これは、すべてのコンテンツが利用可能になるのを待たずに、準備が整うとページのセクションを読み込むことができるため、大きなページやデータ量の多いページに役立ちます。

3. 詳細な制御

Next.js を使用すると、コンポーネントをサーバーで実行するかクライアントで実行するかを簡単に決定できるため、アプリケーションの最適化方法をより詳細に制御できるようになります。

4. 水分補給の向上

ハイドレーション は、サーバーから送信された静的 HTML をクライアント上のインタラクティブなページに変換するプロセスです。 Next.js を使用すると、水分補給がより効率的かつ選択的になり、絶対に必要な場合にのみ発生します。

クライアントコンポーネントとサーバーコンポーネントをいつ使用するか

次の場合にクライアントコンポーネントを使用します。

ユーザーインタラクティビティ: リアルタイムで応答するフォームやボタンなどのインタラクションを処理する必要がある場合。
状態管理: ショッピングカートなど、動的に変化するローカル状態の管理に最適です。
アニメーションと視覚効果: ユーザーインタラクションに基づいて更新されるアニメーションまたは効果に依存する場合。

次の場合にサーバーコンポーネントを使用します。

データベースクエリ: コンテンツを表示する前にデータベースからデータを取得する必要がある場合。
静的コンテンツ: コンテンツが頻繁に変更されず、対話性が必要ない場合に最適です。
SEO の改善: サーバーでレンダリングされたコンテンツが検索エンジンにアクセスしやすくなり、SEO が強化されます。

クライアントコンポーネントとサーバーコンポーネントを組み合わせる例:

// ServerComponent.tsx
export default async function ServerComponent() {
  const data = await fetch('https://api.example.com/products').then(res => res.json());

  return (
    <div>
      <h1>Product List (Server-rendered)</h1>
      <ul>
        {data.map((product: any) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

// ClientComponent.tsx
'use client';

import { useState } from 'react';

export default function ClientComponent() {
  const [search, setSearch] = useState('');

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

ログイン後にコピー

この例では、サーバーは製品のリストをレンダリングしてクライアントに送信しますが、検索コンポーネントは対話型でクライアント側で管理されます。