Vibe Tutorial
环境搭建与代码运行基础

1.3 浏览器与服务器基础

Tip

判断哪些代码该在浏览器运行,哪些该在服务器运行,避免把密钥泄露给黑客。

1. 为什么要搞清楚"代码在哪里运行"?

上一章你学会了技术栈,知道要用Next.js、TypeScript这些工具。

但你可能会困惑:这些代码是在我电脑上运行,还是在服务器上运行?

为什么这个问题很重要?

如果你搞混了,会出大问题:

  • 把密码写在浏览器端 → 黑客3秒内就能偷走
  • 把数据库操作写在浏览器端 → 根本运行不了
  • 把所有代码都放服务器 → 网页会卡得要死

就像做饭:

  • 有些菜你在家里做(煮泡面)
  • 有些菜必须去餐厅做(满汉全席)
  • 如果你在家里做满汉全席,厨房会炸掉

所以,你必须知道:哪些代码在浏览器运行,哪些代码在服务器运行。

2. 先用吃饭建立直觉

在学技术概念之前,我们先用吃饭来建立直觉。

场景:你想吃饭

方式1:在家做饭

  • 你自己买菜
  • 你自己做饭
  • 你自己吃
  • 优点:快,想吃就吃
  • 缺点:只能做简单的菜(煮泡面、炒鸡蛋)

方式2:去餐厅吃饭

  • 你告诉服务员要什么菜
  • 厨师在后厨做好
  • 服务员端上来给你
  • 优点:能吃到复杂的菜(满汉全席)
  • 缺点:要等一会儿

网站也一样!

  • 有些事情在你电脑上做(浏览器)
  • 有些事情在服务器上做(服务器)

3. 什么是浏览器?什么是服务器?

现在我们来看技术定义。

浏览器(Browser)

浏览器:运行在用户电脑上的软件,用于显示网页和运行简单的代码。

它是什么?

  • 就是你用来上网的软件
  • 比如Chrome、Edge、Safari

它能做什么?

  • 显示网页(HTML、CSS)
  • 运行简单的代码(JavaScript)
  • 响应你的点击和输入

它不能做什么?

  • ❌ 不能直接访问数据库
  • ❌ 不能保存敏感信息(比如密码)
  • ❌ 不能做复杂的计算(会卡死)

比喻:浏览器就像你家的厨房

  • 可以做简单的菜(煮泡面)
  • 不能做复杂的菜(满汉全席)

服务器(Server)

服务器:一台24小时运行的电脑,专门用来处理网站请求和复杂任务。

它是什么?

  • 一台一直开着的电脑
  • 放在专业的机房里
  • 专门用来处理网站请求

它能做什么?

  • ✅ 访问数据库
  • ✅ 保存敏感信息(密码、密钥)
  • ✅ 做复杂的计算
  • ✅ 生成网页

比喻:服务器就像餐厅的后厨

  • 有专业的厨师
  • 有所有的食材
  • 能做复杂的菜

4. 浏览器和服务器如何配合?

完整流程

让我们看一个完整的例子:你打开一个网站。

第1步:你输入网址

  • 你在浏览器输入www.example.com
  • 就像你走进餐厅,拿起菜单

第2步:浏览器发送请求

  • 浏览器向服务器说:"我要首页"
  • 就像你告诉服务员:"我要一份宫保鸡丁"

第3步:服务器处理请求

  • 服务器查询数据库
  • 服务器生成网页
  • 就像厨师做菜

第4步:服务器返回响应

  • 服务器把网页发给浏览器
  • 就像服务员把菜端上来

第5步:浏览器显示网页

  • 浏览器把网页显示出来
  • 就像你开始吃饭

看到了吗?浏览器和服务器是配合工作的!

流程图

graph TD
    A[用户输入网址] --> B[浏览器发送请求]
    B --> C[服务器处理请求]
    C --> D[服务器返回响应]
    D --> E[浏览器显示网页]
    
    style A fill:#e1f5ff
    style B fill:#fff3e0
    style C fill:#f3e5f5
    style D fill:#e8f5e9
    style E fill:#e1f5ff

5. 两种做饭方式:SSR vs CSR

