📝
[Next.js入門]Pre-rendering メモ
Pre-renderingとは?
「事前にHTMLを生成する仕組み」
- ブラウザの負荷を下げて表示を高速化
- 事前にHTMLが生成されているため、検索エンジンのクローラーにコンテンツを見せることができる(SEOに有利になる)
Pre-renderingのやっていること
Next.jsではデフォルトで全てのページにPre-renderingが適用されている。
それぞれのページで生成されたHTMLは、
そのページを表示するのに必要な最低限のJavaScriptと紐付けがされている。
(= hydration )
2種類のPre-rendering
Pre-renderingの方法には
- Static Generation(SSG)
- Server-side Rendering(SSR)
の2種類の方法がある。
2つの大きな違いは いつHTMLが生成されるか
Static Generation
「ビルド時にHTMLを生成する」
next build
上記のコマンドを叩いた時点でHTMLが生成されるので、
ユーザーは既に用意されたHTMLにアクセスすることができる
→全てのユーザーに対して同じHTMLを表示することができる
Server-side Rendering
「ユーザーがリクエストを投げた時に、HTMLをサーバー側で生成する」
例) ページにアクセスした時
リクエストが来るたびにサーバー側で生成されたHTMLが表示される
→常に最新のHTMLを表示することができる
使い分け
Next.jsでは、ページごとに
Static GenerationをするかServer-side Renderingをするか
選択することができる
Static GenerationはビルドしたものがCDNにキャッシュされるため、
基本的にはStatic Generationを利用することが推奨されている。
Static Generationが最適なページ
- 更新頻度が低い
- ユーザー:コンテンツ=1:Nのもの
例)ブログ、ECサイト、LP、お問合せページなど
Server-side Renderingが最適なページ
- 更新頻度が高い
- ユーザー:コンテンツ=N:Nのもの
例)SNS、チャット、動画配信
外部データを使いたい時
getStaticProps()
Static Generationを使用する際に、
DBや外部のAPIから取得したデータをHTMLに反映したい場合は、
getStaticProps() を使用する
- 外部データの取得
- async/awaitを使用した非同期処理の制御が可能
- 本番環境ではビルド時に実行される
- 開発環境ではリクエストごとに実行される
- /page配下でのみ使用可能
getServerSideProps()
Server-side Renderingをする際に使用する関数
- getStaticProps同様に、外部のデータを取得できる
- async/awaitを使用した非同期処理の制御が可能
- リクエスト毎に実行される
- /page配下でのみ使用可能
Discussion