CLONE CODING

[Next.js] 3つのレンダリング方法 - SSR、CSR、SSG：長所と短所の分析

CloneCoding
Web / Next.js
2023年9月6日

ウェブアプリケーションを開発する際の主要な考慮点の一つは、コンテンツをユーザーにどのように提供するかです。ウェブページのレンダリング方法には複数の手法があり、それぞれには利点と欠点が存在します。本記事では、ウェブページのレンダリングにおける3つの主要な手法、すなわちSSR（サーバーサイドレンダリング）、CSR（クライアントサイドレンダリング）、およびSSG（静的サイト生成）について、初心者も理解できるよう詳細に解説します。

SSR(Server Side Rendering)を理解する

SSR（Server Side Rendering）は、ウェブページをサーバー上でレンダリングする方法を指します。

ユーザがウェブページにアクセスする際、サーバはページの内容を完全にレンダリングし、完成したHTML形式のページをユーザのブラウザに送信します。これにより、ブラウザは追加のJavaScriptの実行なしに、ページを即座に表示することができます。

SSR(Server Side Rendering)の動作プロセス

リクエスト：ユーザーがウェブページへのアクセスを要求すると、そのリクエストはサーバーに転送されます。
データ取得：サーバーはデータベースやAPIからページに必要なデータを取得します。
レンダリング：サーバーは取得したデータを用いてページを完全にレンダリングします。
レスポンス：サーバーはレンダリングされたページをユーザーに送信します。
表示：ユーザーのブラウザは、サーバーから受け取った完成されたページを画面上に表示します。

SSRの例：Next.jsを使用したシンプルなデモ

Next.jsは、SSRを容易に実装するツールを提供します。以下は、Next.jsを利用してシンプルなSSRを適用したページの例です。

1. データ取得関数の作成：まず、サーバーからデータを取得する関数を作成します。この例では、ランダムなデータを返す関数を使用します。

javascript

function fetchData() {
  return {
    title: "Next.jsとSSR",
    content: "Next.jsを利用したサーバーサイドレンダリングの理解"
  };
}

2. ページレンダリング： Next.jsでは、getServerSidePropsという関数を使用してサーバーからデータを取得し、このデータをページコンポーネントに渡すことができます。

javascript

export async function getServerSideProps() {
  const data = fetchData();
  return {
    props: { data }
  };
}

