SSR (サーバーサイド レンダリング) は、Next.js でページを生成するもう 1 つの方法です。この記事では、SSR とは何か、その仕組み、Next.js プロジェクトの Page Router と App Router の両方に SSR を実装する方法について説明したいと思います。

SSRとは何ですか？

SSR は、ユーザーがリクエストを行った後に静的ページ (または事前レンダリングされたページ) を生成する方法です。これは、リクエストごとに静的ページが生成されることを意味します。この方法は、データが常に最新であることが保証されるため、頻繁に更新する必要があるページに役立ちます

SSRはどのように機能しますか?

Next.js で SSR を使用すると、ユーザーが SSR を実装したページをリクエストするたびに、リクエストが行われた後にページが生成されます。つまり、Next.js がリクエストごとに静的コンテンツを再度生成してバンドルするまで、ユーザーは待つ必要があります。静的ページの準備が完了すると、ユーザーは要求されたページを表示できるようになります。

SSR はサーバー上でのみ実行され、リクエストごとに静的ページを生成するため、プロジェクトのビルド プロセス中には実行されないことに注意することが重要です。

App Router に SSR を実装する方法

App Router に SSR を実装するには、サーバー コンポーネントでデフォルトで有効になっているため、特別な関数を作成したり、特定の構成を設定したりする必要はありません。

たとえば、静的ページがあり、API からデータを取得する場合、このページはデフォルトで SSR を使用します。 SSR を使用する場合、ページはビルド時にバンドルされず、事前レンダリングされないことに注意することが重要です。また、プロジェクトで動的ページを使用する場合、データをフェッチしないとデフォルトで SSG が使用されます。ただし、API からフェッチすると SSR に切り替わり、ビルド時に静的ページがバンドルされることはありません。

これはスタティック ルートに SSR を実装する例です :

import React from 'react';

const AboutPage = async () => {
  // Fetch data from an API or any server-side source
  const data = getDataFromApi();

  return (
    

      
About Us
      
{data}
    
  );
};

export default AboutPage;

Page Router に SSR を実装する方法

ページ ルーターに SSR を実装するには、ファイル内に getServerSideProps 関数を作成する必要があります。この関数は、各ユーザー要求の後に呼び出されます。 [id] ファイルなどの動的ルートを使用している場合は、ファイル内で getServerSideProps も使用する必要があります。この関数は引数 (通常は context という名前) を受け取り、そこから動的ページの ID、値を取得できます。この関数は、ユーザーリクエストごとにサーバーによって呼び出されます。

これは tsx ファイルでの実装例です:

import { GetServerSideProps } from 'next';

interface AboutProps {
  data: string;
}

const AboutPage: React.FC = ({ data }) => {
  return (
    

      
About Us
      
{data}
    
  );
};

// This function runs on the server on every request
export const getServerSideProps: GetServerSideProps = async () => {
  const data = getDataFromApi();
  return {
    props: {
      data,
    },
  };
};

export default AboutPage;

これは jsx ファイルでの実装例です :

const AboutPage = ({ data }) => {
  return (
    

      
About Us
      
{data}
    
  );
};

// This function runs on the server on every request
export async function getServerSideProps() {
  const data = getDataFromApi();

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

export default AboutPage;

結論

SSR は静的ページをバンドルまたは作成するのに便利な方法ですが、ビルド時には実行されません。ユーザーが最新のデータを確認できるように、ユーザーのリクエストごとにページを更新する必要がある場合は、SSR を使用できます。ただし、ユーザーのリクエストごとに静的ページを生成するため、SSG (静的サイト生成) や ISR (増分静的再生成) などの他の方法よりも時間がかかり、高速ではないことに注意することが重要です。

この記事をお楽しみいただければ幸いです。ご質問がございましたら、お気軽にお問い合わせください。 ISR と SSG について読みたい場合は、ISR についてはここ、SSG についてはここで、それらに関する私の記事をチェックしてください。すべてについてさらに詳しく知りたい場合は、私のウェブサイトをフォローしてください。

読んでいただきありがとうございます！とりあえずさようなら！