LoginSignup
9

はじめに

こんにちは、都内でソフトウェアエンジニアをしている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はページごとに使い分けができるので、とても便利ですね。
用途をよく考えて使い分けしていければと思います。
最後まで読んでくださりありがとうございました。

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
9