Next.js SSR（Server Side Rendering）の基本を完全解説！App Router対応で初心者でもわかるNext.js SSR実装方法

1. Next.js App RouterでSSRを使う基本

1. Next.js App RouterでSSRを使う基本

Next.js App Routerでは、ページコンポーネントの中でasync関数を定義してデータを取得することでSSRを行います。基本は以下のような構造です。

import React from "react";

async function getData() {
  // サーバー側でデータを取得
  const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  return res.json();
}

export default async function Page() {
  const data = await getData();

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

2. SSRでデータを事前に取得する理由

2. SSRでデータを事前に取得する理由

サーバーサイドでデータを取得してページを作ると、ブラウザがページを読み込むときにすぐに内容が表示されます。これにより、ユーザー体験が向上し、検索エンジンもページ内容を認識しやすくなります。

3. fetchで外部APIからSSRデータを取得する方法

3. fetchで外部APIからSSRデータを取得する方法

Next.jsのSSRでは、fetchを使ってサーバー側でデータを取得できます。以下は簡単な例です。

export default async function UserPage() {
  const res = await fetch("https://jsonplaceholder.typicode.com/users/1");
  const user = await res.json();

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

4. SSRで動的ルーティングと組み合わせる方法

4. SSRで動的ルーティングと組み合わせる方法

Next.jsのApp Routerでは、動的ルーティングとSSRを組み合わせることも可能です。URLのパラメータに応じてサーバー側でデータを取得してページを生成できます。

interface Post {
  id: number;
  title: string;
  body: string;
}

export default async function PostPage({ params }: { params: { id: string } }) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
  const post: Post = await res.json();

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

5. SSRのメリットとデメリット

5. SSRのメリットとデメリット

SSRにはいくつかのメリットとデメリットがあります。

• メリット：初回表示が早い、SEOに強い、ユーザー体験が向上
• デメリット：サーバー負荷が高くなる、リアルタイム更新には不向き

6. SSRでキャッシュを活用する方法

6. SSRでキャッシュを活用する方法

大量アクセスがある場合、サーバー側でキャッシュを利用すると効率的です。Next.jsではfetchのオプションでキャッシュ戦略を設定できます。

const res = await fetch("https://jsonplaceholder.typicode.com/posts/1", {
  cache: "force-cache" // サーバーでキャッシュを利用
});
const post = await res.json();

7. SSRとCSR（Client Side Rendering）の違い

7. SSRとCSR（Client Side Rendering）の違い

SSRはサーバー側でHTMLを作るのに対し、CSRはブラウザ側でJavaScriptを実行してHTMLを生成します。CSRは動的な操作に向いており、SSRは初回表示やSEOに向いています。

"use client";

import { useState, useEffect } from "react";

export default function ClientPage() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts/1")
      .then(res => res.json())
      .then(json => setData(json));
  }, []);

  if (!data) return <p>読み込み中...</p>;

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

8. SSRを使うときの注意点

8. SSRを使うときの注意点

SSRではサーバーでデータを取得するため、外部APIが遅いとページ表示が遅くなることがあります。また、ユーザーの個別情報を扱う場合は認証やセキュリティに注意してください。

9. Next.js App Router SSRまとめ

9. Next.js App Router SSRまとめ

Next.js App RouterでSSRを使うと、サーバー側でHTMLを生成し、ブラウザに送ることで高速表示やSEO対策が可能です。fetchでデータを取得したり、動的ルーティングと組み合わせたりすることも簡単です。キャッシュを利用したり、CSRと使い分けることで、効率的で見やすいWebページを作れます。

まとめ

まとめ

本記事では、Next.jsのApp Routerを活用したSSR（Server Side Rendering）の基本的な実装方法から、動的ルーティングとの組み合わせ方、fetchを使ったサーバーサイドでのデータ取得、キャッシュ活用、CSRとの違い、そしてSSRを使用する際の注意点まで幅広く解説しました。SSRはサーバー側でHTMLを生成してブラウザに送るため、初回表示速度が非常に速く、SEOに強くなる特徴があります。特に検索エンジンがページの内容を効率的に認識できる点は、Webサイトの集客やユーザー体験の向上に直結します。

具体的な実装としては、ページコンポーネント内で非同期関数を作成しfetchでデータを取得する方法が基本です。この方法を使うことで、外部APIやデータベースから必要な情報をサーバー側で取得し、ブラウザに送信する際にはすでにHTMLとして整形された状態で届けることが可能です。また、動的ルーティングと組み合わせれば、URLパラメータに応じて個別のページを生成することもできます。これにより、ブログ記事一覧や商品詳細ページなど、さまざまな動的コンテンツに対応できます。

SSRのメリットは明確で、初回表示の高速化、検索エンジンによるコンテンツ認識の向上、ユーザー体験の改善が挙げられます。一方で、デメリットとしてサーバー負荷の増加やリアルタイム更新には不向きな点があります。しかし、Next.jsではfetchにキャッシュオプションを設定することで、同じデータへのアクセスが多い場合でもサーバー負荷を軽減できます。これにより、効率的でスムーズなWebページ運営が可能になります。

また、CSR（Client Side Rendering）との違いを理解することも重要です。CSRはブラウザ側でJavaScriptを実行してHTMLを生成するため、動的な操作やユーザーインタラクションに強みがありますが、初回表示速度はSSRより遅くなる傾向があります。そのため、ページの目的やユーザー体験を考慮してSSRとCSRを適切に使い分けることが最適です。

実際にNext.jsでSSRを使う場合、以下のような基本的な構造で実装できます。

import React from "react";

async function getData() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  return res.json();
}

export default async function Page() {
  const data = await getData();

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

このようにNext.jsのApp RouterとSSRを組み合わせることで、Webサイトの表示速度を向上させながら、SEOに適したページ構造を実現できます。さらに、動的ルーティングやキャッシュ戦略を駆使することで、効率的でスケーラブルなWeb開発が可能です。初心者の方でも、fetchを使ったデータ取得とページコンポーネントの構造を理解すれば、すぐにSSRを活用したサイト構築に挑戦できます。