SSGとSSRの特徴と違い

React Next.js

SSGとSSRの違い

SSG（Static Site Generation）とSSR（Server-Side Rendering）は、ウェブページの生成方法に関する2つの異なるアプローチです。
それぞれの特徴と利点について説明します。

SSG（Static Site Generation）

特徴

ビルド時に生成:
静的サイトはビルド時に生成され、HTMLファイルとしてサーバーに保存されます。
高速:
クライアントがページをリクエストすると、既に生成されたHTMLファイルが即座に返されるため、ページの読み込みが非常に高速です。
キャッシュ:
静的ファイルはCDN（Content Delivery Network）にキャッシュされるため、地理的に分散したユーザーにも高速に配信できます。

利点

パフォーマンス:
事前に生成されたページはサーバーサイドの処理が不要で、即座に配信されるため、パフォーマンスが高い。
セキュリティ:
サーバーサイドの処理がないため、セキュリティリスクが低い。
コスト:
サーバーリソースをほとんど消費しないため、運用コストが低い。

欠点

動的コンテンツの制限:
コンテンツの更新があるたびにビルドとデプロイが必要となるため、動的なコンテンツには不向き。

SSR（Server-Side Rendering）

特徴

リクエスト時に生成:
ユーザーがページをリクエストすると、その都度サーバーでHTMLを生成し、返します。
動的コンテンツ:
ユーザーごとに異なるコンテンツを表示する場合や、リアルタイムデータを表示するのに適しています。

利点

SEO:
検索エンジンがインデックスしやすいHTMLが生成されるため、SEOに有利。
動的データ:
ユーザーごとに異なるデータをリアルタイムに表示できる。

欠点

パフォーマンス:
リクエストごとにサーバーでHTMLを生成するため、処理時間がかかり、パフォーマンスが低下する可能性がある。
サーバー負荷:
多数のリクエストを処理する必要があるため、サーバーリソースを多く消費する。

使い分けのポイント

静的コンテンツ:
ブログやドキュメントサイトのように頻繁に更新されないコンテンツにはSSGが適しています。
動的コンテンツ:
ユーザープロファイルやリアルタイムデータを表示するダッシュボードなど、頻繁に更新されるコンテンツにはSSRが適しています。

例

SSG:
Next.jsでgetStaticPropsを使用して静的なページを生成。
SSR:
Next.jsでgetServerSidePropsを使用してサーバーサイドで動的なページを生成。

用途に応じて適切な方法を選択することで、ウェブサイトのパフォーマンスとユーザー体験を最適化できます。

SSGで作成されたページには認証機能やAPI呼び出し処理は実装できるのか

SSG（Static Site Generation）で作成されたページにも認証機能やAPI呼び出し処理を実装することは可能です。
ただし、静的ページとして生成される性質上、その実装方法には工夫が必要です。
以下に具体的な方法を説明します。

認証機能の実装

1. クライアントサイド認証:

  • 静的ページが読み込まれた後に、クライアントサイドで認証を行います。

例えば、JWTトークンを使用した認証では、ページ読み込み後にトークンの有効性を確認し、適切なコンテンツを表示します。

  • 利点: 認証ロジックがクライアントサイドで行われるため、静的ページのビルドに影響を与えません。
  • 実装例:
useEffect(() => {
  const token = localStorage.getItem('token');
  if (token) {
    // トークンを検証し、ユーザー情報を取得
    fetch('/api/validateToken', {
      headers: {
        'Authorization': Bearer ${token}
      }
    })
    .then(response => response.json())
    .then(data => {
      if (data.valid) {
        setUser(data.user);
      } else {
        // トークンが無効の場合の処理
      }
    });
  }
}, []);

2. サーバーサイドAPIで認証:

  • 静的ページの生成時には認証情報を持たず、クライアントサイドで認証APIを呼び出してユーザー情報を取得します。
  • 利点: SSGの高速性を保ちながら、動的な認証を実現します。

API呼び出しの実装

1. クライアントサイドのAPI呼び出し:

  • ページが読み込まれた後に、必要なデータを取得するためにAPIを呼び出します。

これにより、静的ページのビルド時にはAPI呼び出しが不要になります。

  • 実装例:
useEffect(() => {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      setData(data);
    });
}, []);

2. 静的ページ生成時のデータフェッチ:

  • Next.jsのようなフレームワークでは、getStaticPropsを使用してビルド時にAPIからデータを取得し、静的ページに埋め込むことができます。

この方法では、データの更新がビルドごとに行われます。

  • 実装例:
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return {
    props: {
      data,
    },
  };
}

まとめ

SSGで生成されたページにも認証機能やAPI呼び出し処理を実装することは可能です。
静的ページの特性を活かしながら、クライアントサイドでの処理を活用することで、動的な機能を追加することができます。
認証情報や動的データの扱い方を工夫することで、静的サイトの高速性とセキュリティを維持しつつ、必要な機能を提供できます。