Next.js というフレームワークの特徴的な機能である「プリレンダリング」について、React との違いを交えながら初心者目線でお話しします。難しそうな言葉が出てきても心配しないでください。一つずつ丁寧に解説していきますね 😊

プリレンダリングって何？

プリレンダリングとは、ウェブページの内容をあらかじめ準備しておくことです。簡単に言うと、お客さんが来る前にお店の準備をしておくようなものですね。

React との違い

React（リアクト）： React は、ユーザーの操作に応じてブラウザ上でページの内容を作り出します。これを「クライアントサイドレンダリング」と呼びます。 例えるなら、お客さんが注文してから料理を作り始めるレストランのようなものです。 Next.js（ネクストジェイエス）： Next.js は、ページの内容をサーバー側で事前に用意します。これが「プリレンダリング」です。 例えるなら、人気メニューをあらかじめ作っておいて、注文が入ったらすぐに出せるレストランのようなものです。

プリレンダリングの 2 つの方法

Next.js には、プリレンダリングの方法が 2 つあります： a) 静的生成（Static Generation）： ビルド時（ウェブサイトを公開する準備をする時）に HTML を生成します。 例：ブログの記事ページ b) サーバーサイドレンダリング（Server-side Rendering）： リクエストがあるたびに HTML を生成します。 例：ニュースサイトのトップページ

プリレンダリングのメリット

a) 表示速度が速い： ページの内容が事前に用意されているので、ユーザーにすばやく表示できます。 b) SEO（検索エンジン最適化）に有利： 検索エンジンがページの内容を理解しやすくなります。 c) 初期表示が安定： JavaScript（ジャバスクリプト）が読み込まれる前でも、ページの内容が表示されます。

プリレンダリングのデメリット

a) ビルド時間が長くなる可能性： 特に静的生成の場合、ページ数が多いとビルドに時間がかかることがあります。 b) 動的なコンテンツへの対応が難しい： 頻繁に変更される内容には、工夫が必要です。

いつプリレンダリングを使うべき？

頻繁に更新されないページ SEO が重要なページ 初期表示の速度が重要なページ

まとめ

Next.js のプリレンダリングは、ページの内容を事前に用意することで、高速で SEO に有利なウェブサイトを作ることができる機能です。React の動的な特性と、従来の静的なウェブページの良いところを組み合わせたようなものですね。 プログラミング初心者の皆さん、いかがでしたか？Next.js のプリレンダリングについて、少し理解が深まったでしょうか？次回は、実際に Next.js でプリレンダリングを使ったプロジェクトを作ってみる方法をご紹介します。お楽しみに！👋