前端名词地图：AI 编程时它到底在说什么

0030 秒速览：三句话，然后决定你从哪一节开始

如果只记三句话

1. 前端 = 在访客的浏览器里跑的那一半。后端 = 在服务器上跑的那一半。凡是"别人一打开网页就该发生的事"，都属于前端。所以前端的问题，往往只有"换台电脑 / 换个网络 / 换个浏览器"才暴露出来。
2. AI 嘴里的前端词，九成落在四层里：内容（HTML）、样式（CSS）、交互（JavaScript 与框架）、工具链（Node / npm / 打包）。这四层再套上外面那一层"交付"（部署、域名、缓存、跨域），就是本文的整张地图。听到一个生词，第一反应不该是"这什么"，而是"它属于哪一层"——定层之后，你基本能猜出它大概管什么。
3. 看见页面 ≠ 页面能用。服务器先把一份"死的"页面发到浏览器（这就是 SSR / 静态生成在干的事，§08 讲），浏览器再给它装上"活"的能力（这一步叫水合）。所以会出现"页面明明显示了，按钮就是点不动"这种现象——它有个专门的报错名字，叫 hydration mismatch。

一张表：你现在的处境 → 该看哪几节

本文校对的版本快照（你可以自己复核）

下面这些数字不是从记忆里写的，是写作当天从官方源读出来的。你可以在自己的终端里跑同样一条命令来验证——这也顺便是你第一次用上"包管理器"这个东西（§04 会讲）：

npm view react version next version vite version tailwindcss version typescript version
node -v   # 参考：本文写作时 LTS 是 v24.21.0，最新是 v26.8.2

01「前端」到底是哪一半：一次网页访问的全过程

你其实每天都在使用"前端"，只是没这么叫它

你打开一个购物网站，看到商品图片、点进详情页、在搜索框里打字、点"加入购物车"、页面右上角数字变成 1——这一连串体验，全是前端在干活。前端的工作只有一句话：把数据变成你眼睛能看到、手指能点的界面，并且在你的浏览器里当场响应你。

"前端"里的"前"，指的不是技术难度，也不是时间先后，而是离用户更近的那一端。与之相对的"后端"，是离数据更近的那一端。服务器就是那台一直开着、专门回应别人请求的电脑——它可能在你房间的机柜里，也可能是云上租来的一台机器。

四个词各自管什么

补两个你一定会遇到的相关词：API（Application Programming Interface，接口）是前后端之间的"点菜窗口"——前端按约定格式递过去一个请求，后端按约定格式回一份数据；全栈（full-stack）不是一种技术，而是"前端后端都能自己写"的人或项目。

从你在地址栏敲下网址，到看见页面，中间发生了什么

这六步里，第 3～6 步基本都在前端的地盘上。理解了这条链，很多术语就能自动归位：HTML / CSS / JavaScript 管第 4 步，构建工具管"为什么源码不能直接用、要先生成这些文件"，SSR / SSG 管第 3 步的 HTML 是谁在什么时候生成的，水合管第 5 步。

"客户端 / 浏览器端 / 前端"是同一件事吗

基本是，但语气不同：

• 前端：强调"这是项目里的一块工作"，说人、说岗位、说技术栈时用它。
• 客户端 / 浏览器端：强调"这段代码在哪台机器上跑"。AI 说"这段只能在客户端跑"，意思是它依赖浏览器才有的能力（比如读取你点的位置、访问摄像头、读写本地存储）。
• 服务端 / 服务器端：反方向，指这段代码在服务器上执行，你访客的浏览器里根本没有它。

为什么这个区分值钱？因为前端代码是"公开"的。任何访客都能按 F12 看到你发到浏览器的所有内容。所以有一类错误是致命的：把数据库密码、付费接口的密钥写进了前端代码。§10-4 会专门讲这件事。

02一个网页只需要三种文件：HTML / CSS / JavaScript

骨骼、皮肤、肌肉

三种文件各自负责一件事，这个分工从 1990 年代到今天没变过，所有前端框架最后都得回到这三样东西上：

HTML 里的"标记"写成一对尖括号包起来的标签（tag），比如 <h1>标题</h1>；标签加上它包住的内容合起来叫一个元素（element）；写在标签里、给元素补充信息的键值对叫属性（attribute），比如 <a href="https://example.com"> 里的 href 就是"链接指向哪里"这个属性。

这个类比到哪里就不准了

类比必须说边界，否则你会用它推出错的结论：

• 三者会互相渗入。JavaScript 可以改样式（改颜色、改位置），CSS 也能做出"动"的效果（鼠标悬停变色、展开收起），HTML 里甚至能写样式。它们不是三层互不打扰的皮，而是三种职责。
• 现代框架会把三者写进同一个文件。React 的组件文件里，长相（HTML 样子的 JSX）、逻辑（JS）、样式（类名或 CSS 对象）常常写在一起。这时"三种文件"变成"三种职责"，而不是三个物理文件。
• CSS 不是"可选的美化"。手机屏幕上能不能看清、按钮够不够大能点到，这些是可用性问题，不是审美问题。

后缀名认亲：AI 生成的文件到底在写哪种语言

03最小例子：三个文件，不装任何东西就能跑

