← FC Coder · HomePhase 03 · Lesson 29 · 60 min
Lesson29
Phase Three · Fullstack · Matchday 29 · Two Roads to Data
fetch vs Server 直读
哪条路省?
Today's 3 Jobs · 今天这三件事
- 01Client 页面用 fetch + useEffect 拉 /api/players绕一圈
- 02Server 页面 async + 直接 import players一步到位
- 03🌟 DevTools Network 对比请求数哪条路省
Client fetch 绕一圈(浏览器 → /api → 数据)· Server `async function` 直走(代码里 await)。自家数据用 server 直读 · fetch 留给外部 API。Network 标签一图看懂。
Concept · 两条路
Client 绕 vs Server 直
// server · 直 import
export default async function() { ... players.map() }
export default async function() { ... players.map() }
Client
HTML → JS → fetch → 渲染(2 步)
Server
HTML 已带数据 → 渲染(1 步)
fetch
留给外部 API(天气 / GitHub)
Server Component 能 `async function` · Client 不能。这是边界。
Half 2 · 在屏幕上
两条路 · Network 对比 · AI
01Client fetch · 浏览器问 API
01Min
Cursor + pnpm dev
老三件套。
02Min
app/players-client/page.tsx · use client + useEffect fetch
'use client'; useState/useEffect。fetch('/api/players').then(r => r.json()).then(setData)。渲染 .map。
03Min
访问 /players-client · 看慢一拍出现 22 人
刷新看到先白页 / 再列表。这是 client 数据加载的常态。
04Min
DevTools Network · 看 /api/players 请求
F12 Network 标签 · 刷新 · 看到 HTML + 一个额外 /api/players 请求。
02Server 直读 · 没 fetch
05Min
app/players-server/page.tsx · async function 直 import
不标 use client。export default async function ServerPlayers() { return <ul>{players.map(...)}</ul>; }。
06Min
访问 /players-server · 立刻看到 22 人
无白屏 · HTML 已经带内容。0 个额外请求。
07Min
DevTools Network · 没 /api/players
只有 HTML 请求。Server 自己直读 · 不绕 API。
03🌟 Network 对比 + AI
08Min
AI Supervised:写 /clubs 列所有俱乐部 (server)
Cmd+K · 'server 组件 · 用 new Set 去重 club · 渲染列表'。爸爸陪坐。
09Min
📸 截图 Network 对比两页面
Phase 3 第四张战利品。
讲给爸爸听
4 题 · Two Roads
01Client fetch 为什么慢一拍?Hint ↓
等 JS 加载 + 跑完 + 拿数据 · 才渲染。
02Server 直读为什么不 fetch?Hint ↓
代码在服务器跑 · 直接 import 不绕。0 跳。
03fetch 什么时候才用?Hint ↓
调外部 API(天气 / GitHub) · 或浏览器需要动态拉数据。
04Network 标签告诉你什么?Hint ↓
Client 多一个 /api 请求 · Server 没。一图看懂差别。
温度计
给「两条路」打分
今天难度Difficulty
0
今天开心Fun
0
Final Whistle · 终场哨
Network 对比一图明白 —— Server 直读省一跳。
还有 9 步没打勾。Step 7 Network 看到差别 = 算过。