现代网站有两种"做饭"方式,这是你必须理解的核心概念。

方式1:服务端渲染(SSR) - 私房菜

SSR(Server-Side Rendering):服务器生成完整的网页,浏览器直接显示。

流程:

  1. 你点菜(发送请求)
  2. 厨师在后厨把菜完全做好
  3. 服务员端上来一盘成品
  4. 你直接吃

技术含义:

  • 服务器生成完整的HTML
  • 浏览器直接显示
  • 不需要额外处理

优点:

  • ✅ 快:打开网页立即看到内容
  • ✅ SEO好:搜索引擎能看到完整内容

缺点:

  • ❌ 每次点击都要重新请求服务器

适用场景:

  • 博客文章
  • 新闻网站
  • 产品介绍页

方式2:客户端渲染(CSR) - 吃火锅

CSR(Client-Side Rendering):服务器只给数据,浏览器自己生成网页。

流程:

  1. 你点菜(发送请求)
  2. 厨师只给你汤底和生肉(数据)
  3. 你自己把肉涮熟(浏览器运行代码)
  4. 你自己吃

技术含义:

  • 服务器只给数据(JSON)
  • 浏览器运行JavaScript
  • 浏览器自己生成页面

优点:

  • ✅ 交互快:点击立即响应
  • ✅ 体验好:页面不用刷新

缺点:

  • ❌ 首次加载慢
  • ❌ SEO不好

适用场景:

  • 用户中心
  • 聊天窗口
  • 管理后台

6. 什么时候用哪种方式?

场景 推荐方式 为什么
📝 博客文章 SSR(私房菜) 需要快速显示,需要SEO
📰 新闻网站 SSR(私房菜) 需要快速显示,需要SEO
📦 产品介绍页 SSR(私房菜) 需要SEO
👤 用户中心 CSR(火锅) 需要大量交互
💬 聊天窗口 CSR(火锅) 需要实时更新
🛠️ 管理后台 CSR(火锅) 需要大量交互
💾 数据库操作 必须在服务器 安全原因

Vibe Coding原则:

  • 默认用SSR(私房菜)
  • 只有需要大量交互时才用CSR(火锅)
  • 数据库操作永远在服务器

7. 动手实验:看看浏览器和服务器的对话

实验步骤

  1. 🌐 打开浏览器
  2. 🔧 按F12打开开发者工具
  3. 📊 点击"Network"(网络)标签
  4. ✨ 访问任意网站(比如www.baidu.com)

你会看到:

  • 一堆请求和响应
  • 每个请求都有类型、大小、时间

类型说明:

  • Document:服务器返回的HTML(私房菜)
  • Fetch/XHR:服务器返回的数据(火锅食材)
  • JS:JavaScript代码
  • CSS:样式文件
  • Img:图片

这就是浏览器和服务器的对话记录!

8. 避坑指南

❌ 不要这样做 ✅ 应该这样做 为什么
全部用CSR(use client) 默认用SSR,需要交互才用CSR 浏览器压力大,SEO差
在浏览器直接连数据库 必须在服务器连数据库 不安全,密码会泄露
在服务器用window对象 window只能在CSR组件用 服务器没有浏览器环境
把API密钥写在前端代码 API密钥必须放在服务器 黑客能直接看到

9. 真实案例:AWS密钥泄露事件

Story

2019年,45万人民币的教训

2019年,一位开发者把AWS密钥(相当于银行卡密码)写在了前端代码里。黑客3秒内扫描到密钥,开启数千台服务器挖矿。第二天收到账单:$64,000美元(45万人民币)。

Vibe心法:所有密钥、密码、API Token都必须放在服务器端。在代码提交前,用git grep搜索一下是否有"password"、"secret"、"key"这些关键词。

10. 本章小结

  1. 🏠 浏览器是你家厨房 - 只能做简单的事
  2. 🏭 服务器是餐厅后厨 - 能做复杂的事
  3. 🍲 SSR是私房菜 - 服务器做好端上来,快且SEO好
  4. 🍲 CSR是火锅 - 浏览器自己做,交互好
  5. ⚡ Vibe Coding原则 - 默认用SSR,需要交互才用CSR