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単体にはプリレンダリング機能はないからです。
プリレンダリングには、以下の２種類があります。
静的生成(Static Generation)
これはビルド時にHTMLを生成するプリレンダリング方法です。リクエスト時にこのプリレンダリングされたHTMLを返します。
これはリクエスト時にHTMLを生成するプリレンダリング方法です。
Next.jsでは、それぞれのページにつきどちらの方法でプリレンダリングするか選べますが、やはり静的生成の方が速いので、Next.jsは可能な限り静的生成を使うよう推奨しているようです。
一方、リクエスト毎に表示が変わるようなページはリクエスト毎にプリレンダリングするSSRの方が適しているので、このような場合はSSRを使うなど、「リクエスト前にプリレンダリングできるかどうか」を考えて選択する必要があります。
参考:
