＜Pre-renderingの仕組み＞

• Next.jsがデフォルトで全ページをPre-rendering
• Pre-rendering = 事前にHTMLを生成すること(クライアントがアクセスする前にHTMLを生成していく)
• ブラウザの負荷を下げて、表示を高速化
• 検索エンジンのクローラーにコンテンツを見せられる

＜２種類のPre-rendering＞

• Static Generation

  

• Server-side Rendering

  

＜Static Generation Server Side Renderingの使い分け＞

• ページによってStatic Generation とServer Side Renderingを使い分けることができる

• 基本はStatic Generationを使用したほうがいい。ビルドされるCDNにキャッシュされて提供される為、ServerSideより早くなる

  

＜静的ジェネレーション＞

pages配下の

外部データなし

1. ビルド時にHTMLをレンダリング