【Next.js】クライアントコンポーネントとサーバーコンポーネントの使い分けについて

Next.js は、サーバーサイドレンダリング (SSR) とクライアントサイドレンダリング (CSR) をサポートする React フレームワークです。このフレームワークでは、どのコンポーネントがサーバーでレンダリングされ、どのコンポーネントがクライアントでレンダリングされるかを適切に選択することが重要です。

サーバーコンポーネント (SSR)

サーバーコンポーネントは、ページの初期ロード時にサーバー上でレンダリングされます。これは、SEO最適化や初期ページロードのパフォーマンス改善に有効です。

例:

• ブログの記事: SEOに敏感なコンテンツであり、初期ページロード時にすべての内容が利用可能であるべきです。
• 静的なランディングページ: ユーザーにすばやく表示される必要があり、ページのコンテンツは頻繁に変更されません。

クライアントコンポーネント (CSR)

クライアントコンポーネントはブラウザで動的にレンダリングされます。これは、ユーザーインタラクションやリアルタイムのデータ更新が必要な場合に適しています。

例:

• インタラクティブなダッシュボード: リアルタイムで更新されるデータやインタラクティブな要素が含まれます。これらはクライアント側でレンダリングすることで、動的なユーザー体験を提供できます。
• コメントセクション: ユーザーからのリアルタイムのフィードバックを受け付ける場合、クライアント側で動的にレンダリングすると効果的です。

ハイブリッドレンダリング

Next.js では、同一ページ内で SSR と CSR を組み合わせることも可能です。例えば、ランディングページの静的なコンテンツはサーバーでレンダリングし、ユーザーのフィードバックフォームはクライアントでレンダリングすることができます。

このように、Next.js を使用する際には、ページの性質や必要な機能に基づいて、サーバーとクライアントのコンポーネントを適切に使い分けることが重要です。

実装例

Next.js におけるクライアントコンポーネントとサーバーコンポーネントの実装例を示します。ここでは、サーバーサイドでレンダリングされるコンポーネント（SSR）とクライアントサイドでレンダリングされるコンポーネント（CSR）のコード例を示します。

サーバーコンポーネント (SSR)

サーバーサイドでレンダリングされるコンポーネントは、Next.js の getServerSideProps 関数を使用してデータを取得します。この関数は、ページがリクエストされるたびにサーバー上で実行され、必要なデータをページコンポーネントに渡します。

例: ブログの記事を表示するコンポーネント

// pages/posts/[id].js
import { useRouter } from 'next/router';

function Post({ post }) {
  // コンポーネントの実装
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

// この関数はサーバー上で実行されます
export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://example.com/api/posts/${id}`);
  const post = await res.json();

  return { props: { post } };
}

export default Post;

この例では、ブログの個別記事を表示するために、記事の ID に基づいてサーバーサイドでデータを取得し、そのデータをページコンポーネントに渡しています。

クライアントコンポーネント (CSR)

クライアントサイドでレンダリングされるコンポーネントは、主に React の useState と useEffect フックを使用してデータを動的に取得します。

例: ユーザーのコメントを表示するコンポーネント

// components/Comments.js
import { useState, useEffect } from 'react';

function Comments() {
  const [comments, setComments] = useState([]);

  useEffect(() => {
    async function fetchComments() {
      const res = await fetch('https://example.com/api/comments');
      const data = await res.json();
      setComments(data);
    }

    fetchComments();
  }, []);

  return (
    <div>
      {comments.map(comment => (
        <div key={comment.id}>
          <p>{comment.text}</p>
        </div>
      ))}
    </div>
  );
}

export default Comments;

この例では、コメントデータをクライアントサイドで動的に取得し、それらを表示しています。useEffect フックは、コンポーネントがマウントされた後に API からコメントデータを取得するために使用されます。

これらの例は、Next.js における SSR と CSR の基本的な使い方を示しています。実際のアプリケーションでは、これらの手法を組み合わせて、最適なユーザーエクスペリエンスとパフォーマンスを実現することが可能です。