Next.js App Router SSR入門

Next.js App Router でのサーバサイドレンダリング入門

Next.js の App Router は、アプリケーションの構築方法を大きく変える可能性を秘めています。特に注目すべき機能の一つが、サーバサイドレンダリング (SSR) の容易さと、それによる改善点です。この記事では、App Router を使用して SSR を実装する基本的な手順と、そのメリットについて解説します。

App Router とは？

従来の Next.js では、ページ遷移時にクライアントサイドで JavaScript を実行し、DOM を操作してページを再描画することが一般的でした。しかし、App Router では、ルーティングごとにサーバーサイドで HTML を生成し、その HTML をクライアントに送信します。これにより、初期表示速度の向上、SEO の改善、および JavaScript の実行を減らすことが可能になります。

サーバサイドレンダリングの基本的な実装

App Router で SSR を実装するには、各ページのファイル内で getServerSideProps 関数を使用します。この関数は、サーバーサイドで実行され、Props を渡すことができます。これらの Props は、ページのコンポーネント内で使用できます。

// pages/index.js
import { useEffect, useState } from 'react';

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

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('/api/data');
      const jsonData = await response.json();
      setData(jsonData);
    };

    fetchData();
  }, []);

  if (!data) {
    return 
Loading...
;
  }

  return (
    

      
サーバサイドレンダリングの例
      
取得したデータ: {JSON.stringify(data)}
    
  );
}

この例では、/api/data という API エンドポイントからデータを取得し、そのデータを表示しています。getServerSideProps は不要ですが、データ取得処理をサーバーサイドで行うことで、クライアントサイドの JavaScript を実行せずにデータを取得できます。

App Router で SSR を使うメリット

• SEO 改善: 検索エンジンは、サーバーで生成された HTML をクロールしてインデックスできます。
• 初期表示速度の向上: ユーザーは、初期表示が速いアプリケーションを認識しやすくなります。
• クライアントサイド JavaScript の実行を減らす: 複雑な JavaScript コードの実行を減らすことで、アプリケーションのパフォーマンスを向上させることができます。

まとめ

Next.js App Router のサーバサイドレンダリングは、アプリケーションのパフォーマンスと SEO を改善するための強力なツールです。この記事で紹介した基本的な実装とメリットを理解し、ぜひご自身のプロジェクトで活用してみてください。