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 を使用すると、水分補給がより効率的かつ選択的になり、絶対に必要な場合にのみ発生します。

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

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

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

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

1. データベース クエリ: コンテンツを表示する前にデータベースからデータを取得する必要がある場合。
2. 静的コンテンツ: コンテンツが頻繁に変更されず、対話性が必要ない場合に最適です。
3. 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>
  );
}

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

結論

Next.js は、Web アプリケーションの開発方法における転換点となり、パフォーマンスとユーザー エクスペリエンスの両方を最適化します。 サーバー コンポーネント と クライアント コンポーネント を効率的に使用すると、より軽い初期負荷で高速で動的なアプリケーションを構築できます。

フレームワークの機能を最大限に活用するには、サーバー コンポーネント と クライアント コンポーネント を正しく選択することが重要です。これらの新しい改善により、情報に基づいた意思決定が容易になり、高速なだけでなくインタラクティブでスケーラブルなアプリケーションの作成が容易になります。

以上がNext.js のクライアント コンポーネントとサーバー コンポーネントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。