Contents
Next.js環境のPre-renderingについて
Pre-renderingには２種類あって、Static Generationとサーバーサイドレンダリングがあります。
Next.jsはデフォルトの状態でもプレレンダリングしてくれます。Pre-renderingすることによって事前にHTML要素を生成しておくことができることからブラウザの負荷が少なくなり、ページの表示を高速化することができます。そのため、SEOに強いページを作成することができます。
SPA(single page application)のデメリットである、Googleクローラー視点で、HTML要素がない状態になってしまうというのを回避するための仕組みがこのSSR(Server Side Rendering)という技術です。
Static GenerationとServer Side Renderingの違い
Static GenerationとSever Side Renderingを比較するとHTML要素が生成されるタイミングに違いがあることがわかります。
Static Gererationはjavascriptをビルドした時にHTMLを生成します。
ServerSideRenderingはユーザーがサーバーにページリクエストを投げたタイミングでHTML要素を生成します。Next.jsでデフォルトで適応されているのは、Server Side Renderingのほうですが、Static Generationに変更、またはどちらもあるハイブリッドなものを作ることもできます。ページの特徴によって使い分けましょう。
Static GenerationとServerSideRenderingの使い分け
Next.js公式では、基本的にはStatic Generationのほうを使用することが推奨されている。理由は、ビルドされた時にCDNでキャッシュされて提供されるので、SSRのほうよりも表示されるスピードが早くなることが挙げられます。
Static Generationは、以下のようなページで使用することをおすすめします。
- マーケティングページ
- ブログ記事
- EC商品リストページ
- ヘルプドキュメントページ
パフォーマンスの良い順に並べると、StaticGeneration > ServerSideRendering > Client-Side-Renderingです。可能なかぎり、StaticGenerationを使用しましょう。
ServerSideRenderingは以下のような場合に使用することをおすすめします。
- 即時性が重要になるSNS
- チャットツール
- 動画のストリーミングサービス
Client-Side Renderingは以下のようなページで使用することをおすすめします。
- サービスの管理画面
- 会員制のサイト
- SEOを気にしないページ(受付完了画面など)
情報工学系学部卒のエンジニアです。メインはフロントエンドですが、そのほかにもPython,PHP,GAS,など色んな言語、開発、データ分析、マーケティングなど手広くやってます。