はじめに

こちらの記事から、個人的に気になった点をまとめます。

https://zenn.dev/ryohei0509/articles/71b38519a2a156

Reactの弱点

• 真っ白な状態から画面がスタートする
• その後JS / HTMLを読み込む
  → 動作が重い・遅い

Next.jsでの進化

• HTMLのプリレンダリング（事前読み込み = 最初からある）
• その後JSを読み込む
  → 動作が高速
  → SEO対策になる

プリレンダリングの詳細

Next.jsでは「SSG」と「SSR」の2つが使われる。
（対称的な面がある）

SSG

Static Site Generator

• 予めHTMLを生成
• リクエストのたびにHTMLを再生成しない
  → 高速
• （ビルド後）情報更新ができない
  → 頻繁な情報更新があるサービスには向かない（SNS等）
  → ブログ・ドキュメント・ECサイト商品ページに向いている

SSR

Server Side Rendering

• リクエストがくるたびにHTMLを再生成する
  → 頻繁な情報更新（SNS・ユーザープロフィール）に向いている
  → 動作に時間がかかる / ユーザーを待たせる
  → （Reactと比較し）クライアントのPC性能に依存しない