React Architecture：Component Boundary、State Ownership、Client / Server

Learning outcomes

• 能為一個 screen 決定 state ownership。
• 能區分 local UI state、shared UI state、server state。
• 能說明 Browser React 不能取代 backend auth / database constraint。
• 能畫出完整 request / render / update architecture。

1. Component tree 應反映 responsibility

App
├─ Header
└─ CoursePage
   ├─ CourseFilters
   ├─ CourseSummary
   └─ CourseList
      └─ CourseCard

不是每一個 div 都需要 component；也不是整頁只需要 App。

2. 三種 state 先分層

3. 不要把 server data 複製成太多 local state

如果 courses 已經是 source of truth，就不要再存：

passedCourses
failedCourses
averageScore
courseCount

這些通常能由 courses derive。複製越多，越容易彼此不同步。

4. Context 解決傳遞，不自動解決 architecture

Context 可以避免深層 prop drilling，但把所有 state 塞進一個巨大 context 不會自動讓設計變好。State boundary 仍需要依 ownership / update frequency / responsibility 決定。

5. React Browser 不是 security boundary

React UI
  ↓ HTTPS
Backend / Supabase
  ↓ auth + authorization
Database / RLS

隱藏按鈕不等於 authorization。Client validation 不等於 server validation。React code 裡看不到 secret 不代表 backend policy 自動安全。

6. CSR 與 server rendering 不要混成一句「React 網站」

純 client-side React build 可以只是 static HTML/CSS/JS assets；SSR / server components 等架構則引入不同 server execution boundary。遇到實際 framework 時再依該框架版本與官方文件判斷。

7. Project checkpoint：Course Dashboard final architecture

Browser
└─ React App
   ├─ CourseFilters
   ├─ CourseSummary
   └─ CourseList
        ↓
   request layer
        ↓ HTTPS
Node / API / Supabase
        ↓
validation + auth
        ↓
Database / RLS

UI responsibility 留在 React；authorization / data integrity 留在可信 server/data layer。

8. React 96–100 真正學到什麼？