function HomePage({ data }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

export default HomePage;

上記の例では、getServerSidePropsはサーバー側でのみ実行され、この関数を通じて取得したデータはHomePageコンポーネントに渡されます。したがって、ユーザーはHomePageコンポーネントがレンダリングされた結果を直接確認することができます。

このように、Next.jsを使用すれば、数行のシンプルなコードでSSRを実装することが可能です。ページのロード速度を向上させたり、SEOを最適化したりするために、SSRは開発者にとって非常に有用なツールとなるでしょう。

SSR(Server Side Rendering)の利点と欠点

SSRは、ウェブアプリケーションのページをサーバー側でレンダリングする手法です。この方法は、特定の状況で大きな利点をもたらす一方で、いくつかの欠点も伴います。これを理解することで、SSRがご自身のプロジェクトに適しているかどうかの判断が容易になります。

SSRの利点

高速な初期ページロード時間：ユーザーは、必要な全てのデータとともにレンダリング済みのページを即座に受け取るため、初期ページのロード時間が高速です。これはユーザーエクスペリエンス（UX）を大いに向上させます。
SEOの最適化：検索エンジンのクローラは、JavaScriptが実行されない環境でもサーバー側でレンダリングされたページの内容を簡単に認識し、インデックス化することができます。これにより、SEOの効果が向上します。
効果的なキャッシング： SSRを利用すると、一度レンダリングされたHTMLページをキャッシュに保存し、同じリクエストが来た際にはキャッシュしたデータを使用して迅速に応答することが可能です。例えば、人気のブログ記事や頻繁に変更が行われない静的ページなどは、一度レンダリングされれば、その結果をキャッシュに保存し、後続のリクエストに対して迅速に応答することが可能となります。これにより、サーバーの負荷が軽減され、ユーザーには高速なページロード時間でコンテンツを提供できます。
ブラウザの互換性： JavaScriptベースのフロントエンドフレームワークを利用する場合、旧式のブラウザではサポートされていないJS機能が使用される可能性があります。SSRを利用すれば、サーバー側でページをレンダリングし、完成したHTMLをクライアントに提供するため、クライアント側のJavaScriptの実行に依存することなく、旧式のブラウザでもページが正しく表示されることを保証できます。

SSRの欠点

サーバーの負担：各ユーザーごとにページをレンダリングするため、サーバーに追加の負担がかかります。大量のトラフィックがある場合、サーバーの負荷が大きく増加する可能性があります。
開発の複雑さ：クライアントとサーバー間の相互作用がより複雑になる可能性があります。これは、開発やデバッグの複雑さを増加させる原因となります。
TTFB（Time to First Byte）の遅延：サーバーでのページレンダリング時間が追加されるため、初めてのデータがユーザーに到達するまでの時間がわずかに延長される可能性があります。

CSR(Client Side Rendering)を理解する

CSR(Client Side Rendering)は、サーバーサイドでページを予めレンダリングするのではなく、クライアント（すなわち、ユーザーのウェブブラウザ）でページをレンダリングする方式です。

ユーザーがウェブページにアクセスすると、サーバーは初期のHTML構造を提供せず、JavaScriptファイルのみを返します。ブラウザはこのJavaScriptを実行し、API呼び出しを通じて必要なデータを取得した後、ウェブページを構築します。

CSR(Client Side Rendering)の動作プロセス

要求: ユーザーがウェブページへのアクセスを要求すると、初期のHTMLはほとんど空です。代わりに、必要なJavaScriptとCSSが含まれています。
ダウンロード: ユーザーのブラウザは、必要なJavaScriptファイルとCSSをダウンロードします。
レンダリング: JavaScriptがダウンロードされ実行されると、必要なデータをAPIや他の外部ソースから取得します。その後、データに基づいてウェブページをクライアント側でレンダリングします。
表示: データがブラウザに到着すると、ウェブページは画面にレンダリングされたコンテンツを表示します。

この方法は、初回のローディング時間がやや長くなる場合がありますが、データやビューが変更されるたびにページ全体を再読み込みせずに変更された部分のみを更新することで、ユーザー体験をスムーズにします。

Next.jsはCSRを使用する際に必ず必要か？

CSRを実装する際、React.jsのみを使用しても十分です。しかし、Next.jsを使用することには、React.jsのみを使用するよりもいくつかの大きな利点があります。以下はNext.jsの主要な特徴と利点です：

ページベースのルーティング: Next.jsは、ファイルやフォルダ構造に基づいて自動的なルーティングを提供します。したがって、ルーターの設定をすることなく、ページ間の移動が簡単に行えます。
組み込みの最適化: Next.jsは自動的なコード分割、最適化された画像処理、グローバルCSSとモジュールCSSのサポートなど、多様な最適化機能を備えています。
APIルート: Next.jsは/pages/api内でAPIルートを作成することで、バックエンドのロジックを簡単に処理することができます。これにより、別のサーバーなしでAPIリクエストを処理することができます。
プラグインとコミュニティサポート: Next.jsは多種多様なプラグインと拡張機能をサポートし、大規模で活発なコミュニティの存在により、さまざまな問題の解決策やリソースが提供されます。

つまり、CSRのみが必要な場合、React.jsだけで十分ですが、Webアプリケーションの成長や拡張性、様々なレンダリング方法の要件、最適化機能などを考慮すると、Next.jsを使用することで多くの利点が得られます。

CSRの例：Next.jsを使用したシンプルなデモ

したシンプルな例

javascript

import { useEffect, useState } from 'react';

function HomePage() {
  const [data, setData] = useState({ title: '', content: '' });

  useEffect(() => {
    async function fetchData() {
      // ここで実際のデータをAPI呼び出しで取得できます。
      // この例ではsetTimeoutを使用して非同期処理をシミュレートしています。
      const mockData = await new Promise(resolve => {
        setTimeout(() => {
          resolve({
            title: 'CSRでレンダリングされたタイトル',
            content: 'CSRでレンダリングされた内容です。'
          });
        }, 1000);
      });
      setData(mockData);
    }

    fetchData();
  }, []);

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

export default HomePage;

このコードは、Next.jsプロジェクトでCSR方式でデータを取得してレンダリングする例です。useEffectとuseStateはReactのHooksであり、コンポーネントの状態管理やライフサイクルを管理するために使用されます。

コード内のuseEffectの中のfetchData関数は、ウェブページが最初にロードされるときに1回だけ実行され、非同期でデータを取得した後、そのデータを状態として設定します。そして、そのデータはコンポーネントでレンダリングされます。

CSR(Client Side Rendering)の利点と欠点

CSRは全てのレンダリング作業がブラウザ（クライアント側）で行われる方法を指します。このアプローチは、Webアプリケーションの動的な部分を処理するのに有効であり、特にSPA(Single Page Application)のような現代のWebアプリケーションでよく利用されます。

CSRの利点

高速なインタラクション: 初回の読み込み後は、全てのレンダリングリソースがクライアントにロードされているため、ユーザーとのインタラクションが非常に迅速です。つまり、ページ遷移、アニメーションなどのUIのインタラクションがスムーズに行われます。
サーバーの負荷軽減: サーバーは静的ファイル(JavaScript, CSS, HTML)のみを提供すればよいため、レンダリングの負荷が軽減されます。
フロントエンドとバックエンドの分離: データをAPIを通して取得する構造のため、フロントエンドとバックエンドの開発が独立して行うことができます。これにより、同時に開発を進めることができ、再利用性の高いコンポーネントベースの構造を容易に構築することができます。

CSRの欠点

初回ロードの遅延: クライアントは全てのJavaScriptファイルをダウンロードして実行しなければならないため、初期ページの読み込み速度が遅くなる可能性があります。
SEOの問題: 伝統的なWebクローラはJavaScriptの実行なしにHTMLの内容のみをスキャンするため、CSRで完全にレンダリングされたページの内容を認識するのが難しい場合があります。しかし、最近の検索エンジンはこの問題を解決するためにJavaScriptを実行できる機能を備えています。
ブラウザの負荷増: すべてのレンダリング作業がブラウザで行われるため、低スペックのデバイスやブラウザでは、パフォーマンスの低下が生じる可能性があります。
セキュリティの課題: クライアント側で処理されるコードはユーザーに完全に公開されるため、重要なロジックやデータをクライアント側で隠すのは難しいです。

これらの長所と短所を総合的に考慮すると、CSRは特定のWebアプリケーションで非常に効果的である可能性がありますが、使用する前に、そのアプリケーションの要件と一致するかどうかを確認することが重要です。

SSG(Static Site Generation)を理解する

SSG(Static Site Generation)とは、すべてのウェブページを事前に静的ファイルとして生成する方法を指します。

このように生成されたウェブページは、サーバーにリクエストするたびに同じファイルをクライアントに提供します。この方法は、ブログ、マーケティングのウェブサイト、ドキュメントサイトなど、内容が頻繁に変わらないウェブサイトに最適です。

SSG(Static Site Generation)の動作プロセス

ビルド時：開発者がウェブサイトをビルドする際、すべてのウェブページは事前に静的ファイルとして生成されます。この時、必要なデータは外部ソース（例：データベース、API）から取得して組み込みます。
リクエスト：ユーザーがウェブページへのアクセスをリクエストすると、このリクエストはサーバーまたはCDNに転送されます。
レスポンス：すでに生成された静的ファイルは直ちにユーザーに提供されます。追加のレンダリングやデータ取得の過程なしに、直接ファイルを受け取ります。
表示：ユーザーのブラウザは、サーバから受け取った静的ファイルを画面に表示します。

SSGの例：Next.jsを使用したシンプルなデモ

javascript

export async function getStaticProps() {
  const data = await fetchData(); // 外部からのデータ取得関数
  return {
    props: { data }
  };
}

function BlogPage({ data }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

export default BlogPage;

上記のコードは、Next.jsのSSG機能を活用してブログページを静的に生成する例です。getStaticProps関数はビルド時に実行され、データを取得し、そのデータを用いて静的ページを生成します。

SSG(Static Site Generation)の利点と欠点

SSGの利点

高速なロード速度：既に生成された静的ファイルを提供するため、サーバーの処理時間が不要であり、CDNを通じて世界中どこからでも迅速にコンテンツを提供できます。
SEOの最適化：事前に生成された静的ページはウェブクローラによく認識されるため、検索エンジン最適化に有利です。
低いサーバーコスト：動的処理が不要であるため、サーバーの負荷が軽減され、これによりホスティングコストが削減される可能性があります。
セキュリティ：静的ファイルのみを提供するため、多様なサーバーサイドの攻撃に対して安全です。

SSGの欠点

ビルド時間：大規模なウェブサイトの場合、すべてのページを生成するのに時間がかかることがあります。
リアルタイム更新の制限：内容が変更されると、ウェブサイトを再ビルドする必要があります。したがって、リアルタイムでデータが変更されるアプリケーションには適していないかもしれません。
動的処理の制約：ユーザーごとに異なる動作が必要な機能（例：ユーザーアカウント機能）は、クライアントサイドのロジックが別途必要です。

このように、SSGは特定の状況や要件に応じて非常に有効であることがあります。しかし、アプリケーションの特性や必要な機能を慎重に考慮し、適切なレンダリング方法を選択することが重要です。

Web開発において、レンダリングは非常に重要な役割を果たしています。SSR、CSR、そしてSSGはそれぞれの環境や要件に応じて優れた性能を発揮できます。一つの方法が全ての状況で最も優れているとは言えません。皆さんが開発するウェブサイトやアプリケーションの特性やユーザーの要求を正確に理解し、この記事で紹介された三つの方法の利点と欠点を検討して、最適な方法を選択することが重要です。

Web / Next.js カテゴリーの他の投稿

[Next.js] SSR、SSG、CSRを使用するのはいつか - 適切な利用ケースを探る	2023年9月7日
[Next.js] 3つのレンダリング方法 - SSR、CSR、SSG：長所と短所の分析	2023年9月6日
[Next.js] 環境変数を使用する簡単な方法	2023年8月11日