データフェッチについて話す前に、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は読み込まれません。

アプリが（Next.jsを使用しない）純粋なReact.jsアプリの場合、プリレンダリングが行われないため、JavaScriptを無効にするとアプリを表示できません。たとえば、

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

まとめ: プリレンダリング vs. プリレンダリングなし

簡単な図でのまとめです

次に、Next.jsにおけるプリレンダリングの**2つの形式**について話しましょう。