这一节请真的动手做一遍，五分钟。做完你会同时获得三样东西：一个能跑的网页、"三种语言各管什么"的手感、以及后面所有术语的落脚点。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个网页</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>你好，这是我做的网页</h1>
  <p id="count">你已经点了 0 次</p>
  <button id="btn">点我</button>
  <script src="app.js"></script>
</body>
</html>

body {
  font-family: system-ui, sans-serif;
  background: #0f1117;
  color: #e4e6ef;
  display: flex;                /* 让子元素排成一行，居中 */
  flex-direction: column;
  align-items: center;
  padding: 48px;
}
button {
  font-size: 18px;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  background: #6366f1;
  color: white;
}
button:hover { background: #4f46e5; }   /* 鼠标移上去变深一点 */

let n = 0;
const btn = document.getElementById("btn");
const label = document.getElementById("count");

btn.addEventListener("click", () => {
  n = n + 1;
  label.textContent = `你已经点了 ${n} 次`;
});

从"我电脑上能跑"到"别人能看到"，还差四步

上面这个网页有个致命特点：只有你能看。它躺在一个 file:// 开头的地址上，访问的是你硬盘里的文件。要让别人访问，需要走完这条链——后面每一节都在拆这链上的一环：

04npm install 到底装了什么：包、依赖、node_modules

先解决一个疑问：写网页为什么要装 Node.js

JavaScript 原本只活在浏览器里。Node.js 做的事，是把 JavaScript 从浏览器里搬出来，装进你的电脑，让它能像 Python 一样在命令行跑。官方对它的定义是 "an asynchronous event-driven JavaScript runtime"——异步、事件驱动、JavaScript 运行环境；翻译成人话：一个能跑 JavaScript 的程序；"异步、事件驱动"说的是它的做事方式——不傻等一个任务做完，而是一边等结果一边接下一件活。这里的运行环境（runtime）指"负责执行你这份代码的那个东西"：浏览器是 JavaScript 的一种运行环境，Node.js 是另一种。

那它跟写网页有什么关系？因为现代前端开发的所有工具（构建、打包、代码检查、本地服务器）都是用 JavaScript 写的程序，必须靠 Node.js 才能运行。所以"装 Node"不是学一门新语言，而是装一个能让工具跑起来的底座。

验证装没装、装得够不够新：

node -v      # 本文写作时 LTS 是 v24.x，最低要求一般是 20.9+
npm -v       # npm 随 Node 一起装好，不需要单独装

五个词一次讲清

这一组词是新手最先被砸晕的地方，因为 AI 会在同一段话里同时用到它们。它们其实是同一件事的五个侧面：

把这五个词串成一句完整的话，AI 常说的那句就通了：

你实际会敲的命令

下面每条都可以直接复制。注意最后两条是"修复类"命令，遇到怪问题时先跑它们，比改代码有效得多。

# 1. 拿到一个已有项目后的第一步：按清单装齐所有依赖
npm install

# 2. 装一个包（会自动记进 package.json 的 dependencies）
npm install tailwindcss

# 3. 装一个"只在开发时用、上线不需要"的包（记进 devDependencies）
npm install -D typescript

# 4. 看 package.json 里定义了哪些命令（AI 让你 npm run xxx 时，xxx 就在这）
npm run

# 5. 不安装、直接用一次某个命令行工具（比如建一个新项目）
npx create-next-app@latest my-app

# 6. 修复类①：依赖装坏了、报错莫名其妙 —— 删掉重装
rm -rf node_modules package-lock.json && npm install

# 7. 修复类②：确认自己用的是哪个 Node（版本太低是无数怪报错的根因）
node -v

第 5 条里的 npx 值得单独说：npm 是"装到项目里"，npx 是"临时借来跑一次"。建新项目这种一辈子跑一次的事，用 npx 更干净，不会在硬盘上留一堆用不到的包。

npm、npx、pnpm、yarn、bun：五个"跑命令的家伙"差在哪

一个真实的 package.json 长什么样

下面这份是照抄就能用的最小形态，每一行我都标了它是干嘛的：

{
  "name": "my-first-app",          // 项目名，小写、不能有空格
  "private": true,               // 防止误发布到公共仓库
  "type": "module",               // 用现代 import/export 写法
  "scripts": {
    "dev": "vite",                 // npm run dev 起开发服务器
    "build": "vite build",         // npm run build 生成上线成品
    "preview": "vite preview"     // 本地预览 build 出来的成品
  },
  "dependencies": {
    "react": "^19.3.0"            // 运行时要用的包
  },
  "devDependencies": {
    "vite": "^8.3.0",
    "typescript": "^7.0.2"       // 只在开发和构建时用
  }
}

版本号前面那个 ^ 是语义化版本（semver）的写法：19.3.0 由"大版本.小版本.补丁版本"三段组成，^19.3.0 的意思是"允许自动升到 19 开头的任何更高版本，但不要跳到 20"。大版本升级通常意味着有东西被改坏了，这正是 package-lock.json 存在的意义——它把实际装的版本钉死，防止"昨天还好好的，今天装出来就崩了"。

排错速查：这一类报错九成和代码无关

这张表的价值在于：这一整类报错都不需要你看懂前端代码，它们说的是"环境没搭好"。新手最大的浪费就是把它们当成"我代码写错了"，然后开始瞎改业务逻辑。

05「构建」到底在构建什么：dev server、打包、上线产物

为什么源码不能直接扔给浏览器

回到 §02 那张后缀表：.tsx、.ts、.vue 浏览器都不认识；一个项目里成百上千个文件互相引用（这叫模块，用 import / export 互相引用），浏览器一个个去要会非常慢；Tailwind 那串类名也需要被翻译成真正的 CSS。

所以现代前端有一条铁律：你写的是"源码"，浏览器跑的是"产物"，这两者之间必须有一道加工工序，这道工序就叫构建（build，也叫打包 / bundle）。负责这件事的程序，叫构建工具（bundler）。

dev server：为什么 AI 总要你开着一个终端窗口不动

开发服务器（dev server）是构建工具在你电脑上临时开的一个小网站。它做三件事：

• 实时加工：你一保存文件，它立刻在内存里翻译好，浏览器一刷新就是最新版。
• 给个地址：通常是 http://localhost:5173（Vite 默认）或 http://localhost:3000（Next.js 默认）。localhost 的意思是"这台机器自己"。
• 报错更友好：出错时它在页面上盖一层红色提示，比浏览器控制台里一行天书清楚得多。

那个终端窗口不能关——关了服务器就停了，网页立刻打不开。这就是"为什么 AI 让我开两个终端"的答案：一个跑 dev server（一直占着），另一个敲别的命令。

其中最常被提到的能力叫 HMR（Hot Module Replacement，热模块替换）：你改了一行样式，页面不用整页刷新，那一块自己就变了，表单里填了一半的内容也不会丢。

构建产物里的四个词

产物放在哪？Vite 项目默认是 dist/ 文件夹，Next.js 是 .next/。部署时真正被传上服务器的就是产物，不是你写的源码——这一点很关键：所以"我明明改了源码，线上怎么没变"的常见原因就是没有重新构建、重新部署。

Vite 是什么，和 webpack 差在哪

Vite（法语"快"的意思，读作"veet"）是目前新项目里最主流的构建工具，最新是 8.3。它的官方说明写得很直白：它由两部分组成——一个本地开发服务器，和一个打包命令。它相对老牌工具 webpack 的核心差别是：

还有两个你在 Next.js 里会看到的同类词：Turbopack 是 Next.js 官方的构建工具（Next.js 16 的发布说明把它列为"所有应用的默认打包器"，官方称构建快 2–5 倍），Rolldown 是 Vite 8 用的打包器。它们是同一层的不同实现——看到这些名字，你只需要知道"它们是那一层的工具"，不必记住区别。

最容易混的一张表：dev 与 build

06组件、props、state、hook：React 那一套词

库和框架：一句分界

AI 会说"React 是库，Next.js 是框架"，这不是抠字眼：

• 库（library）：你调用它的功能。React 就属于这一类——它提供"把界面拆成组件"的能力，但路由、取数据、打包，它都不管，你自己选。
• 框架（framework）：它调用你的代码。Next.js 属于这一类——它规定文件放在哪个文件夹、页面怎么写、什么时候渲染，你按它的规矩填内容。

所以"React 项目"和"Next.js 项目"的关系是：Next.js 是一个把 React 当零件用的框架（官网自称 "The React Framework"）。这也解释了一个常见困惑：为什么同样写 React，教程里的代码长得不一样——它们用的是不同的框架（Next.js / Remix / 纯 Vite + React）。

组件：把页面切成能被复用的块

组件（component）是 React 世界的第一概念，一句话：一个"返回界面长相"的函数。你给它取个名字，它就变成一个可以反复使用的标签。

// 定义一个组件：名字首字母必须大写，这是 React 认人的方式
function Greeting({ name }) {
  return <h1>你好，{name}</h1>;
}

// 使用它 —— 用起来就像一个自己发明的 HTML 标签
<Greeting name="小明" />
<Greeting name="小红" />

为什么值得多这一层？因为页面里"重复出现的东西"太多了：按钮、卡片、导航栏、列表中的每一行。组件让你只写一次，改一处就全都变了。当你听到 AI 说"我把它抽成一个组件"，意思就是"这段重复的长相和逻辑，我要给它取个名字收起来"。

JSX / TSX：把 HTML 写进 JavaScript 里

上面那段代码里出现的 <h1>你好，{name}</h1> 既不是 HTML 也不是字符串，而是一种叫 JSX 的写法（TypeScript 版本叫 TSX）：长得像 HTML，但里面可以用 {} 插入 JavaScript 表达式。它不能直接被浏览器执行，必须先被构建工具翻译成普通的 JavaScript 函数调用——这正是 §05 里"必须要有构建"的第一大原因。

两个你现在就该知道的小差别：JSX 里写样式类名要用 className（不是 class），闭合标签必须写全（<img /> 不能省那个斜杠）。AI 生成的代码里出现它们时，不是什么特殊语法，只是 JSX 的规矩。

props 和 state：外面递进来的 vs 自己记着的

这两个词是 React 最核心的一对，也是最容易混的一对。分界只有一条：props 是别人给的，state 是自己记的。

function Counter() {
  const [n, setN] = useState(0);   // state：初始值 0，setN 是唯一的改法
  return (
    <button onClick={() => setN(n + 1)}>
      点了 {n} 次
    </button>
  );
}

hook：以 use 开头的函数是什么

hook（钩子）是 React 提供的一批特殊函数，命名都以 use 开头。它们的共同作用是：把一个"外挂能力"接进组件里。你已经见过 useState（给组件一份记忆）。最常出现的另外两个：

hook 有两条铁律，违反了会报错，而 AI 偶尔会犯：① 只能在组件函数（或其他 hook）的最外层调用，不能放进 if、循环或普通函数里；② 必须以 use 开头命名。你不需要背，只需要在报错里看到 React Hook "useXxx" is called conditionally 时知道：这是"hook 被放进了条件判断里"，不是玄学问题。

"重新渲染"不是刷新页面

AI 说"这个组件会重新渲染（re-render）"，很多人会理解成"页面重新加载"。不是：

注意第 4 步——页面不会整页重画，你输入框里没提交的内容也不会丢。这也是为什么"重新渲染"听起来吓人、实际通常只是一小块变了一下。至于第 4 步里"怎么对比"的技术手段，就是 §07 要讲的虚拟 DOM。

一个能跑的最小 React 项目

下面三条命令建出一个真实可跑的 React + TypeScript 项目。这是 AI 最常让你敲的一组：

# 1. 生成项目（npx = 临时借工具用一次，见 §04）
npm create vite@latest my-app -- --template react-ts

# 2. 进目录、装依赖
cd my-app
npm install

# 3. 起本地开发服务器（这个终端窗口要一直开着）
npm run dev

把 src/App.tsx 的内容换成下面这段，你就在真项目里用上了组件、state 和事件：

import { useState } from "react";

function App() {
  const [n, setN] = useState(0);
  return (
    <div style={{ padding: 40 }}>
      <h1>你已经点了 {n} 次</h1>
      <button onClick={() => setN(n + 1)}>点我</button>
    </div>
  );
}

export default App;

对比 §03 那 6 行原生 JavaScript：那里你手动找到按钮、挂监听、再手动改文字；这里你只改了一个数字 n，界面自己跟着变。这个差别，就是"命令式"与"声明式"的分水岭——§07 会专门讲它。

易混速查（跨层的总表在 §12）

07DOM、事件、虚拟 DOM：页面是怎么"动"起来的

DOM 是什么：浏览器把 HTML 变成一棵可以改的树

MDN（Mozilla 维护的 Web 技术文档站，前端最权威的免费参考书）对 DOM 的说明是：它"把文档的结构——比如表示网页的 HTML——在内存里表示出来"，而且"用一棵逻辑树来表示一个文档"。翻译成人话：

所以你会在报错和 AI 的话里反复看到这些词：节点 / 元素（树上的一个个标签）、document（整棵树的入口）、document.getElementById（按身份证号找节点，就是 §03 里用的那个）。F12 打开开发者工具，Elements 面板里看到的就是这棵树。

事件：点击和输入是怎么被接住的

事件（event）指"用户或浏览器做了点什么"：点击（click）、输入（input）、提交表单（submit）、页面加载完（load）、键盘按下（keydown）。事件监听（event listener）是"盯住某个元素的某类事件，发生时就执行我给的这段代码"；被交出去执行的那段代码叫回调（callback）。

// 原生写法：找元素 → 挂监听 → 给一个回调
document.getElementById("btn").addEventListener("click", () => {
  console.log("被点了");   // 在浏览器 Console 里打印一行，最常用的排查手段
});

// React 写法：把"发生什么"直接写在标签上
<button onClick={() => setN(n + 1)}>点我</button>

两种写法都在做同一件事，区别只在于"谁来负责把事件接到那棵树上"。React 里那个 onClick 不是你手动挂的监听，而是 React 在渲染时替你接上的——这也解释了 §08 里的水合：水合的一部分工作，就是把这些监听真正挂到浏览器的 DOM 上。

命令式 vs 声明式：现代前端写法的分水岭

这是本节最值钱的一对词，理解它之后，你能看懂 AI 为什么那么写代码：

React 的核心卖点就是声明式：你只管把状态算对，页面长什么样由状态推导出来。代价是你得放弃"我直接改那一行"的直觉——新手最常见的错误之一，就是在 React 里用 document.getElementById 硬改页面，结果下一次重新渲染时改动被覆盖掉。这就是"别在 React 里直接操作 DOM"这句话的由来。

虚拟 DOM 是什么，以及它"不是"什么

虚拟 DOM（Virtual DOM）是一层用 JavaScript 对象描述的"假树"，它对应着真实 DOM 应该长什么样。重新渲染时，React 先生成一份新的假树，和上一份对比，算出"真正变了的是这几处"，然后只改那几处真树。

关于它最常见的误解是"虚拟 DOM 比手写快"。准确的说法是：它让框架能自动做够好的更新，而你不用手写更新逻辑。在极端场景下，一个精心手写的更新可以比它更快；虚拟 DOM 买到的是"开发省心 + 性能不差"，不是"性能最强"。当 AI 说"虚拟 DOM 让它更快"时，你可以放心地把它理解为一句简化的说法，而不是精确结论。

你什么时候才会真的碰到 DOM

• 看到 useRef：想让某个输入框自动获得焦点、想拿到元素的实际宽高、想接入一个不认识 React 的第三方库（图表、地图、编辑器）。
• 看到 document.querySelector / window（window 是浏览器给页面的"总控制台"对象，读写当前窗口、地址、本地存储都从它出发）：在纯 JavaScript 项目里，或者在框架外挂的一段脚本里。React 组件里出现它们，通常是"绕过了框架"的信号，值得问 AI 一句为什么。
• 看到"SSR 里不能直接用 window"：因为服务端根本没有浏览器、没有 DOM，所以那段代码在服务端会直接报错 window is not defined。这是服务端 / 客户端分界最典型的一道报错，§08-7 会接着讲。

08CSR / SSR / SSG / ISR / 水合：AI 最容易唬人的一节

为什么会有这么多"渲染"

渲染（render）在前端有两个常用意思，先分清：① "把数据变成界面描述"（§06 说的组件重新渲染）；② "把界面变成浏览器能显示的 HTML"。这一节说的是第二种，问题是：这份 HTML 到底在什么时候、在哪台机器上生成？

之所以有这么多方案，是因为有三个需求天然互相拉扯：

• 首屏要快：访客打开网页的一瞬间就想看到东西，不想对着白屏等。
• 要能交互：看到之后还得能点、能输入。
• 内容要新：数据变了，页面得跟着变。

把这三点排不同优先级，就长出了 CSR / SSR / SSG / ISR 这四种模式。它们不是"谁更先进"的排名，而是四种取舍。下面每一种都按同一个模板讲：HTML 在哪生成、JS 什么时候到、最适合什么、代价是什么。

CSR：先给一个空壳，页面在浏览器里现拼

CSR（Client-Side Rendering，客户端渲染）的做法是：服务器只发一个几乎空的 HTML 和一大包 JavaScript，浏览器下载、执行 JS 之后，才把界面拼出来。你访问的其实是一个 SPA（Single Page Application，单页应用）——整个网站只有一个 HTML 页面，切换页面时不再向服务器要新页面，而是 JS 自己换内容。

• 最适合：后台管理界面、需要大量本地交互的应用（在线编辑器、聊天工具）。
• 代价：首屏慢（要等 JS 下载执行完才看得到东西）；搜索引擎爬虫可能抓不到内容，对 SEO（Search Engine Optimization，让搜索引擎更好收录你）不友好。
• 你会看到的现象：打开页面先白一下，然后内容"刷"地出现；F12 看网页源码，正文是空的。

SSR：服务器先拼好 HTML 再发过来

SSR（Server-Side Rendering，服务端渲染）的做法是：每次有人访问，服务器当场把 HTML 拼好发过去。访客立刻能看到完整内容（首屏快、SEO 友好），但页面刚到时还不能交互——因为负责交互的 JavaScript 还在路上，或者还没执行。

• 最适合：内容对搜索引擎重要、且每个人看到的内容可能不同的页面（电商商品页、社交动态）。
• 代价：服务器每次请求都要干活，人多时压力大；比静态页面慢一点。

SSG：提前拼好，来谁都发同一份

SSG（Static Site Generation，静态站点生成）的做法是：在构建那一刻（你跑 npm run build 的时候，见 §05）就把所有页面的 HTML 生成好，之后谁访问都发同一份现成的文件。它最快、最省钱、最安全（没有服务器端代码在跑）。

• 最适合：内容不常变的页面：博客、文档、产品介绍、官网。
• 代价：内容变了必须重新构建、重新部署；不适合"每次都要看最新数据"的页面。

ISR：静态页 + 过期后偷偷重做一份

ISR（Incremental Static Regeneration，增量静态再生）是 Next.js 提出的一种折中：页面仍是静态生成的、发得飞快，但你给它定一个"保质期"；过期后第一个访问的人会看到旧页面，同时服务器在后台悄悄生成新的一份，后面的人就拿到新的了。

• 最适合：内容会更新但不要求秒级实时的页面：商品列表、排行榜、新闻列表。
• 代价：有过期窗口，不是"永远最新"。
• 注意版本差异：Next.js 16 把缓存写法改成了 use cache 指令，官网把旧的 fetch 缓存配置明确标为 "Previous Model"（旧模型）。概念没变，写法变了——所以看到老教程里的写法时，先让 AI 按当前版本文档核对一遍。

水合（hydration）：为什么"页面看着有了，却点不动"

这是本节最该记住的一个词。Next.js 官方文档给的定义是：水合是 React 把事件处理器接到 DOM 上、让静态 HTML 变得可交互的过程。用一个类比：

hydration mismatch（水合不匹配）是最常见的 SSR 类报错，意思是：服务器渲染出的 HTML，和浏览器第一次渲染算出来的结果对不上。三种高发原因：

还有一类现象值得单独记住：页面显示了、但按钮点不动。这通常是"水合还没完成或失败了"——HTML 到了，JS 还没执行完或报错了。所以看到"样式正常但没反应"，第一反应应该是去看浏览器 Console（F12 里的报错窗口，见 §07-1）里有没有红色的 hydration 报错，而不是去改那个按钮的代码。

Server Components 与 "use client"：这一代的分界

在 Next.js 这一代（App Router）里，组件被分成两类，AI 会频繁提到这个分界：

• 服务端组件（Server Component）：默认就是它。在服务器上执行，可以直接读数据库、读文件、拿密钥，而不会把这些代码发到访客的浏览器里。它不能使用 useState、onClick 这类依赖浏览器的能力。
• 客户端组件（Client Component）：文件顶部写了 "use client" 的组件。它在浏览器里跑，能用 state、事件、window。代价是它的代码会进到访客浏览器里，所以不能在里面写任何密钥。

所以看到报错 useState only works in Client Components. Add the "use client" directive，它的意思不是"你代码写错了"，而是"你想用的能力需要在浏览器里跑，请把这一小块标成客户端组件"。这也是当前 AI 最容易给出过时建议的领域之一：如果你照着一个旧教程把整个页面都标成 "use client"，就把服务端渲染的好处丢掉了。合理的心智模型是：默认留在服务端，只在真正需要交互的那一小块标客户端。

六个词放一起（这张表值得存下来）

看不懂这张表也没关系，把它当索引：下次 AI 说"我把它改成 SSR 了"，你至少能反问一句"那它还需要水合吗？首屏能直接交互吗？"——这一句就已经比大多数人专业了。

09CSS 那些词：类名、Tailwind、flex、grid、响应式

CSS 管什么

CSS 只回答一类问题：哪个元素，长什么样。它的写法由两部分组成：选择器（selector，选中谁）和声明块（花括号里写"哪一项属性等于什么值"）。

/* 选择器 button → 声明块 { 属性: 值; } */
button {
  background: #6366f1;
  border-radius: 8px;
}
.card { padding: 16px; }          /* .card = 选中所有 class="card" 的元素 */
#title { font-size: 24px; }       /* #title = 选中 id="title" 的那一个元素 */

类名（class）是 HTML 元素上的一个属性，用来给元素贴标签，好让 CSS 选中它。元素上可以贴很多个标签：class="card featured"。

为什么 AI 老在 className 里塞一长串

当你看到 <div className="flex items-center gap-2 rounded-lg bg-slate-800 p-4">，那不是乱码，而是 Tailwind CSS 的写法。它的思路叫"工具类（utility class）"：每一个类名只对应一条样式声明，你像贴标签一样把需要的样式一个个贴上去。上面那串翻译过来就是：

为什么 AI 爱用它？因为它让"样式"和"结构"写在同一个地方，AI 不用来回跳文件，也不容易起错类名。代价是标签会变长，而且你在编辑器里看不出最终长什么样——需要靠经验把 gap-2 读成"间距"。你就把它当成一份密集的缩写表，不必记住具体刻度。

Tailwind 4 的安装方式和 3 完全不同（4 版不再需要那套复杂的配置，也不再需要 @tailwind 三行指令）。用 Vite 时，现在是两步：

# 1. 装包
npm install tailwindcss @tailwindcss/vite

# 2. 在 vite.config.ts 里加插件
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

# 3. 在你的 CSS 入口文件第一行写这一句，就完事
@import "tailwindcss";

这个例子值得记住，因为它演示了一类高频现象：AI 按三年前的记忆给你 Tailwind 安装步骤，你照着做会失败。遇到"配置类步骤"时，最省时间的做法是让 AI 先去读当前版本文档再动手（§11 有可直接复制的追问模板）。

flex 与 grid：两条轴线 vs 一张格子

这两个是布局的主力，也是 AI 嘴里出现频率最高的 CSS 词。MDN 讲 flexbox 时开门见山：用它要想的是两条轴。

.row {
  display: flex;
  gap: 12px;              /* 子元素间距 */
  align-items: center;    /* 交叉轴居中 */
  justify-content: space-between; /* 主轴两端对齐 */
  flex-wrap: wrap;        /* 装不下就换行 */
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三等分：1fr = 占一份宽 */
  gap: 16px;
}
@media (max-width: 640px) {
  .gallery { grid-template-columns: 1fr; } /* 小屏一列 */
}

一句话分界：要"排一排"用 flex，要"划格子"用 grid。看到 display: flex 不用慌，它八成在处理你正盯着的那个间距或对齐问题。

响应式与断点：一份代码适配手机和电脑

响应式设计（responsive design）指让同一份页面在不同屏幕上都好用。MDN 在教学大纲里把它定义得很直白："设计出能灵活适应不同设备屏幕尺寸、分辨率的网页布局"。实现手段主要是媒体查询（media query）——一句"当屏幕宽度小于 X 时，用另一套样式"。那个 X 就叫断点（breakpoint）。

/* 原生 CSS 写法 */
@media (max-width: 640px) {
  .sidebar { display: none; }   /* 手机上直接收掉侧边栏 */
}

/* Tailwind 的写法：类名前面加前缀，sm/md/lg 都是预设断点 */
<div className="grid grid-cols-1 md:grid-cols-3"> ... </div>
/* 读法：手机上一列；medium（中屏）以上三列 */

所以你看到 md: lg: sm: 这些前缀，意思就是"从某个屏幕宽度起才生效"。这就是本文这个页面为什么在手机上侧边栏会消失——同一条规则。

深色模式、CSS 变量、主题

CSS 变量（也叫自定义属性）是"给一个值取名字"，好处是改一处、全站变：

:root {
  --brand: #6366f1;      /* 定一个名字 */
}
button { background: var(--brand); }   /* 用它 */

@media (prefers-color-scheme: dark) {  /* 系统开了深色模式时 */
  :root { --page-bg: #0f1117; }
}

prefers-color-scheme 是浏览器告诉你"用户系统偏好深色还是浅色"的方式，深色模式就靠它（本文这份教程同理：整站用一组变量，所以所有页面颜色一致）。当你看到 AI 说"用 CSS 变量统一主题"，说的就是上面这件事。

"样式不生效"的排查顺序

这是前端最高频的一类问题，而且有一条固定的排查顺序，照着走能省下大量瞎改：

10从 localhost 到别人能看到：部署、环境变量、CORS

localhost:3000 是什么，为什么别人打不开

localhost 是"这台机器自己"的固定名字（技术上对应 127.0.0.1，叫回环地址），3000 是端口——一台机器上可以有很多程序同时在提供网页服务，端口就是区分它们的门牌号。所以：

• http://localhost:5173 ＝ "我自己这台机器 5173 号门口的那个程序"，那个程序就是你刚敲的 npm run dev。
• 它只对你有效。你把它发给朋友，朋友浏览器里的 localhost 指的是朋友自己那台机器，那里没有你的程序，所以打不开。这是新手最常见的"我以为我做好了"。

让世界看到：两条路

最省事的一条路（也是 AI 最常推荐的）：把代码推到 GitHub，然后用 Vercel / Netlify 连上这个仓库，之后每次 push 它自动帮你构建并发布。你甚至不需要在本机跑构建。手工版的完整流程是：

npm run build          # 1. 生成产物（dist/ 或 .next/）
npm run preview        # 2. 本地按"真实上线"的方式跑一遍（Next.js 项目用 npm run start）
# 3. 把产物上传给托管平台（网页上拖拽、或平台读你的 git 仓库自动做）

这三步的顺序值得记住：先 build、再 preview、最后才部署。跳过第 1 步直接部署，就是把"没翻译过的源码"交给浏览器。

域名、DNS、HTTPS 三个词

• 域名（domain）：example.com 这种给人看的地址。机器之间实际靠一串数字 IP 通信，域名是它的外号。
• DNS：把域名翻译成 IP 的"电话簿"。你说"我要访问 example.com"，DNS 告诉你该去哪台机器。所以"域名解析没生效"＝这本电话簿还没更新，通常等几分钟。
• HTTPS：浏览器和服务器之间加密传输（网址前的锁图标）。现在托管平台基本都免费自动配好。如果浏览器把网站标成"不安全"，往往不是网站坏了，而是证书没生效或过期。

环境变量与 .env：为什么密钥不能写进前端

环境变量（environment variable）是"不写死在代码里、运行时再给程序的值"，最常用来放密钥、数据库地址、不同环境的配置。它们通常写在一个叫 .env 的文件里：

# .env 文件（这个文件绝对不能提交进 git）
DATABASE_URL=postgres://user:pass@host/db
PAYMENT_SECRET=sk_live_xxxxxxxx

# Next.js：只有 NEXT_PUBLIC_ 开头的才会被发到浏览器
NEXT_PUBLIC_SITE_NAME=我的网站

# Vite：只有 VITE_ 开头的才会被发到浏览器
VITE_API_BASE=https://api.example.com

配套的两个动作：.env 要写进 .gitignore（这样 git 不会提交它）；同时提供一份 .env.example（只有键名、没有真值）告诉别人需要配哪些项。看到 AI 生成 .env.example，那是好习惯，不是多此一举。

CORS / 跨域：报错长什么样、责任在谁

你在浏览器控制台里八成见过这句红字：

Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:5173'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present
on the requested resource.

它说的是什么？MDN 的解释可以拆成三句人话：

1. 网页里发请求（fetch 是浏览器自带的"要数据"函数，XMLHttpRequest 是它的老前辈）时，浏览器默认遵守同源策略（same-origin policy）：只能向"同一个来源"要数据。来源由三样组成——协议 + 域名 + 端口，三者有一样不同就算"跨域"。localhost:5173 和 localhost:3000 端口不同，也算跨域。
2. CORS（Cross-Origin Resource Sharing，跨源资源共享）是打破这道墙的正规方式：需要服务器在响应头（服务器回给你的那份"附加说明"，和正文一起发回来）里明确说"我允许这个来源来拿"（Access-Control-Allow-Origin）。有些请求还会先发一个试探性的预检请求（preflight），得到允许才发真请求。
3. 所以：这个错是服务器没放行，不是你前端代码写错了。

CDN 与缓存：为什么"我改了，线上还是旧的"

MDN 对 CDN（Content Delivery Network，内容分发网络）的说明是：它是分布在很多地点的一组服务器，这些服务器存放数据的副本，从而让离用户最近的那台来响应请求。用人话讲：把你的静态文件复印很多份放到各地，谁离哪近就从哪拿。

CDN 靠缓存（cache，把文件先存一份，下次直接给）来提速，而缓存正是"改了代码线上没变"的头号嫌疑人。按这个顺序排查：

11遇到不认识的词，三步自救（含能直接粘给 AI 的话术）

第一步：先归类，再看细节

这一整篇其实都在训练同一个动作：听到一个生词，先判断它属于哪一层。定层之后，你就知道它大概在管什么、该不该紧张。下面这张表可以直接拿来用——按词里出现的"线索"判断：

第二步：把问题丢回去（五条可直接复制的追问模板）

新手最大的浪费不是不懂，而是用错了提问方式。下面是五条经过验证的模板，直接复制去用：

# 模板 1：只要解释，不要代码（防止它一口气甩出 200 行）
用日常语言解释「XXX」是什么、它解决什么问题，最多三句话，先不要给我代码。

# 模板 2：让报错自己交代（把报错原文整段贴进去）
这是我看到的完整报错。请先指出里面哪几个词是术语并逐个人话解释，
再说清这是环境问题还是代码问题，最后只给我需要敲的那一条命令：
<粘贴报错原文>

# 模板 3：先讲计划再动手（防止它顺手改坏别的地方）
动手之前先告诉我：你打算改哪几个文件、每个文件改什么、为什么必须改它。
我同意之后你再动手，不要顺手重构其他部分。

# 模板 4：要最小例子，不要完整项目
给我一个能跑的最小例子（一个文件或最多两个文件），只演示「XXX」这一件事，
不要脚手架（一键生成整套项目骨架的模板）、不要额外依赖，并告诉我怎么验证它跑对了。

# 模板 5：让代码自己解释自己（读别人代码时最有用的条）
把这段代码里的行话用中文注释标出来：每一步在干什么、哪些是框架要求、
哪些是你这个产品自己的规则（业务逻辑）。先不要改功能。

还有一条专治"AI 按老版本记忆办事"的说法：

这个配置是哪个版本的做法？请先去读当前版本的官方文档确认，再给我步骤。
如果文档里的写法和你的记忆不一致，以文档为准，并告诉我差在哪。

第三步：分清"必须懂"和"可以不理"

你不可能也不需要把前端全学一遍。按"不懂会付出什么代价"分三档：

一次真实对话长什么样

1217 组最容易混的名词：一张对照表

下面每一组都是"长得很像、说错会误事"的搭配。第三列就是你该记住的那一句分界。

13名词速查表：AI 说出这个词时，它在说哪一层

按层排成四张表。第三列写的是"什么时候你必须懂、别当什么用"——它比定义更值钱，因为大多数词你其实只需要知道"什么时候该管它"。

内容与样式层

交互层

工具链层

运行与交付层

14六个常见误解（以及它们为什么那么诱人）

15参考来源与证据边界

文中的版本数字是怎么来的（你可以照着复核）

本文所有版本号不是凭记忆写的，是写作当天（2026-09-13）从官方源读出来的。复核方式：

curl -s https://nodejs.org/dist/index.json | head -40   # 找 "lts" 字段那一条
# 其余版本号的复核命令在 §00「本文校对的版本快照」上方，这里不重复

读数结果就是 §00 那张快照表（npm view 直接读 npm 官方接口）。另外两处硬约束也是当天从官方文档里核出来的：Next.js 要求 Node 最低 20.9、Vite 要求 Node 20.19+ 或 22.12+——它们决定了"别人的项目为什么在我机器上跑不起来"。

主要来源

证据边界：哪些话会过时，哪些不会

• 会过时：所有版本号、Tailwind 4 的安装步骤、Next.js 的缓存写法（use cache 这套是当前版本的做法，旧文档里的 fetch 缓存配置被官方标为 "Previous Model"）、Next.js 的默认构建工具。看到配置类步骤，先让 AI 核对当前版本。
• 不会过时：三种语言的分工、DOM 是内存里的树、props 与 state 的分界、dev 与 build 的区别、localhost 只有自己能看到、CORS 由服务端放行、密钥不能进前端。这些是概念，换十个框架它们还成立。
• 没写进来、但你可能以为写了：性能优化（打开速度指标、懒加载＝用到再下载、代码分割＝把大包拆小）、可访问性（无障碍）细则、测试（单元测试、E2E 端到端测试）、状态管理库（Redux / Zustand）、CSS-in-JS（把样式写进 JavaScript 的那个流派）、国际化、以及各家托管平台的计费差异。它们都是正经话题，但都属于"你的项目长到一定程度才需要"，硬塞进这篇只会稀释掉上面的地图感。
• 一处刻意的简化：我把"前端"讲成"浏览器里跑的那一半"，这是在帮新手建立第一层分界。严格地说，现代框架允许前端代码在服务端执行（§08-7 的服务端组件），所以"前端 = 浏览器里跑的"这句话在工程实践里有例外；本文在需要精确的地方都标注了这个例外。

这篇适合谁、不适合谁

• 适合：在用 AI 写代码、但对前端零基础或只有碎片知识的人；被术语卡住过、想知道"该不该停下来问"的人；想建立一张能长期用的名词地图的人。
• 不适合：想系统学 CSS 或 React 的人（本文只给地图，不给训练）；想查某个具体 API 用法的人（用官方文档或让 AI 按文档回答更快）；已经能独立做前端项目的人（这篇对你偏浅）。

99一句话总结

最后，把这篇真正变成你自己的东西，只需要做一个动作：回到 §03，把那三个文件里的内容换成你自己想做的东西——比如一个列着你常看网站的链接页、一个记录你今天做了什么的小卡片。做完之后你再看 AI 说"组件""props""state"，它们就不再是一串拼音，而是你亲手碰过的东西的正式名字。