このバージョンの 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 (
    

      
Client-side Counter
      
The count value is: {count}
       setCount(count   1)}>Increment
    
  );
}

この古典的な例は、ユーザーがページと直接対話できるようにするカウンターです。 「使用クライアント」。ディレクティブは、このコンポーネントがブラウザーで実行されるように 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 (
    

      
Data from the Server
      
{data.message}
    
  );
}

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

Next.js の新機能

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

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

コンポーネントは、デフォルトで サーバー コンポーネントになりました。これは、クライアント コンポーネント.

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

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

3. きめ細かい制御

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

4. 水分補給の向上

Hydration は、サーバーから送信された静的 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 (
    

      
Product List (Server-rendered)
      

        {data.map((product: any) => (
          
{product.name}
        ))}
      
  );
}

// ClientComponent.tsx
'use client';

import { useState } from 'react';

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

  return (
    

       setSearch(e.target.value)}
        placeholder="Search product"
      />
      
Searching for: {search}
    
  );
}

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

結論

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

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