📚 Vue SSR基础概念与架构

什么是Vue SSR

Vue SSR（Server-Side Rendering）是Vue.js的服务端渲染技术，它允许Vue应用在服务器端预先渲染HTML，然后将渲染好的HTML发送到客户端。

SSR vs CSR

客户端渲染（CSR）

• 浏览器下载JavaScript文件

• JavaScript在客户端执行

• 动态生成DOM

• 首屏加载时间较长

• SEO不友好

  服务端渲染（SSR）

• 服务器预先渲染HTML

• 浏览器直接显示HTML内容

• 首屏加载快

• SEO友好

• 服务器负载增加

  Vue SSR的优势

1. 更好的SEO：搜索引擎可以直接抓取到完整的HTML内容

2. 更快的首屏加载：用户可以更快看到页面内容

3. 更好的用户体验：特别是在慢速网络环境下

   Vue SSR的挑战

4. 开发复杂度增加：需要考虑服务端和客户端的差异

5. 服务器负载：每个请求都需要服务器渲染

6. 部署复杂度：需要Node.js服务器环境

   Vue SSR架构

   ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ 浏览器请求 │───▶│ Node.js服务器 │───▶│ Vue应用渲染 │ └─────────────────┘ └─────────────────┘ └─────────────────┘ │ ▼ ┌─────────────────┐ │ 返回HTML │ └─────────────────┘

   核心概念

   1. 通用代码（Universal Code）

• 可以在服务端和客户端运行的代码

• 避免使用浏览器特定的API

• 使用条件判断处理环境差异

  2. 客户端激活（Client-side Hydration）

• 服务端渲染的静态HTML在客户端变为可交互的应用

• Vue会接管服务端渲染的DOM

  3. 路由同构

• 服务端和客户端使用相同的路由配置

• 确保URL在两端的行为一致

  下一步

  在下一章节中，我们将学习如何搭建Vue SSR的开发环境。