Next.js で学ぶレンダリング手法

## 目次
- 前提
- Next.js の4つのレンダリング手法
- Next.js の最新動向

---
# 前提

---
## Next.js とは
React をベースに開発されたフレームワーク
開発環境やルーティングなどが簡単に構築、設定できる

https://nextjs.org/

---
## レンダリングとは
コンテンツ（コード、データ）をブラウザの画面に表示できる状態にするまでの処理

---
## レンダリング手法を学ぶことの重要性
- UX
- SEO
- システム構成

---
# Next.js の4つのレンダリング手法

---
## Next.js の4つのレンダリング手法
- Client-Side Rendering (CSR)
- Server-Side Rendering (SSR)
- Static-Site Generation (SSG)
- Incremental Static Regeneration (ISR)
---
# ポイント：【どこで】【いつ】

---
## レンダリング手法を理解するためのポイント
- 【どこで】クライアント側、サーバー側
- 【いつ】クライアントからのアクセス時、アプリのビルド時、一定期間ごと

---
## 最初のポイント：【どこで】

- クライアント側：CSR
- サーバー側：SSR、SSG、ISR

---
# クライアント側とサーバー側の差

---
## Client-Side Rendering (CSR)
【クライアント側】でレンダリングする
=>ロード開始時は何も表示されない
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/697666a5-dcf3-1342-b549-838031324849.png) 
[^1]
[^1]:https://nextjs.org/learn/basics/data-fetching/pre-rendering

---
## SSR、SSG、ISR
【サーバー側】でレンダリングする
=>ロード開始時から表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/e1c86fec-266d-78e2-3dbb-2629f13e759c.png)
[^2]
[^2]:https://nextjs.org/learn/basics/data-fetching/pre-rendering

---
# CSR の特徴

---
## CSR のメリット
- 画面遷移が高速
- サーバーの負荷が軽い

---
## CSR のデメリット
- 初回ローディングに時間がかかる
- クライアント側の負荷が高い
- SEO的な問題あり（最近は解決しつつある）

---
## CSR が適しているユースケース
ユーザーが頻繁に画面遷移やコンテンツ操作する
- チャット
- 管理画面

---
## ここまでのまとめ
最初のポイント：【どこで】
- クライアント側：CSR
- サーバー側：SSR、SSG、ISR

---
## 2つ目のポイント：【いつ】
- クライアントからのアクセス時：SSR
- ビルド時：SSG
- ビルド時&一定期間ごと：ISR

---
## Server-Side Rendering (SSR)
【ユーザーからのアクセス時】に都度レンダリングする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/a1719a9b-5c43-136f-2f0c-ce8b604797c6.png)
[^3]
[^3]:https://nextjs.org/learn/basics/data-fetching/two-forms

---
## SSR のメリット
- CSR よりも初回ロードに時間がかからない
- クライアントの負荷が軽い
- 常に最新のデータを取得できる

---
## SSR のデメリット
- 画面遷移が遅い
- サーバー側の負荷が高い

---
## SSR が適しているユースケース
データが頻繁に更新される
比較的大規模サービス向け
- SNS
- 動画投稿サービス

---
## Static-Site Generation (SSG)
【ビルド時】にまとめてレンダリングする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/b863f8ab-6fa4-89f6-0d58-79016666bdae.png)
[^4]
[^4]:https://nextjs.org/learn/basics/data-fetching/two-forms

---
## SSG のメリット
- CSR、SSR よりも初回ロードに時間がかからない
- SSR よりも画面遷移に時間がかからない
- SEO に有利

---
## SSG のデメリット
- コンテンツが更新された場合、再ビルドしないと反映されない
- コンテンツが多くなるとビルド時間が長くなる

---
## SSG が適しているユースケース
更新頻度が低い、SEO対策を行いたい
比較的中規模サービス向け
- ブログ記事
- コーポレートサイト

---
## Incremental Static Regeneration (ISR)
基本的には SSG と同じ
一定期間ごとにデータを再取得・再ビルドする

---
## ISR のメリット
- SSG のメリットをそのまま継承しつつ、再ビルドせずに更新されたデータを取得できる

---
## ISR のデメリット
- 常に最新のデータが取得できるわけではない

---
## ISR が適しているユースケース
常に最新の情報である必要性はないが適度な更新頻度がある

---
## まとめ
- 最初のポイント：【どこで】
  - クライアント側：CSR
  - サーバー側：SSR、SSG、ISR

- 2つ目のポイント：【いつ】
  - クライアントからのアクセス時：SSR
  - ビルド時：SSG
  - ビルド時&一定期間ごと：ISR

---
# Next.js の最新動向

---
# Next.js v13.4 (2023/05)

---
# App Router

---
## レンダリング手法の選択単位
- Before (Pages Router)：ページ
- After (App Router)：コンポーネント
---
## クライアント側とサーバー側の使い分け
- クライアント側：ユーザー操作、状態管理
  - ```onClick()```、```useState()```
- サーバー側：データ取得、静的なコンテンツ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/1f36485e-c0f0-47e5-4656-250420aaf99a.png)
[^5]
[^5]:https://nextjs.org/docs/getting-started/react-essentials

---
## Dynamic Rendering と Static Rendering
- リクエスト時：Dynamic Rendering
    - =>SSR
- ビルド時：Static Rendering
    - =>SSG, ISG
---
# おしまい

---
# 参考
- [JavaScriptフレームワーク「Next.js」とは？Reactとの違いや導入方法を解説](https://devlog.grapecity.co.jp/nextjs-quickstart/)
- [Learn Next.js](https://nextjs.org/learn/foundations/about-nextjs)
- [Next.js: The Ultimate Cheat Sheet To Page Rendering](https://guydumais.digital/blog/next-js-the-ultimate-cheat-sheet-to-page-rendering/)
- [Next.jsにおけるSSG（静的サイト生成）とISRについて（自分の）限界まで丁寧に説明する](https://qiita.com/thesugar/items/47ec3d243d00ddd0b4ed#csr-client-side-rendering-%E3%81%A8-ssr-server-side-rendering)
- [Next.jsのレンダリングについてまとめました【SSR/SSG/CSR/ISR/TypeScript】](https://m-kenomemo.com/nextjs_rendering/)
- [【Next.js】レンダリング手法を手書きで図解してみた(CSR / SSR / SSG / ISR)](https://qiita.com/cheez921/items/245860c839f7e3a15a69)
- [Pre-rendering and Data Fetching](https://nextjs.org/learn/basics/data-fetching)
- [React Essentials](https://nextjs.org/docs/getting-started/react-essentials)
- [React/Nextのレンダリングをまとめてみた](https://qiita.com/dashogo/items/2227b064ce43d43dd3a9#ssg-1)
- [Rendering | App Router](https://nextjs.org/docs/app/building-your-application/rendering)
- [Rendering | Page Router](https://nextjs.org/docs/pages/building-your-application/rendering)
- [Rendering on the Web](https://web.dev/rendering-on-the-web/?hl=ja)