[KM] App Router vs Pages Router in Next.js (撰寫 part 3)

[godmmt]

文章位置: https://github.com/CAFECA-IO/KnowledgeManagement/blob/master/NextJs/app-router-vs-pages-router-in-next-js.md

此張 issue 待完成任務

• [x] 定稿：Rendering——渲染的四種方式、路由系統對四種渲染的應用差異（已有草稿） 需要增加實作範例
• [x] 資料搜集＆研究、撰寫草稿、定稿：Rendering——渲染的四種方式、路由系統對四種渲染的應用差異
• [x] 新增內容：App Router 渲染概念（伺服器元件／客戶端元件）

文章架構

• 前言
  • 初步認識 Next.js
  • 1.React vs Next.js：函式庫與框架
  • 2.為什麼選擇 Next.js
  • 3.Next.js 特色
  • Next.js Router System 路由系統
• 專案建立——資料夾結構差異
  • 建立 Next.js 專案
  • Page Router 資料夾結構
  • App Router 資料夾結構
• Rendering——渲染的四種方式、路由系統對四種渲染的應用差異
• Routing——路由使用差異
• Data Fetching——資料獲取差異
• 逐步遷移的方式
• 實作——App Router
• 結論
  • 條列式整理差異
  • 適用情境
  • 對於專案的建議
• 參考資料

[godmmt]

新增文章結構：

- Rendering——渲染的四種方式、路由系統對四種渲染的應用差異、App Router 渲染概念
  - 了解 Next.js 中的渲染方法：CSR vs SSR vs SSG vs ISR
    - 1. 客戶端渲染 (Client-side Rendering, CSR)
    - 2. 伺服器端渲染 (Server-side Rendering, SSR)
    - 3. 靜態網站生成 (Static Site Generation, SSG)
    - 4. 增量靜態再生 (Incremental Static Regeneration, ISR)
  - Page Router 處理 4 種渲染的方式
    - 1. 客戶端渲染 (CSR)
    - 2. 伺服器端渲染 (SSR)
    - 3. 靜態網站生成 (SSG)
    - 4. 增量靜態再生 (ISR)
    - Page Router 處理 4 種渲染的方式總結
  - App Router 處理 4 種渲染的方式
    - 1. 客戶端渲染 (CSR)
    - 2. 伺服器端渲染 (SSR)
    - 3. 靜態網站生成 (SSG)
    - 4. 增量靜態再生 (ISR)
    - App Router 處理 4 種渲染的方式總結
  - App Router 渲染概念
    - 1. 伺服器元件（React Server Component, RSC）
    - 2. 客戶端元件（Client Component）

[godmmt]

文章架構(目前)

• 前言
  • 初步認識 Next.js
  • 1.React vs Next.js：函式庫與框架
  • 2.為什麼選擇 Next.js
  • 3.Next.js 特色
  • Next.js Router System 路由系統
• 專案建立——資料夾結構差異
  • 建立 Next.js 專案
  • Page Router 資料夾結構
  • App Router 資料夾結構
• Rendering——渲染的四種方式、路由系統對四種渲染的應用差異、App Router 渲染概念
  • 了解 Next.js 中的渲染方法：CSR vs SSR vs SSG vs ISR
  • 1. 客戶端渲染 (Client-side Rendering, CSR)
  • 2. 伺服器端渲染 (Server-side Rendering, SSR)
  • 3. 靜態網站生成 (Static Site Generation, SSG)
  • 4. 增量靜態再生 (Incremental Static Regeneration, ISR)
  • Page Router 處理 4 種渲染的方式
  • 1. 客戶端渲染 (CSR)
  • 2. 伺服器端渲染 (SSR)
  • 3. 靜態網站生成 (SSG)
  • 4. 增量靜態再生 (ISR)
  • Page Router 處理 4 種渲染的方式總結
  • App Router 處理 4 種渲染的方式
  • 1. 客戶端渲染 (CSR)
  • 2. 伺服器端渲染 (SSR)
  • 3. 靜態網站生成 (SSG)
  • 4. 增量靜態再生 (ISR)
  • App Router 處理 4 種渲染的方式總結
  • App Router 渲染概念
  • 1. 伺服器元件（React Server Component, RSC）
  • 2. 客戶端元件（Client Component）
• Routing——路由使用差異
• Data Fetching——資料獲取差異
• 逐步遷移的方式
• 實作——App Router
• 結論
  • 條列式整理差異
  • 適用情境
  • 對於專案的建議
• 參考資料

[godmmt]

App Router 渲染概念

• [x] 伺服器元件（React Server Component, RSC）
• [x] 客戶端元件（Client Component）

[godmmt]

這樣好擠！！！

想把 App Router 渲染概念 拆出來

[godmmt]

took 6 hours

remain 2

[godmmt]

took 2 hours

total: 8

done

---

完成:

• [x] 增加實作範例在：路由系統對四種渲染的應用差異
• [x] 資料搜集＆研究、撰寫草稿、定稿：Rendering——渲染的四種方式、路由系統對四種渲染的應用差異
• [x] 新增內容：App Router 渲染概念（伺服器元件／客戶端元件）=> 草稿