プリレンダリング

データ取得について説明する前に、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つの形態のプリレンダリングについて説明します。