← FC Coder · HomePhase 03 · Lesson 26 · 60 min
Lesson26
Phase Three · Fullstack · Matchday 26 · Two Worlds
Phase 3 启动
Client vs Server
Today's 3 Jobs · 今天这三件事
- 01写 server 组件 · console.log 出现在终端默认就是 server
- 02写 client 组件 · 标 "use client" + useState需要交互才标
- 03🌟 同一页面嵌套两边 · 对比 log 位置终端 vs 浏览器
Phase 2 全 client(use client 第一行)。今天进 server —— 默认 RSC · console.log 出在终端 · 能直读 DB / 文件 / secrets。`"use client"` 标边界 · 需要交互才标。两个世界 · 中间一条电线(HTTP)。Cursor AI 升级 Supervised(爸爸陪坐)。
Concept · 两个世界
Server 默认 · Client 显式标
更衣室 vs 球场 · 中间一条电线
// app/about/page.tsx (server · 默认)
export default function AboutPage() { console.log('Server'); ... }
// app/about/counter.tsx (client · 显式)
"use client";
export function Counter() { const [n, setN] = useState(0); ... }
export default function AboutPage() { console.log('Server'); ... }
// app/about/counter.tsx (client · 显式)
"use client";
export function Counter() { const [n, setN] = useState(0); ... }
Server
默认 · 读 DB / 文件 / secrets · 0 个 useState
Client
"use client" · useState / onClick / 浏览器 API
判断
需要交互 → client · 否则 server
console.log 出在哪 = 代码跑在哪。终端 = server · 浏览器 DevTools = client。
Half 2 · 在屏幕上
写两个组件 · 对比 log 位置
Step 5 双窗对照 = 今天的「哇」
01Server 组件 · console.log 看终端
01Min
Cursor + pnpm dev
老三件套。本课在 /about 路由玩。
02Min
新建 app/about/page.tsx(不加 use client)
export default function AboutPage() { console.log('Server: about'); return <main><h1>About</h1></main>; }。访问 /about 看终端有 log · 浏览器 console 没。
02Client 组件 · 看浏览器 console
03Min
新建 app/about/counter.tsx · 标 use client
'use client'; import { useState } from 'react'; export function Counter() { const [n,setN]=useState(0); console.log('Client',n); return <button onClick={()=>setN(n+1)}>点 {n}</button>; }
04Min
在 about/page.tsx 嵌 <Counter />
import { Counter } from './counter'; ... <Counter /> 放 main 里。刷新页面 · 浏览器 console 看到 Client · 点按钮每次 +1。
03嵌套 + Cursor AI Supervised 体验
05Min
🌟 双窗对照 · 终端 vs 浏览器 console
刷新页面看到 'Server: about' 在终端;'Client 0' 在浏览器。点按钮 · 浏览器多出 'Client 1' '2' '3' · 终端不变。
06Min
Cursor AI Supervised · 让 AI 写 <TimeNow /> server 组件
Cmd+K 选中文件 · 输入 '加一个 server 组件显示当前时间'。AI 给一段 · 和爸爸一起读懂每一行才接受。这是 P3 模式。
07Min
📸 截图战利品
终端 + DevTools 双窗。Phase 3 第一张战利品。
中场 · 讲给爸爸听
4 题 · 重点:两个世界
01Server 和 Client 怎么标边界?为什么默认是 server?Hint ↓
'use client' 第一行。默认 server 减少传给浏览器的 JS + 能用 secrets。
02为什么 Counter 必须是 client?Hint ↓
useState / onClick / DOM 只在浏览器跑。Server 没有这些。
03console.log 出在终端 vs 浏览器 —— 这告诉你什么?Hint ↓
你写的代码到底跑在哪边。看 log 在哪。
04AI Supervised 和 Phase 2 不开 AI 差在哪?Hint ↓
听他说。爸爸要陪坐 · 一起读每一行。
温度计
给「两个世界」打分
今天难度Difficulty
0
今天开心Fun
0