阅读完本节后，你将会收获：
- 理解前端和后端的职责分工
- 掌握前后端分离的架构模式
- 了解全栈框架如何简化开发
- 理解模块化思维的重要性
前端负责"展示"，后端负责"处理"，两者通过 API 通信。
在 Web 早期，页面由服务器直接生成完整的 HTML 发送给浏览器：
sequenceDiagram
participant 浏览器
participant 服务器
浏览器->>服务器: 访问网址
服务器->>服务器: 查询数据库
服务器->>服务器: 生成 HTML
服务器->>浏览器: 返回完整 HTML
浏览器->>浏览器: 直接显示这种模式的特点：
现代 Web 应用采用前后端分离架构：
sequenceDiagram
participant 浏览器 as 前端(浏览器)
participant API as 后端(API)
浏览器->>浏览器: 加载页面框架
浏览器->>API: 请求数据
API->>API: 处理业务逻辑
API->>浏览器: 返回 JSON 数据
浏览器->>浏览器: 渲染页面这种模式的特点：
随着 JavaScript 生态的发展，出现了全栈框架，如 Next.js。这类框架让前端和后端代码都在同一个项目中，用同一种语言（TypeScript）编写，但职责分工没有变化：
graph TB
A[Next.js 项目]
A --> B[app/page.tsx<br/>前端页面]
A --> C[app/api/*.ts<br/>后端 API]
B --> D[浏览器渲染]
C --> E[服务器执行]
F[PostgreSQL 数据库] --> C
style B fill:#e1f5fe
style C fill:#fff3e0
style D fill:#c8e6c9
style E fill:#ffccbc全栈框架的优势：
Next.js 的 API Routes 让你在同一个项目中编写后端代码。这些代码在服务器端执行，可以安全地访问数据库和调用外部 API，而前端代码在浏览器中执行，负责展示和交互。
graph LR
A[用户浏览器] -->|HTTP 请求| B[前端代码<br/>React/Next.js]
B -->|fetch/axios| C[后端 API<br/>API Routes]
C -->|SQL| D[数据库<br/>PostgreSQL]
D -->|查询结果| C
C -->|JSON 响应| B
B -->|更新界面| A
style A fill:#e1f5fe
style B fill:#c8e6c9
style C fill:#fff3e0
style D fill:#ffccbc在传统的服务端渲染（如 Flask、Django）中，模板引擎是一种在服务器端生成 HTML 的技术。你在微博或 GitHub 上看到的个人主页，每个人的页面布局一模一样，但头像、昵称、内容各不相同——这就是模板引擎的效果：定义好页面骨架，留出数据的空位，针对不同用户填入不同内容：
服务器端：模板 + 数据 → 渲染 → 完整 HTML → 发送给浏览器模板通常包含：
{{ username }}）用于插入动态数据React 与模板的对比：
Next.js 结合了两种模式：
你打开一篇新闻，文字和图片瞬间就显示出来——这部分是服务端组件在服务器上提前渲染好的。而页面上的"点赞"按钮、评论输入框、分享菜单，需要响应你的点击和输入——这些是客户端组件，在你的浏览器里运行。
不矛盾。全栈框架是开发方式，前后端分离是架构模式。全栈框架让前后端代码在同一个项目中，但它们的职责仍然是分离的。
团队有多人协作、需要支持多种客户端（Web + App）、前后端技术栈差异大时，前后端分离更有价值。个人项目用全栈框架更高效。
以"单一职责"为原则。一个模块负责一个功能领域，如 auth 模块只负责认证，posts 模块只负责文章。避免过细（每个文件只有几行）或过粗（一个文件包含所有功能）。
需要访问数据库、调用外部 API、处理敏感信息的代码必须在后端。纯 UI 渲染、用户交互的代码在前端。拿不准时优先放在后端，更安全。