1.3 浏览器与服务器基础
阅读完本节后，你将会收获：
•
理解浏览器和服务器的基本职责及协作方式
•
掌握开发环境（localhost）与生产环境的区别
•
了解为什么 TypeScript 需要编译以及 Node.js 的作用
•
区分客户端代码与服务端代码的运行位置
序言中提到的"浏览器看不懂 TypeScript"，是因为浏览器和服务器的职责不同。
基本概念
浏览器（Chrome、Firefox、Safari）运行在用户电脑上，只能理解 HTML、CSS、JavaScript。
服务器是远程计算机，运行 Web 服务器软件（如 Nginx、Apache），响应浏览器请求并返回数据。
客户端 = 用户设备（浏览器、手机 App），服务端 = 提供服务的一方（服务器、API）。
Web 应用工作流程
53%
47%
浏览器 vs 服务器
#ISUFZsARkuqH text { white-space: pre; }#ISUFZsARkuqH .fb0 { stroke: var(--N900-FG, 0.15); }#ISUFZsARkuqH .fb0 {stroke: rgba(31,35,41, 0.15)}#ISUFZsARkuqH .fx0 { stroke-miterlimit: 10; }#ISUFZsARkuqH .fx0 {stroke-miterlimit: 10}#ISUFZsARkuqH .fa1 { fill: rgb(187, 191, 196); }#ISUFZsARkuqH .fa1 {fill: rgb(187, 191, 196)}#ISUFZsARkuqH .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#ISUFZsARkuqH .fx1 {font-style: normal}#ISUFZsARkuqH .fx2 { text-anchor: middle; }#ISUFZsARkuqH .fx2 {text-anchor: middle}#ISUFZsARkuqH .fx3 { dominant-baseline: central; }#ISUFZsARkuqH .fx3 {dominant-baseline: central}#ISUFZsARkuqH .fx4 { stroke: none; }#ISUFZsARkuqH .fx4 {stroke: none}#ISUFZsARkuqH .fc0 { fill: var(--text-caption); }#ISUFZsARkuqH .fc0 {fill: #646a73}#ISUFZsARkuqH .fa2 { fill: var(--text-link-disabled); }#ISUFZsARkuqH .fa2 {fill: rgb(187, 191, 196)}#ISUFZsARkuqH .fa3 { fill: rgb(240, 238, 230); }#ISUFZsARkuqH .fa3 {fill: rgb(240, 238, 230)}#ISUFZsARkuqH .fx5 { font: 400 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#ISUFZsARkuqH .fx5 {font-style: normal}#ISUFZsARkuqH .fx6 { text-anchor: start; }#ISUFZsARkuqH .fx6 {text-anchor: start}#ISUFZsARkuqH .fx7 { dominant-baseline: alphabetic; }#ISUFZsARkuqH .fx7 {dominant-baseline: alphabetic}#ISUFZsARkuqH .fc1 { fill: rgb(61, 61, 58); }#ISUFZsARkuqH .fc1 {fill: rgb(61, 61, 58)}#ISUFZsARkuqH .fc2 { fill: rgb(115, 114, 108); }#ISUFZsARkuqH .fc2 {fill: rgb(115, 114, 108)}#ISUFZsARkuqH .fb1 { fill: var(--N900-FG, 0.15); }#ISUFZsARkuqH .fb1 {fill: rgba(31,35,41, 0.15)}#ISUFZsARkuqH .fb2 { fill: rgb(240, 238, 230); }#ISUFZsARkuqH .fb2 {fill: rgb(240, 238, 230)}#ISUFZsARkuqH .fa4 { fill: var(--bg-body); }#ISUFZsARkuqH .fa4 {fill: #fff}ABC12345职责存储能运行不能运行渲染页面、执行交互、请求数据Cookie、LocalStorageHTML、CSS、JavaScriptTypeScript、后端语言处理业务、查询数据库、返回结果文件系统、数据库Node.js、Python、Go浏览器 API浏览器（客户端）服务器（服务端）
为什么需要 Node.js
TypeScript 代码需要编译才能在浏览器运行，这个编译过程需要一个运行环境：
Node.js 的作用：
•
在你的电脑上运行构建工具
•
编译 TypeScript 为 JavaScript
•
打包代码
•
启动开发服务器
现代前端开发都需要 Node.js
涉及以下情况就必须安装：
•
TypeScript 项目（需要编译）
•
使用 npm 包（需要管理依赖）
•
运行构建工具（Vite、Webpack、Next.js）
•
本地开发（启动开发服务器）
开发环境 vs 生产环境
#ZBppuhJdNmtb text { white-space: pre; }#ZBppuhJdNmtb .fb0 { stroke: var(--N900-FG, 0.15); }#ZBppuhJdNmtb .fb0 {stroke: rgba(31,35,41, 0.15)}#ZBppuhJdNmtb .fx0 { stroke-miterlimit: 10; }#ZBppuhJdNmtb .fx0 {stroke-miterlimit: 10}#ZBppuhJdNmtb .fa1 { fill: rgb(187, 191, 196); }#ZBppuhJdNmtb .fa1 {fill: rgb(187, 191, 196)}#ZBppuhJdNmtb .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#ZBppuhJdNmtb .fx1 {font-style: normal}#ZBppuhJdNmtb .fx2 { text-anchor: middle; }#ZBppuhJdNmtb .fx2 {text-anchor: middle}#ZBppuhJdNmtb .fx3 { dominant-baseline: central; }#ZBppuhJdNmtb .fx3 {dominant-baseline: central}#ZBppuhJdNmtb .fx4 { stroke: none; }#ZBppuhJdNmtb .fx4 {stroke: none}#ZBppuhJdNmtb .fc0 { fill: var(--text-caption); }#ZBppuhJdNmtb .fc0 {fill: #646a73}#ZBppuhJdNmtb .fa2 { fill: var(--text-link-disabled); }#ZBppuhJdNmtb .fa2 {fill: rgb(187, 191, 196)}#ZBppuhJdNmtb .fa3 { fill: rgb(240, 238, 230); }#ZBppuhJdNmtb .fa3 {fill: rgb(240, 238, 230)}#ZBppuhJdNmtb .fc1 { stroke: var(--B500); }#ZBppuhJdNmtb .fc1 {stroke: #336df4}#ZBppuhJdNmtb .fx5 { font: 400 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#ZBppuhJdNmtb .fx5 {font-style: normal}#ZBppuhJdNmtb .fx6 { text-anchor: start; }#ZBppuhJdNmtb .fx6 {text-anchor: start}#ZBppuhJdNmtb .fx7 { dominant-baseline: alphabetic; }#ZBppuhJdNmtb .fx7 {dominant-baseline: alphabetic}#ZBppuhJdNmtb .fc2 { fill: rgb(61, 61, 58); }#ZBppuhJdNmtb .fc2 {fill: rgb(61, 61, 58)}#ZBppuhJdNmtb .fc3 { fill: rgb(115, 114, 108); }#ZBppuhJdNmtb .fc3 {fill: rgb(115, 114, 108)}#ZBppuhJdNmtb .fc4 { fill: var(--B500); }#ZBppuhJdNmtb .fc4 {fill: #336df4}#ZBppuhJdNmtb .fx8 { font: 400 12px ui-monospace; }#ZBppuhJdNmtb .fx8 {font-style: normal}#ZBppuhJdNmtb .fb1 { fill: var(--N900-FG, 0.15); }#ZBppuhJdNmtb .fb1 {fill: rgba(31,35,41, 0.15)}#ZBppuhJdNmtb .fb2 { fill: rgb(240, 238, 230); }#ZBppuhJdNmtb .fb2 {fill: rgb(240, 238, 230)}#ZBppuhJdNmtb .fa4 { fill: var(--bg-body); }#ZBppuhJdNmtb .fa4 {fill: #fff}ABC123456位置地址代码错误更新你的电脑未压缩、带调试信息显示详细堆栈热重载（自动刷新）远程服务器压缩、混淆只显示必要信息需要重新部署开发环境（）生产环境（公网）Localhostlocalhost:3000https://example.com
运行环境差异
服务器可以访问：文件系统、数据库、环境变量、所有网络请求
浏览器只能访问：页面内容、用户设备（有限权限）、同源请求
代码运行在哪里？
写代码时要清楚代码在哪里执行：
•
前端代码：在浏览器运行，用户能看到
•
后端代码：在服务器运行，用户看不到
•
API 路由：Next.js 特殊，既能访问服务器资源，又能响应前端请求