028-86261949

当前位置:首页 > 技术交流 > Vue服务器渲染-SSR

Vue服务器渲染-SSR

2019/05/31 10:49 分类: 技术交流 浏览:1

一、什么是服务器渲染

 

Vue.js 是构建客户端应用程序的框架,默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。

 

然而,Vue也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

 

服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用",因为应用程序的大部分代码都可以在服务器和客户端上运行

 

二、为什么要使用服务器渲染

 

优点:

1. 更好的SEO,搜索引擎爬虫抓取工具可以直接查看完整渲染的页面

2. 更好的内容到达时间(time-to-content),

用户将会更快速的看到完整渲染的页面,提升用户体验

 

缺点:

1. 开发条件有限,要使用通用代码

2. 构建设置和部署的更麻烦

3. 更多的服务器负载

 

总结:

服务器渲染可以帮助实现选最佳的初始加载性能

 

 

三、简易版服务器渲染流程

 

实现vue+express服务器渲染步骤

1. 新建一个项目文件

项目名称:vue-ssr-simple

命令:

 

2. 进入vue-ssr-simple项目安装项目依赖包

命令:

进入项目:

 

安装依赖包:

 

3. 在vue-ssr-simple项目中创建app.js文件

     

 

4. 编辑app.js中功能代码

//引入vue

const Vue = require('vue')

//引入express实例

const express = require('express')()

//创建服务器端的渲染器

const renderer = require('vue-server-renderer').createRenderer()

//创建vue实例

const app = new Vue({

template: `

<h1>欢饮光临Vue界面</h1>

`

})

/*

服务器的核心:

通过vue-server-renderer插件中的renderToString()方法,

将Vue实例转为字符串插入到HTML文件中

*/

express.get('/', (req, res) => {

renderer.renderToString(app, (err, html) => {

if (err) {

//错误提示

return res.status(500).end('运行错误')

}

//响应数据

res.send(`

<!DOCTYPE html>

<html lang="en">

<head>

<title>Hello</title>

<meta charset="utf-8">

</head>

<body>

            <!--使用模板字符串将数据插入-->

${ html }

</body>

</html>

`)

})

})

//服务器监听

express.listen(9999, () => {

console.log("服务器启动成功...");

} )

 

5. 启动项目

命令:

 

6. 实现服务器渲染效果图

#标签:服务器渲染,SSR