一、Vue 是一个框架，也是一个生态。Vue 框架非常灵活。根据我们的需求场景，我们可以用不同的方式使用 Vue：
1️⃣可以作为 Web Components（网页组件：如一个弹窗、一个日历、一个评论框）在任何页面中嵌入
2️⃣单页应用 (SPA：Single-Page Application)：
👉整个应用只加载一次完整的 HTML 页面（初始页面），之后的所有页面交互、内容切换，都在是通过 JavaScript 动态更新 DOM 和数据完成，不会触发浏览器的整页刷新。
3️⃣服务端渲染（SSR：Server-Side Rendering）、客户端渲染（CSR：Client-Side Rendering）
👉对比
特性 | 客户端渲染 (CSR) | 服务端渲染 (SSR) |
渲染位置 | 浏览器（客户端） | 服务器 |
浏览器拿到的内容 | 空的 HTML 骨架（只有div） | 完整的、带内容的 HTML 页面 |
首次渲染时机 | 需等待 JS 加载并执行后再渲染 | 拿到 HTML 后直接渲染 |
SEO 友好性 | 差（爬虫抓不到动态内容） | 好（爬虫能抓到 HTML 内容） |
首屏加载速度 | 慢（需加载大量 JS） | 快（直接显示内容） |
服务器压力 | 小（仅返回数据） | 大（需渲染 HTML，消耗 CPU） |
搜索引擎优化（SEO：Search Engine Optimization），有利于在用户搜索相关关键词时，获得更靠前的排名。
👉SSR 的工作原理
- 用户请求页面：
✅用户在浏览器输入 URL，发送请求到服务器。
- 服务器端处理：
✅服务器接收到请求后，先从数据库获取对应的数据
✅服务器端运行前端框架（React/Vue）的代码，将组件和数据渲染成完整的 HTML 字符串
✅服务器把这个完整的 HTML 字符串、以及前端所需的 CSS、JS 资源一起发送给浏览器
- 浏览器端渲染：
✅浏览器拿到 HTML 后，直接渲染出页面（首屏秒开，用户能立刻看到内容）；
✅同时，浏览器加载并执行页面中的 JS 代码，让页面变成可交互的 SPA 模式。这个 “先渲染静态 HTML，再激活为 SPA” 的过程，叫同构渲染（Isomorphic Rendering）-- 同一套前端代码，既可以在服务器端运行渲染 HTML，也可以在客户端运行实现交互。
如果你已经是一个老手，你可以根据实际场景来选择使用 Vue 的最佳方式，在各种场景下都可以保持同样的开发效率。这就是为什么我们将 Vue 称为“渐进式框架”：它是一个可以与你共同成长、适应你不同需求的框架。
