【SSR】サーバーサイドレンダリング 初心者必見！ゼロから学べる実践入門

サーバーサイドレンダリング（SSR）とは？

サーバーサイドレンダリング（SSR）とは、WebページのHTMLをサーバー側で生成し、クライアントに送信する手法です。
これにより、初回ロード時のパフォーマンスが向上し、SEO（検索エンジン最適化）にも有利になります。

SSRのメリット

SEOの向上: 検索エンジンが完全なHTMLをインデックスしやすくなる。
初回ロードの高速化: クライアント側でのJavaScriptの実行を待たずに表示が可能。
セキュリティ: サーバー側でデータを処理するため、クライアント側でのセキュリティリスクが減少。

Node.jsインストール

.Next.jsのセットアップ

npx create-next-app@latest my-ssr-app
cd my-ssr-app
npm run dev

このコマンドでNext.jsの新しいプロジェクトが作成され、ローカルサーバーが起動します。http://localhost:3000にアクセスして、デフォルトのページが表示されることを確認してください。

基本的なSSRの実装

Next.jsでは、ページコンポーネント内でgetServerSideProps関数を使うことで、SSRを実現できます。

.pages/index.js

// pages/index.js
export default function Home({ data }) {
  return (
    <div>
      <h1>サーバーサイドレンダリングの例</h1>
      <p>{data.message}</p>
    </div>
  );
}

export async function getServerSideProps() {
  // サーバー側でのデータフェッチング
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

getServerSideProps関数は、ページがリクエストされるたびに実行され、サーバー側でデータをフェッチしてページコンポーネントに渡します。

データフェッチングの実装

外部APIからデータを取得し、それをSSRで表示する例を見てみましょう。上記の例では、サンプルAPI https://api.example.com/data からデータを取得しています。

APIが返すデータが以下のようなJSONであると仮定します。

{
  "message": "Hello from SSR!"
}

このデータをページに表示するには、getServerSideProps関数内でfetchを使ってデータを取得し、propsとしてコンポーネントに渡します。

パフォーマンス最適化のポイント
SSRを実装する際に、パフォーマンスを最適化するためのいくつかのポイントがあります。

キャッシュの活用: APIリクエストの結果をキャッシュして、サーバーの負荷を軽減します。
最小限のデータフェッチ: 必要なデータだけをフェッチして、レスポンスを軽量化します。
非同期処理: 複数のデータフェッチを非同期に行い、ページのロード時間を短縮します。

export async function getServerSideProps() {
  const [res1, res2] = await Promise.all([
    fetch('https://api.example.com/data1'),
    fetch('https://api.example.com/data2'),
  ]);
  const data1 = await res1.json();
  const data2 = await res2.json();

  return {
    props: {
      data1,
      data2,
    },
  };
}

まとめ

サーバーサイドレンダリング（SSR）は、サーバー側でHTMLを生成してクライアントに送信する手法です。これにより、初回ロードのパフォーマンスが向上し、SEOにも有利になります。Next.jsを使用することで、簡単にSSRを実装できます。