プリレンダリング
データフェッチについて説明する前に、Next.jsの最も重要な概念の1つであるプリレンダリングについて説明しましょう。
デフォルトでは、Next.jsはすべてのページをプリレンダリングします。これは、Next.jsが各ページのHTMLを事前に生成することを意味し、クライアントサイドのJavaScriptですべてを処理する必要がありません。プリレンダリングにより、パフォーマンスとSEOが向上します。
生成された各HTMLには、そのページに必要な最小限のJavaScriptコードが関連付けられています。ページがブラウザによって読み込まれると、そのJavaScriptコードが実行され、ページが完全にインタラクティブになります（このプロセスをハイドレーションと呼びます）。
プリレンダリングが行われていることを確認する
プリレンダリングが行われていることを確認するには、次の手順を実行します：
- ブラウザでJavaScriptを無効にします（Chromeでの方法はこちら）。
- このページにアクセスしてみてください（このチュートリアルの最終結果）。
JavaScriptを実行しなくてもアプリが表示されるはずです。これはNext.jsがアプリを静的なHTMLにプリレンダリングしているためで、JavaScriptを実行しなくてもUIを確認できます。
注: 上記の手順は
localhostでも試せますが、JavaScriptを無効にするとCSSが読み込まれません。
Next.jsを使用しないプレーンなReact.jsアプリの場合、プリレンダリングは行われないため、JavaScriptを無効にするとアプリが表示されません。例えば：
- ブラウザでJavaScriptを有効にしてこのページを確認してください。これはCreate React Appで構築されたプレーンなReact.jsアプリです。
- 次に、JavaScriptを無効にして同じページに再度アクセスします。
- アプリは表示されず、「このアプリを実行するにはJavaScriptを有効にする必要があります」と表示されます。これはアプリが静的なHTMLにプリレンダリングされていないためです。
まとめ：プリレンダリング vs プリレンダリングなし
以下に簡単なグラフィカルなまとめを示します：
次に、Next.jsにおける2つの形式のプリレンダリングについて説明しましょう。