レンダリング戦略

静的サイト生成 (SSG)

静的サイト生成では、HTMLがビルド時に生成されます。このHTMLは各リクエストで使用されます。静的サイト生成はおそらくSEOにとって最良のレンダリング戦略です。プリレンダリングされているためページロード時にすべてのHTMLが利用可能なだけでなく、ページパフォーマンス（SEOのランキング要素の一つ）にも寄与します。

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

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

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

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

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

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

クライアントサイドレンダリングでは、開発者はJavaScriptを使用してウェブサイトをブラウザ内で完全にレンダリングできます。初期ページロード時には、一般的にコンテンツがほとんど含まれていない単一のHTMLファイルが提供され、JavaScriptを取得してブラウザがすべてをコンパイルするまで待つ必要があります。

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

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

まとめ

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

Next.jsの大きな強みの一つは、上記のレンダリング方法をページごとに選択できることです。ブログ記事は静的に生成し、顧客アカウントダッシュボードはクライアントサイドでレンダリングし、ニュースフィードはサーバーサイドでレンダリングするといった使い分けが可能です。

さらに詳しく

• Next.js: データフェッチ
• Smashing Magazine: Next.jsを使ったインクリメンタル静的再生成の完全ガイド
• Vercel: Next.js: サーバーサイドレンダリング vs. 静的生成