Next.js – プリレンダリングについて

Next.jsのプレリンダリングについて学んだので忘備録として残します。

プリレンダリングとは

Next.jsにおいて、最も重要な概念はプリレンダリング(pre-rendering)です。

Next.jsは、デフォルトで全てのページでプリレンダリングします。
これは、クライアントサイド(ブラウザ)でJavaScriptがページを逐一レンダリングするのではなく、予め全てのページのHTMLを生成する、ということです。これによりSEOがより良くなります。

プリレンダリング時には、HTMLは必要最低限のJavaScriptコードとともに生成されており、ブラウザによるロード時にこのJavaScriptが動き、ページが完全にインタラクティブなものになります。これをハイドレーション(hydration)と呼びます。

なので、ブラウザの設定でJavaScriptを無効にしてNext.jsアプリのページを表示すると、staticなHTMLのみが表示されます。

一方、Next.jsではなくReactのみのアプリだと、JavaScript無効のブラウザでは動きません。React単体にはプリレンダリング機能はないからです。

プリレンダリングには、以下の2種類があります。

  • 静的生成(Static-site Generation: SSG)
  • サーバサイドレンダリング(Server-side Rendering: SSR)

静的生成(Static Generation)

これはビルド時にHTMLを生成するプリレンダリング方法です。リクエスト時にこのプリレンダリングされたHTMLを返します。

サーバサイドレンダリング(SSR)

これはリクエスト時にHTMLを生成するプリレンダリング方法です。

Next.jsでは、それぞれのページにつきどちらの方法でプリレンダリングするか選べますが、やはり静的生成の方が速いので、Next.jsは可能な限り静的生成を使うよう推奨しているようです。

一方、リクエスト毎に表示が変わるようなページはリクエスト毎にプリレンダリングするSSRの方が適しているので、このような場合はSSRを使うなど、「リクエスト前にプリレンダリングできるかどうか」を考えて選択する必要があります。

参考:

https://nextjs.org/learn/basics/data-fetching/pre-rendering