Nextjs レンダリングについて整理してみた

目次

• SSG(データ付き)
• SSR
• SSG + CSF(データなし)

用語

*First Contentful Paint (FCP)
→ウェブページの最初の要素が表示されるまでの時間を測定
*Largest Contentful Paint (LCP)
→ページの読み込み中に表示される最も大きな要素が表示されるまでの時間を測定
*Time To First Byte(TTFB)
→ウェブページのリクエストから最初の応答が返るまでの時間
*hydrate
→HTMLとJSの紐付け
*CSR
→クライアントサイドレンダリング

SSG(Static Site Generation)

---

静的サイト生成
概要
事前にウェブページを生成し、静的な形式で提供

1. user request
2. vercelからHTML, jsonデータのレスポンス
3. jsのレスポンス
4. ユーザに表示完了
5. hydrate(htmlとjsの紐付け)
6. ユーザが操作可能になる

SSR(Server Side Rendering)

---

サーバーサイドレンダリング
概要
サーバーで「データ取得」「HTMLレンダリング」を行う

1. user request
2. vercelのlambdaが走りデータをデータベースから取得&HTMLレンダリング
3. HTMLをブラウザでparseし、ブラウザで表示
4. 以下省略

SSG+CSF(Client Side Fetching)

---

概要
SSGとクライアントでのfetchを合わせた形(staticデータなし)

• 一つ目のSSGでの静的jsonデータはなしでクライアントでデータをフェッチ
  

1. user request
2. 同様にSSGで静的なHTML、JSを取得&hydrate
   • ここでFCPをユーザに表示
3. Interactiveでユーザが操作可能になってからデータフェッチ

• CSFの特徴として他二つのレンダリングと違い、FCPとLCPのタイミングが分かれる。