---
title: "全栈开发：把双手从键盘上解放出来的真实实验"
date: 2025-12-09
description: "一人从零搞定全栈评论系统，过去可能赔掉整个周末；这次和 LLM 结对，把数据库、Realtime、乐观更新、测试与防 XSS 一起跑通。一线视角复盘：长上下文、领域型 TypeScript、Next.js SSR 与类型贯通如何协作，以及哪些决策必须留在人类手里。"
canonical_url: "https://yijinlee.com/articles/article-29"
tags:
  - "AI 协同"
  - "Next.js 14"
  - "App Router"
  - Supabase
  - Realtime
  - TypeScript
  - SWR
  - Vitest
  - Playwright
  - 全栈类型安全
topic: "AI 外骨骼"
---

如果有人说“我们来做一套全栈评论系统”，你脑子里可能已经闪过一串噩梦：表结构设计、CRUD、React 状态、无限滚动、防 XSS、顺手再补一波测试。放在从前，这往往等于自愿取消周末。

这篇文章是一次认真的实验记录：**能不能把最耗神的实现与兜底交给 AI，人只管架构、体验与业务规则？** 不堆术语，只从一线视角聊聊这套让我多次**准时下班**的工作流，到底是怎么转起来的。

### 一、那个“读懂我心思”的结对编程伙伴

**1. 长记忆：上下文别再“断片”**

以前用 AI，最怕它**记性差**：你让它改 A，它顺手把 B 拧成麻花；文件一长，就开始胡言乱语。这次在啃 `CommentXX.tsx` 这种“Hooks + Supabase Realtime + 错误边界”叠在一起的块头时，它反而稳住了——能在一个线程里重构订阅逻辑，同时咬住你已经定好的状态契约。

说白了：不是魔法，是**你把业务拆清楚、它就有空间把注意力放在该放的 token 上**。复杂组件照样需要人画心智模型，但“记住上周咱俩说过啥”这块，现代模型已经比早年玩具助手靠谱太多。

**2. TypeScript：接口它比你还熟**

“给个评论数据结构”——它交出来的不只是 `id`、`content`、`created_at`。`author_avatar`、`parent_id`（楼中楼）、该 optional 的字段打上 `?`，一套常见开源评论 schema 里该有的，它往往**自带领域常识**。接口定义从体力活降级成：**你审稿、拍板、它起草**。

**3. 渐进式 MVP：看着它一路“打怪升级”**

我习惯先跑通最小可用，再叠横切能力。写 `route.test.ts` 时，先 mock 最简单返回；通了再追加：**Sentry、Rate Limit 边界、异常分支**。它像高级工程师一样**一层层缝合**，还尽量不让旧用例红——最后堆到 **132** 条用例时，我甚至有点感动：这活以前多半会在“先上线再说”里悄悄烂尾。

### 二、现代全栈架构的“拼图游戏”

**1. SSR 与水合：该懒的地方别客气**

Next.js 14 里最让人头大的，莫过于**哪里服务端、哪里客户端**。这次的做法很朴素：**评论列表能纯读就留在 SSR**，首屏 HTML 直出；**输入框、订阅、乐观更新**再打上 `use client`。用户点开文章，列表先**秒现**，不必为一坨列表交互下载整包 JS——核心 Web 指标里，**LCP** 这类东西，是真的会好看一截。

**2. Realtime 与乐观更新：别让用户干等**

实时评论可以走 Supabase Realtime（底层逻辑复制那一套）。前端侧，AI 帮我把 **SWR 乐观更新**和 **WebSocket 事件**揉进同一个 `useComments`：**点发送，列表先“假装成功”**；等真实事件回推，再做对齐。本地抢先、远端纠偏——**体感快**和**最终一致**可以兼得。

**3. 消灭类型断层：从 SQL 到 Props 一条链**

最烦的是：库表改了，后端 DTO 忘了，前端拿到 `undefined` 直接白屏。做法是：**迁移 SQL 定稿 → `supabase gen types` → 类型一路捅到组件 props**。写 `admin-auth.ts` 这类后台接口时，**类型收窄**能在编译期挡掉一批越权写法——想靠瞎改参数混过去？**先过编译器这关。**

### 三、那些没人愿意干的“脏活累活”，AI 全包了

**1. 防御性编程：它没有“应该不会有人乱传吧”这种侥幸**

生成 `comment-validation.ts` 时，它会顺手带上**长度上限**、邮箱形态、以及 **XSS 清洗**——那种“赶进度先略过”的坑，它反而**偏不略**。安全与边界检查，最适合交给**不知疲倦的副驾驶**。

**2. 测试金字塔：从 Vitest 到 Playwright**

单测、组件测、端到端浏览器测，AI 可以按金字塔往上码。写 `CommentSection.test.tsx` 时，它记得给 **`window.matchMedia`、`ResizeObserver`** 做 mock——老前端都知道，这俩曾经在 StackOverflow 上收割过多少夜晚。

**3. 性能：别一上来就虚拟列表**

无限滚动越来越卡？未必先上重型虚拟列表。**`React.memo`** 包住 Markdown 重渲染、**`useMemo`** 做评论树，再配合 **Intersection Observer** 做分页触发，往往性价比更高——比死盯 `scroll` 事件，**主线程轻松一截**，滑动会从“拖泥带水”变成“德芙广告”。

### 四、敲黑板：人和 AI 的协作边界到底在哪？

AI 再强，也**替代不了**这几件事：

1. **索引与预算**：联合查询它一秒能写，但**存储与读写成本**是你们公司的账，**B-Tree 建在哪、哪张表不值得索引**，得架构师拍板。
2. **RLS 背后的产品规则**：“普通用户能不能删昨天别人的评论？”“哪些操作必须管理员？”——这是**文档与法务友好度**问题，不是语法问题。
3. **带人味的体验**：默认错误是冷冰冰的 `500 Internal Server Error`；我会改成：**“哎呀，网络开小差了，稍后再试一下～”**——**共情与语气**，仍是本地化智慧。

### 写在最后：欢迎来到新范式

跑完这一趟，我眼里的软件工程更像一句话：**AI 搭骨架，人灌领域智慧。** 伟大之处不在于“写得有多快”，而在于**认知负荷搬家**——少纠结参数顺序和正则，多留给架构、体验与业务创新。

我们从“代码纺织工”，慢慢变成**指挥模型干脏活的技术负责人**。去试试吧：**把琐碎交给 AI，把创造的乐趣留给自己。**

## 参考文章：相关链接

- [Vercel AI SDK · Documentation](https://sdk.vercel.ai/docs)（官方文档）— 流式 UI / 工具调用 SDK，支撑「解放双手」的工程路径。
- [Anthropic · Tool use](https://docs.anthropic.com/en/docs/agents-and-tools/tool-use/overview)（权威引文）— 工具调用官方范式，定义人机边界。
- [全栈开发实战复盘：30分钟搞定评论系统](https://yijinlee.com/articles/article-28)（站内深度）— 量化提效的前序样本。
- [我与AI结对编程：如何从"跑起来"到"能上线"](https://yijinlee.com/articles/article-14)（站内深度）— 结对编程质量门槛，防止只求快。