静的サイト生成 (SSG)

静的サイト生成 は、ビルド時にHTMLが生成されることです。このHTMLは、各リクエストに使用されます。静的サイト生成は、SEOにとっておそらく最良のレンダリング戦略です。なぜなら、プリレンダリングされているため、ページロード時にすべてのHTMLがあるだけでなく、SEOにおけるもう1つのランキング要因であるページパフォーマンスにも役立ちます。

サーバーサイドレンダリング (SSR)

SSGと同様に、サーバーサイドレンダリング (SSR)もプリレンダリングされるため、SEOにも適しています。SSGのようにビルド時に生成されるのではなく、SSRのHTMLはリクエスト時に生成されます。これは、動的なページが多い場合に適しています。

インクリメンタル静的再生 (ISR)

ページ数が非常に多い場合、ビルド時にすべてを生成することは現実的ではないかもしれません。Next.jsでは、サイトをビルドした後で静的ページを作成または更新することができます。

インクリメンタル静的再生 を使用すると、開発者やコンテンツ編集者は、サイト全体を再ビルドすることなく、ページごとに静的生成を使用できます。ISRにより、数百万ページにスケールしながら、静的生成のメリットを維持できます。

クライアントサイドレンダリング (CSR)

クライアントサイドレンダリング では、開発者はJavaScriptでブラウザで完全にレンダリングされるウェブサイトを作成できます。初期ページロード時には、通常、JavaScriptをフェッチしてブラウザがすべてをコンパイルするまで、ほとんどまたは全くコンテンツのない単一のHTMLファイルが提供されます。

前述のように、一般的にクライアントサイドレンダリングは、最適なSEOのためには**推奨されません**。

CSRは、データ量の多いダッシュボード、アカウントページ、または検索エンジンのインデックスに含める必要のないページに最適です。

まとめ

SEOにとって最も重要なのは、ページデータとメタデータがJavaScriptなしでページロード時に利用可能であることです。この場合、SSGまたはSSRが最良の選択肢となります。

Next.jsの大きな強みの一つは、上記のレンダリング方法のそれぞれをページごとに実行できることです。ブログ投稿は静的に生成し、顧客のアカウントダッシュボードはクライアントサイドでレンダリングし、ニュースフィードはサーバーサイドでレンダリングしたい場合があります。

さらに読む

• Next.js: データ取得
• Smashing Magazine: Next.js によるインクリメンタル静的再生の完全ガイド
• Vercel: Next.js: サーバーサイドレンダリング vs 静的生成