Next.js CSR/SSG/ISR/SSR/Hybrid

Nextプロジェクトをやりながら、Nextjsをどう使えば良いのか確実にわからなくて
CSR/SSG/ISR/SSR/Hybridに関して調べました！

CSR(Client Side Rendering)

クライアント側（ブラウザ）でレンダリングします

メリット

• アプリケーションで必要なHTML、React、Jsがクライアント側でレンタリングするので、
  一回ローディングすると早くUIを提供してくれる
• SPAで、部分部分見せる
• サーバ負荷が少ない

デメリット

• ページローディング時間（TTV（time to veiw））が長い
• JSの活性化が必須
• SEO最適化が難しい
• セキュリティーに弱い

SSG(Static Site Generation)

サーバー側でレンタリングします。
サーバーでビルドする時レンダリングします。

メリット

• ページローディング時間（TTV（time to veiw））が短い
• JSの活性化がなくても早く見れる
• SEO最適化に良い
• セキュリティーが強い

デメリット

• ビルドする時レンダリングされるのでデータが静的
• USER別情報提供が難しい

ISR(Incremental Static Regeneration)

SSGをもっと強化してくれます。
サーバー側でレンタリングする、定期的にレンダリングします。（時間単位で）

メリット

• SSGの長所を全部持ってる
• データーが定期的にアップデートする

デメリット

• Liveデーターではない
• USER別情報提供ではない

SSR(Server Side Rendering)

クライアントがリクエスト時にレンダリングします。

メリット

• ISR長所を全部持ってる
• Liveデーターを使うので最新データーを反映したHTMLをもらえることができる
• リクエストする時レンダリングをするためUSERに合うデーターを送ってくれる

デメリット

• リクエストする時サーバーからレンダリングして送るので比較的に遅い
• サーバーの過負荷がかかる可能性がある

Hybrid Web App

混合特定の目的を達成するために、2つ以上（CSR, SSG, ISR, SSR）の機能や要素の結合が可能

※WEB開発する時一番大事なのがTTV(Time To View)``TTI(Time To Interact)です。
これを守るためNextをうまく使うのは大事たと思います。

Buildのとき確認

λ:SSR
○:Static
●:SSG