Next.js SSR（サーバーサイドレンダリング）の基本を初心者向けに解説！HTMLをサーバーで生成する仕組みとは

1. Next.js SSRとは？サーバーでHTMLを生成する仕組み

1. Next.js SSRとは？サーバーでHTMLを生成する仕組み

Next.jsのSSR（サーバーサイドレンダリング）は、ユーザーがページをリクエストしたタイミングでサーバーがHTMLを作り、そのままブラウザに送る仕組みです。これにより、ページの読み込みが早くなり、検索エンジンにも認識されやすくなります。

例えば、ニュースサイトで最新記事を表示したい場合、SSRを使うと常に最新の情報をHTMLとしてユーザーに届けられます。

2. getServerSidePropsでSSRを実装する方法

2. getServerSidePropsでSSRを実装する方法

Next.jsでは、ページごとにサーバーでデータを取得してHTMLを生成するにはgetServerSidePropsを使います。

export async function getServerSideProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await res.json();

  return {
    props: {
      post: data
    }
  };
}

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

export default PostPage;

3. SSRとSEO（検索エンジン最適化）の関係

3. SSRとSEO（検索エンジン最適化）の関係

SSRで生成されたHTMLは、検索エンジンが読みやすい形でページが提供されます。クライアントサイドレンダリング（CSR）ではJavaScriptの実行後でないと内容が表示されませんが、SSRなら初回読み込みで内容がすぐ見えるため、SEOに有利です。

4. クライアントサイドレンダリングとの違い

4. クライアントサイドレンダリングとの違い

CSRはブラウザがJavaScriptを実行してHTMLを生成します。SSRはサーバーがHTMLを生成してブラウザに渡すため、初回表示が速く、検索エンジンにも認識されやすいです。

function ClientPage() {
  const [message, setMessage] = React.useState("読み込み中...");

  React.useEffect(() => {
    setTimeout(() => {
      setMessage("データが表示されました！");
    }, 1000);
  }, []);

  return <h1>{message}</h1>;
}

export default ClientPage;

5. SSRで動的ルーティングを使う例

5. SSRで動的ルーティングを使う例

Next.jsのSSRでは動的ルーティングも対応可能です。URLに応じてサーバーでHTMLを生成できます。

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

  return { props: { post } };
}

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

export default Post;

6. SSRとAPI通信の組み合わせ

6. SSRとAPI通信の組み合わせ

SSRはAPIからデータを取得してページを作ることが得意です。例えば、天気情報を取得してHTMLとして返す場合、サーバー側でAPIを叩いてHTMLに埋め込みます。

export async function getServerSideProps() {
  const res = await fetch("https://api.weatherapi.com/v1/current.json?key=YOUR_KEY&q=Tokyo");
  const weather = await res.json();

  return { props: { weather } };
}

function WeatherPage({ weather }) {
  return (
    <div>
      <h1>東京の天気</h1>
      <p>気温: {weather.current.temp_c}℃</p>
      <p>状態: {weather.current.condition.text}</p>
    </div>
  );
}

export default WeatherPage;

7. SSRのメリット・デメリット

7. SSRのメリット・デメリット

SSRのメリットは、初回表示が速くSEOに強いことです。また、常に最新データを表示できます。デメリットはサーバー負荷が増えることと、ページ表示に少し時間がかかる場合があることです。

8. SSRの基本をまとめると

8. SSRの基本をまとめると

Next.jsのSSRは、サーバーでHTMLを生成してユーザーに渡す仕組みです。getServerSidePropsを使うことで、APIからのデータを取り込み、動的なページを生成できます。SEO対策にも効果があり、ニュースサイトやブログ、ECサイトで活用されます。

まとめ

まとめ

本記事では、Next.jsにおけるSSR（サーバーサイドレンダリング）の基本的な仕組みと活用方法について詳しく解説しました。SSRはユーザーがページをリクエストしたタイミングでサーバー側でHTMLを生成し、そのままブラウザに送る仕組みであり、ページの初回表示速度向上やSEOに非常に有利である点が特徴です。特にニュースサイトやブログ、ECサイトのように、常に最新のデータを表示する必要があるサイトではSSRの導入が効果的です。通常のCSR（クライアントサイドレンダリング）では、ブラウザがJavaScriptを実行して初めてHTMLが生成されるため、初回表示に時間がかかり、検索エンジンにも内容が伝わりにくくなりますが、SSRを利用することで検索エンジンが直接HTMLを読み取りやすくなるため、SEO対策にも役立ちます。

また、Next.jsではgetServerSidePropsを使うことで、APIからデータを取得してサーバーで動的にHTMLを生成することが可能です。これにより、ユーザーごとに最新情報を反映したページを提供できるため、ユーザー体験が向上します。例えば天気情報やブログ記事の最新内容など、リアルタイムで変化する情報をSSRで効率よく表示できます。さらに、SSRは動的ルーティングとも相性が良く、URLに応じて適切なデータを取得し、サーバーでページを生成することで柔軟なページ構成が可能です。

しかしSSRにはデメリットも存在します。サーバー側でHTMLを生成するため、アクセス数が増えるとサーバー負荷が高くなり、処理に時間がかかる場合があります。また、リアルタイム性が極端に高い場合や、頻繁に更新される大量データのページではパフォーマンス調整が必要となります。そのため、プロジェクトの規模やアクセス量を考慮してCSRやSSG（静的サイト生成）と組み合わせることも検討すべきです。

実際の実装例としては、以下のようにgetServerSidePropsを利用してAPIデータを取得し、SSRでページを生成できます。

export async function getServerSideProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await res.json();

  return {
    props: {
      post: data
    }
  };
}

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

export default PostPage;

SSRのメリットを最大限活かすには、ページの初回表示速度を意識しつつ、動的データの取得やSEOに強い構造を意識したコンポーネント設計が重要です。また、ReactのuseEffectやCSRと組み合わせることで、必要に応じてクライアントサイドでの動的更新も実現可能です。例えばユーザー操作によってリアルタイムに内容を更新したい場合はCSRを部分的に利用し、基本のページ表示はSSRで行うと効率的です。

まとめると、Next.jsのSSRはサーバーでHTMLを生成することで初回表示速度の向上とSEO対策を両立できる仕組みであり、getServerSidePropsを活用することで動的ルーティングやAPI通信を組み合わせた柔軟なページ生成が可能です。メリットとデメリットを理解し、CSRやSSGと使い分けることで、パフォーマンスとユーザー体験の最適化ができます。