データ取得について話す前に、Next.jsの最も重要な概念の1つである事前レンダリングについて説明しましょう。

デフォルトでは、Next.jsはすべてのページを事前レンダリングします。これは、Next.jsがクライアントサイドのJavaScriptですべてを実行するのではなく、各ページのHTMLを事前に生成することを意味します。事前レンダリングは、パフォーマンスとSEOの向上につながる可能性があります。

生成された各HTMLには、そのページに必要な最小限のJavaScriptコードが関連付けられています。ブラウザでページが読み込まれると、JavaScriptコードが実行され、ページが完全にインタラクティブになります。（このプロセスをハイドレーションと呼びます）。

事前レンダリングが行われていることを確認する

事前レンダリングが行われていることを確認するには、次の手順を実行します。

1. ブラウザでJavaScriptを無効にします。（Chromeでの方法はこれです）。
2. このページにアクセスしてみてください（このチュートリアルの最終結果）。

JavaScriptを実行せずにアプリがレンダリングされていることがわかるはずです。これは、Next.jsがアプリを静的HTMLに事前レンダリングしたため、JavaScriptを実行せずにアプリのUIを表示できるためです。

注意：上記のステップはlocalhostでも試すことができますが、JavaScriptを無効にするとCSSは読み込まれません。

アプリがプレーンなReact.jsアプリ（Next.jsなし）の場合、事前レンダリングは行われないため、JavaScriptを無効にするとアプリを表示できません。例として

• ブラウザでJavaScriptを有効にして、このページを確認してください。Create React AppでビルドされたプレーンなReact.jsアプリです。
• 次に、JavaScriptを無効にして同じページにアクセスしてください。
• アプリは表示されなくなります。代わりに、「このアプリを実行するにはJavaScriptを有効にする必要があります」と表示されます。これは、アプリが静的HTMLに事前レンダリングされていないためです。

まとめ：事前レンダリング vs. 事前レンダリングなし

簡単なグラフィカルなまとめです。

次に、Next.jsの2つの事前レンダリング形式について説明します。