静态网页 vs 动态网页
1. 定义
- 静态网页 (Static Web Page)：内容固定，服务器上存的是什么，发给用户的就是什么。每个访问者看到的完全一样。文件通常是写死的
.html/.css/.js。 - 动态网页 (Dynamic Web Page)：内容按需生成，服务器（或浏览器里的 JS）根据用户、时间、数据库等实时计算出页面。不同人、不同时刻看到的可能不同。
一句话区分：静态 = “预先做好的成品，谁来都发同一份”；动态 = “点单后现做，因人/因时而异”。
注意：这里的”动”不是指有没有动画。一个有炫酷动画但内容写死的页面仍是静态网页；一个朴素但内容随登录用户变化的页面是动态网页。
2. 核心区别
| 维度 | 静态网页 | 动态网页 |
|---|---|---|
| 内容来源 | 服务器上的固定文件 | 实时由程序/数据库生成 |
| 每个用户看到的 | 都一样 | 可因人/因时不同 |
| 服务器要做的事 | 直接把文件原样返回 | 运行代码、查数据库、拼出页面 |
| 是否需数据库 | 通常不需要 | 通常需要 |
| 响应速度 | 快（直接发文件） | 相对慢（要计算） |
| 服务器成本 | 低 | 较高 |
| 能否个性化 | 不能 | 能（登录状态、推荐等） |
| 典型技术 | HTML/CSS/JS、静态托管 | PHP/Node/Python/Java + 数据库 |
3. 请求流程对比
静态网页：
浏览器 ──请求 /about.html──▶ 服务器
│ 找到磁盘上的 about.html
浏览器 ◀──原样返回文件──────────┘
动态网页：
浏览器 ──请求 /profile──────▶ 服务器
│ 运行后端代码
│ 查数据库（这个用户是谁？）
│ 拼出个性化 HTML
浏览器 ◀──返回生成的页面─────────┘
4. 举例
静态网页：
- 个人博客、公司介绍页、产品文档、活动落地页
- 内容不常变，所有访客看到同样的图文
动态网页：
- 淘宝首页（每个人推荐不同商品）
- 微博/朋友圈（内容随你关注的人实时变）
- 银行账户页（显示你自己的余额）
- 搜索结果页（随关键词变化）
5. “动态”的两种实现位置（易混点）
动态内容可以在两个地方生成，别搞混：
| 服务端渲染 (SSR) | 客户端渲染 (CSR) | |
|---|---|---|
| 在哪生成 | 服务器拼好完整 HTML 再发给浏览器 | 服务器发个空壳 + JS，浏览器里 JS 拉数据再渲染 |
| 典型技术 | PHP、传统 Node/Django 模板 | React/Vue 等 SPA |
| 首屏速度 | 快（拿到就是完整页面） | 慢一点（要等 JS 跑完） |
| SEO | 友好（爬虫直接看到内容） | 需额外处理 |
现代前端（React/Vue）默认是 CSR：服务器发的其实是一份”静态”的 JS，页面内容靠浏览器里的 JS 动态拼出来。所以”用静态托管跑一个内容动态的 SPA”是常见组合。Next.js/Nuxt 这类框架则把 SSR/CSR/静态生成混合使用。
6. 现代趋势：边界在模糊
- 静态站点生成 (SSG)：构建时就把动态数据”烤”成一堆静态 HTML（如博客用 Hugo、Next.js
generateStaticParams）。兼顾动态的灵活和静态的快。 - JAMstack：静态文件托管 + 前端 JS + 调用 API 获取动态数据，把”页面”静态化、把”数据”交给 API。
- CDN 缓存：动态生成的页面也能被缓存成”临时静态”，减轻服务器压力。
7. 如何选择
- 内容基本不变、追求速度和低成本、SEO 重要 → 静态（或 SSG）
- 需要用户登录、个性化、实时数据、频繁更新 → 动态
- 大多数真实产品是混合：营销页/文档用静态，用户中心/业务功能用动态
8. 延伸阅读 / 关联概念
- SSR / CSR / SSG — 三种页面生成时机，理解现代前端框架的关键
- CDN — 内容分发网络，静态资源加速的核心手段
- JAMstack — JavaScript + API + Markup 的现代静态架构
- Vite / React / Vue — 构建 CSR 单页应用的常用工具；见
../command/vite.md - HTTP — 静态/动态都建立在 HTTP 请求-响应之上；见
../networking/下相关笔记