# vue-srr

**Repository Path**: frontend-views/vue-srr

## Basic Information

- **Project Name**: vue-srr
- **Description**: 服务端渲染示例
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-06-11
- **Last Updated**: 2021-06-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-cli 搭建服务端渲染SSR

> 参考地址：https://ssr.vuejs.org/zh/

## 关于SSR

### 什么是SSR

* 可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序
* 简单点说：就是将页面在服务端渲染完成后在客户端直接显示。无需等待所有的 JavaScript 都完成下载并执行，才显示服务器渲染的标记，所以你的用户将会更快速地看到完整渲染的页面。

### 为什么要用SSR

更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
更快的内容到达时间 (time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。

### SSR原理

<img src="./src/assets/1.png">

* 1、所有的文件都有一个公共的入口文件app.js
* 2、进入ServerEntry（服务端入口）与clientEntry（客户端入口）
* 3、经过webpack打包生成ServerBundle（供服务端SSR使用，一个json文件）与ClientBundle（给浏览器用，和纯Vue前端项目Bundle类似）
* 4、当请求页面的时候，node中ServerBundle会生成html界面，通过ClientBundle混合到html页面中

### 通用代码约束：

* 实际的渲染过程需要确定性，所以我们也将在服务器上“预取”数据 ("pre-fetching" data) - 这意味着在我们开始渲染时，我们的应用程序就已经解析完成其状态。
* 避免在 beforeCreate 和 created 生命周期时产生全局副作用的代码，例如在其中使用 setInterval 设置 timer
* 通用代码不可接受特定平台的 API，因此如果你的代码中，直接使用了像 window 或 document，这种仅浏览器可用的全局变量，则会在 Node.js 中执行时抛出错误，反之也是
如此

## 项目启动

### 安装项目依赖
```
yarn install
```

### 编译文件
```
yarn build
```

### 启动项目
```
yarn start
```