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

目次

• 前提
• Next.js の4つのレンダリング手法
• Next.js の最新動向

---

前提

---

Next.js とは

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

---

レンダリングとは

コンテンツ（コード、データ）をブラウザの画面に表示できる状態にするまでの処理

---

レンダリング手法を学ぶことの重要性

• 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)

【クライアント側】でレンダリングする
=>ロード開始時は何も表示されない

¹

---

SSR、SSG、ISR

【サーバー側】でレンダリングする
=>ロード開始時から表示される

²

---

CSR の特徴

---

CSR のメリット

• 画面遷移が高速
• サーバーの負荷が軽い

---

CSR のデメリット

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

---

CSR が適しているユースケース

ユーザーが頻繁に画面遷移やコンテンツ操作する

• チャット
• 管理画面

---

ここまでのまとめ

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

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

---

2つ目のポイント：【いつ】

• クライアントからのアクセス時：SSR
• ビルド時：SSG
• ビルド時&一定期間ごと：ISR

---

Server-Side Rendering (SSR)

【ユーザーからのアクセス時】に都度レンダリングする

³

---

SSR のメリット

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

---

SSR のデメリット

• 画面遷移が遅い
• サーバー側の負荷が高い

---

SSR が適しているユースケース

データが頻繁に更新される
比較的大規模サービス向け

• SNS
• 動画投稿サービス

---

Static-Site Generation (SSG)

【ビルド時】にまとめてレンダリングする

⁴

---

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()
• サーバー側：データ取得、静的なコンテンツ
  
  ⁵

---

Dynamic Rendering と Static Rendering

• リクエスト時：Dynamic Rendering
  • =>SSR
• ビルド時：Static Rendering
  • =>SSG, ISG

---

おしまい

---

参考

• JavaScriptフレームワーク「Next.js」とは？Reactとの違いや導入方法を解説
• Learn Next.js
• Next.js: The Ultimate Cheat Sheet To Page Rendering
• Next.jsにおけるSSG（静的サイト生成）とISRについて（自分の）限界まで丁寧に説明する
• Next.jsのレンダリングについてまとめました【SSR/SSG/CSR/ISR/TypeScript】
• 【Next.js】レンダリング手法を手書きで図解してみた(CSR / SSR / SSG / ISR)
• Pre-rendering and Data Fetching
• React Essentials
• React/Nextのレンダリングをまとめてみた
• Rendering | App Router
• Rendering | Page Router
• Rendering on the Web

1. https://nextjs.org/learn/basics/data-fetching/pre-rendering ↩

2. https://nextjs.org/learn/basics/data-fetching/pre-rendering ↩

3. https://nextjs.org/learn/basics/data-fetching/two-forms ↩

4. https://nextjs.org/learn/basics/data-fetching/two-forms ↩

5. https://nextjs.org/docs/getting-started/react-essentials ↩