クイック エンジニアリングブログ

株式会社クイック Web事業企画開発本部のエンジニアリングチームが運営する技術ブログです。

Next.jsでプリレンダリング機能を使う

こんにちは。ソフトウェアエンジニアのやぎーです。

暖かくなってきましたが、みなさん花粉症は大丈夫でしょうか。

今回は、Next.jsで使えるプリレンダリング機能についてお話ししたいと思います。

Next.jsとは

Next.jsは、Reactをベースに作られたWebフレームワークで、Node.js上で実行されます。
ファイルベースのルーティングやプリレンダリング機能を提供しており、
開発元であるVercelのプラットフォームを利用すれば、デプロイ〜配信を簡単に行うことができます。

プリレンダリング（Pre-rendering）機能について

プリレンダリング機能は、ウェブサイトを表示する際に必要な
データ取得やJavaScriptをWebサーバーで実行し、HTMLの生成を行います。

Next.jsでは、ページ毎にレンダリング方式を指定できるため、
SSGとSSRを用いたハイブリッド構成のアプリを作ることもできます。

SSR（Server Side Rendering）

クライアントからWebサーバーにアクセスした際に、サーバー側でHTMLの生成を行います。 動的なコンテンツや即時反映が必要なページに利用できますが、Webサーバーを常時稼働させておく必要があります。 f:id:aimstogeek:20220330141918p:plain

メリット

  • Webサーバーでレンダリング処理を行うため、コンテンツ表示が速い

デメリット

  • リクエスト毎にページを生成するため、Webサーバーの負荷が増加する

SSG（Static Site Generator）

ビルド時にHTMLファイルが生成され、リクエスト時に生成済みのHTMLを提供します。 HTMLとJSファイルを置けるホスティングサーバーがあればページ配信が可能。 静的な HTMLファイルを返すだけなのでパフォーマンスが非常に高い。 f:id:aimstogeek:20220330141927p:plain

メリット

  • 静的なHTMLファイルを返すだけなので、コンテンツ表示が非常に速い

デメリット

  • ページ数が多いとビルド時間が長くなる
  • データ更新毎に再ビルドが必要なため、更新頻度が高いページには不向き

つかってみる

Next.jsのインストール方法や、簡単な使い方について

インストール

  • Node.jsがインストール済みであること

npxコマンドを使用して、最新のNext.jsをインストールする。
TypeScriptでプロジェクトを作成する場合、--typescriptオプションをつける

npx create-next-app@latest --typescript

? What is your project named? › my-app #プロジェクト名を入力する

最新のNext.jsがインストールされます（執筆時のVersionは12.1）
インストールがすべて完了したら、作成されたフォルダに移動しWebサーバーを起動する。

cd my-app
npm run dev

http://localhost:3000をブラウザで開くと、Welcomeページが表示されます。

ルーティング

/pagesにファイルとフォルダを設置することでルートを定義できます。
例）/pages/test/index.tsxを配置した場合http://localhost:3000/testでアクセスできるようになります。

ダイナミックルーティング

/pages/test/[id].tsxのようなファイルを設置した場合に下記のようなアクセスができるようになります。

  • /test/1
  • /test/2
  • /test/3 ...

SSR/SSGで使用するAPI

getServerSideProps（SSR）

ページアクセス時に呼び出され、戻り値のpropsの値がページコンポーネントに渡される

export const getServerSideProps: GetServerSideProps = async context => {

  // ページコンポーネントに渡すpropsを作成する
  const props = {
      ...
  };

  return { props };
};

getStaticProps（SSG）

ビルド時に呼び出され、戻り値のpropsの値がページコンポーネントに渡される

export const getStaticProps: GetStaticProps = async context => {

  // ページコンポーネントに渡すpropsを作成する
  const props = {
      ...
  };

  return { props };
};

getStaticPaths（SSG）

ダイナミックルーティング使用時に、生成するページのパス（ID情報など）を指定する

export const getStaticPaths: GetStaticPaths = async () => {

  return {
    paths: [
      // /test/1 〜 /test/3のページを生成する場合
      { params: { id: '1' } },
      { params: { id: '2' } },
      { params: { id: '3' } } 
    ],
    fallback: false  // 上記以外は404
  };
};

おわりに

コンテンツに合わせてレンダリング方法を最適化できることで、
ページ表示速度の向上　→　ユーザー体験の向上　→　SEOの向上
につながるのではないかと思います。

インフラやネットワークの知識がない方でも手軽に環境を作れるので、これからフロントエンドの勉強をしようと思っている方などにもおすすめです。

他にも便利な機能がたくさんあるので、興味のある方は公式ドキュメントを参照してみてください。

nextjs-ja-translation-docs.vercel.app

最後までお読みいただきありがとうございました。


＼\『真のユーザーファーストでマーケットを創造する』仲間を募集中です!! /／

919.jp