# node-vue2-ssr-demo

**Repository Path**: qqcode/node-vue2-ssr-demo

## Basic Information

- **Project Name**: node-vue2-ssr-demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-23
- **Last Updated**: 2025-09-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Oniuniu SSR 项目

一个基于 Vue.js 2.x 的服务端渲染(SSR)学习项目，展示了如何使用 Vue Server Renderer 在 Node.js 环境中渲染 Vue 组件。

## 项目概述

本项目是一个 Vue.js 服务端渲染的基础示例，包含两个不同层次的实现：

- 基础的 Vue SSR 渲染示例
- 完整的 Express + Vue SSR Web 应用

## 技术栈

- **前端框架**: Vue.js 2.6.11
- **服务端渲染**: vue-server-renderer 2.6.11
- **Web 框架**: Express 5.1.0
- **开发工具**: nodemon 3.1.10

## 项目结构

```tree
oniuniu-ssr/
├── package.json          # 项目配置和依赖
├── package-lock.json     # 依赖锁定文件
├── server.js             # 完整的 Express + Vue SSR 服务器
├── 01-server.js          # 基础 Vue SSR 渲染示例
├── index.html            # HTML 模板文件
└── node_modules/         # 依赖包目录
```

## 安装和运行

### 安装依赖

```bash
npm install
```

### 运行项目

#### 方式一：开发模式（推荐）

```bash
npm run dev
```

使用 nodemon 启动，支持热重载，访问 <http://localhost:3000>

#### 方式二：直接运行完整服务器

```bash
node server.js
```

#### 方式三：运行基础示例

```bash
node 01-server.js
```

这将在控制台输出渲染后的 HTML 字符串

## 文件说明

### 1. server.js - 完整的 Web 应用

这是一个完整的 Express 服务器，集成了 Vue SSR 功能：

**功能特性：**

- 启动 Express 服务器监听 3000 端口
- 创建 Vue 实例并在服务端渲染
- 将渲染结果嵌入到完整的 HTML 页面中
- 支持动态路由参数（显示访问的 URL）

**关键代码逻辑：**

```javascript
// 创建 Vue 实例
const app = new Vue({
  data: { message: 'Hello, Oniuniu SSR!' },
  template: `<div>{{ message }}${req.url}</div>`
});

// 创建服务端渲染器
const renderer = require('vue-server-renderer').createRenderer();

// 渲染并返回完整 HTML 页面
renderer.renderToString(app).then(html => {
  res.send(/* 完整的 HTML 结构 */);
});
```

### 2. 01-server.js - 基础 SSR 示例

这是一个最基础的 Vue SSR 示例，用于学习和理解 SSR 的核心概念：

**功能特性：**

- 演示 Vue SSR 的三个基本步骤
- 在控制台输出渲染结果
- 包含新旧版本 API 的使用示例

**学习要点：**

1. **创建 Vue 实例**: 定义数据和模板
2. **创建渲染器**: 使用 `vue-server-renderer` 创建渲染器
3. **执行渲染**: 将 Vue 实例渲染为 HTML 字符串

### 3. package.json - 项目配置

**主要配置：**

- **项目名称**: oniuniu-ssr
- **开发脚本**: `npm run dev` 使用 nodemon 启动
- **核心依赖**: Vue 2.6.11 + vue-server-renderer
- **Web框架**: Express 5.1.0

## Vue SSR 工作原理

### 传统 SPA vs SSR

**传统 SPA（单页应用）:**

1. 浏览器下载空白 HTML
2. 下载 JavaScript 文件
3. JavaScript 在客户端渲染页面

**SSR（服务端渲染）:**

1. 服务端执行 Vue 代码
2. 生成完整的 HTML 字符串
3. 浏览器接收到已渲染的 HTML

### SSR 的优势

1. **更好的 SEO**: 搜索引擎可以直接索引服务端渲染的内容
2. **更快的首屏加载**: 用户立即看到渲染后的页面
3. **更好的用户体验**: 减少白屏时间

### 本项目的 SSR 流程

```
用户请求 → Express 服务器 → 创建 Vue 实例 → 服务端渲染 → 返回完整 HTML
```

## 开发说明

### 扩展功能建议

1. **添加路由**: 集成 Vue Router 支持多页面
2. **状态管理**: 集成 Vuex 进行状态管理
3. **样式处理**: 添加 CSS 预处理器支持
4. **构建工具**: 集成 Webpack 进行项目构建
5. **生产优化**: 添加缓存、压缩等优化策略

### 注意事项

1. 确保 Node.js 版本兼容（建议 Node.js 12+）
2. Vue 2.x 的 SSR 语法与 Vue 3.x 有所不同
3. 服务端渲染时需要注意浏览器特有 API 的使用

## 学习路线

1. **第一步**: 运行 `01-server.js` 理解基本概念
2. **第二步**: 运行 `server.js` 查看完整应用
3. **第三步**: 修改 Vue 实例的数据和模板
4. **第四步**: 添加更多路由和组件
5. **第五步**: 探索高级 SSR 特性

## 常见问题

**Q: 为什么选择 Vue 2.x 而不是 Vue 3.x？**
A: Vue 2.x 的 SSR 方案更加稳定和成熟，适合学习基础概念。

**Q: 如何调试 SSR 应用？**
A: 可以在服务端代码中使用 `console.log` 查看渲染过程，或使用 Node.js 调试工具。

**Q: 生产环境如何部署？**
A: 建议使用 PM2 等进程管理工具，并配置负载均衡和监控。

## 贡献

欢迎提交 Issue 和 Pull Request 来改进这个学习项目。

## 许可证

ISC License