Next.jsにおけるPre-rendering(SSRとSSG)とは

はじめに

こんにちは、都内でソフトウェアエンジニアをしているYSasagoと申します。
今回は、Next.jsの特徴の1つであるPre-rendering（SSGとSSR）のまとめていこうと思います。

Next.jsのPre-renderingとは

• Next.jsは、デフォルトで全ページをPre-rendering
• Pre-rendering　＝　事前にHTMLを生成すること
• ブラウザの負荷を下げて表示を高速化する
• 検索エンジンのクローラーにコンテンツを見せることができる

Static Site Generation(SSG)とは

SSGはビルド時に、サーバー側で、APIからのデータ取得とそれに伴ったHTMLの構築を事前に行います。
そして、ユーザーからリクエストされた際にこの事前につくっておいたHTMLを渡すアーキテクチャです。
事前につくっておいたHTMLをユーザーに渡すだけなのでユーザーは高速にサイトを確認することができます。よってSEO観点でとても良いとされています。

getStaticPropsでテータを取得　

Next.jsにおいて、SSGを実装するためにgetStaticProps関数を使います。
この関数は、外部データを取得するために使う関数で、本番環境ではビルド時に実行されます。

• 外部データを取得するために使う
• async/awaitを使って非同期処理を制御できる
• 本番環境ではビルド時に実行される関数
• 開発環境では、リクエスト毎に実行される
• pageコンポーネントでのみ使用可能

SSGを試してみる

// 本番環境ではビルド時に実行される
export async function getStaticProps() {
// データ取得をここに書く
  const allPostsData = getSortedPostsData();

  return {
    // オブジェクトの形で返してあげる
    props: {
      allPostsData,
    },
  };
}

// getStaticPropsで返されたpropsを受け取る 
export default function Home ({ allPostsData }) { ... }

Server-Side　Rendering(SSR)とは

ユーザーからのリクエスト毎にサーバーにリクエストが走り、そのままサーバー側でAPIと連携をしてレンダリングが行われ、生成されたHTMLをユーザーに返すアーキテクチャのことをいいます。
リクエスト毎にAPIのリクエストとレンダリングが行われるため、SSGと比較すると速度は遅くなります。

getServerSidePropsでデータを取得

Next.jsにおいて、SSRを実装するためにgetServerSideProps関数を使います。
この関数は、外部データを取得するために使う関数で、リクエスト毎に実行されます。

• リクエスト毎に実行される関数
• Server-Side　Renderingのために使う
• 外部データを取得するために使う
• async/awaitを使って非同期処理を制御できる
• pageコンポーネントでのみ使用可能

SSRを試してみる

// リクエスト毎に実行される
export async function getServerSideProps(context) {
  const allPostsData = getSortedPostsData();

  return {
    props: {
      allPostsData,
    },
  };
}

export default function Home ({ allPostsData }) { ... }

おわりに

Next.jsを使うと、Pre-renderingを簡単に実装でき、SEOの評価を上げることができます。
またSSGとSSRはページごとに使い分けができるので、とても便利ですね。
用途をよく考えて使い分けしていければと思います。
最後まで読んでくださりありがとうございました。

参考