vue ssr 实现方式(学习笔记)

2019-09-02 16:08| 发布者: |



ssr 的全称是 server side render,服务端渲染,澳门皇冠真人网站vue ssr 的意思就是在服务端进行 vue 的渲染,直接对前端返回带有数据,并且是渲染好的html页面;而不是返回一个空的html页面,再由vue 通过异步请求来获取数据,再重新补充到页面中。

这么做的最主要原因,就是搜索引擎优化,也就是seo,这更利于网络爬虫去爬取和收集数据。


这里简单说一下爬虫的爬取方式,爬虫通过访问 url 获取一个页面后,会获取当前html中已存在的数据,也可以理解为把拿到的 html 页面转为了字符串内容,然后解析、存储这些内容,但是如果页面中有些数据是通过异步请求获得的,那么爬虫是不会等待异步请求返回之后才结束对页面数据的解析的,这样就会没有爬取到这部分数据,很不利于其他搜索引擎的收录。

这也就是为什么单页面网站是不具备良好的seo效果的,因为单页面返回的就是一个基本为空的 html 文件,里面就一个带有id的元素等待挂载而已,页面的内容都是通过 js 后续生成的,比如这样:

 !doctype html 
 html lang="en" 
 head title hello /title /head 
 body div id="app" /div /body 
 script src="bundle.js" /script 
 /html 

但对于很多公司来说,公司的产品是希望能被百度、谷歌等搜索引擎收录之后,进行排名,进一步的被用户搜索到,能更利于品牌的推广、流量变现等操作,要实现这些,就必须保证产品的网页是能够被网络爬虫爬取到的,显然一个完整的带有全部数据的页面更利于爬虫的爬取,当然现在也有很多方法可以去实现针对页面异步数据的爬取,github 上也开源了很多的爬虫代码,但是这显然对于爬虫来说更加的不友好、成本更高。

ssr 当然也是有着其他的好处的,比如首屏页面加载速度更快,用户等待时间更短等,其他更多概念可以查看官网 ,这些官网上都有介绍。


下面我们结合官网上的代码,做一下代码实操,来加深下理解:


新建一个文件夹vue-ssr-demo,进入其中执行如下命令:

// 安装模块 
npm install vue vue-server-renderer --save

创建文件 server.js

// vue-ssr-demo/server.js 示例代码
//第一步,创建vue实例
const vue = require;
const app = new vue.createrenderer;
//第三步,将vue渲染为html
renderer.rendertostring= {
 if{
 throw err;
 console.log;
});

保存以上代码后,在 vue-ssr-demo 文件夹下打开命令行工具,执行 node server.js 命令,可得到如下 html 内容:

 vue-ssr-demo node server.js
 div data-server-rendered="true" hello world /div 

好,上面的例子中我们已经让 vue 在服务端,也就是 node 环境下运行起来了,到这里其实已经实现了 vue 的服务端渲染了。

可是,实际项目中使用哪有这么简单,起码数据还没渲染啊,那接下来我们看看如何渲染数据:

vue-ssr 渲染数据的方式有两种,我们先看下第一种:

// server.js
const data_vue = {
 word: 'hello world!'
//第一步,创建vue实例
const vue = require;
//vue 实例化过程中插入数据
const app = new vue.createrenderer;
//第三步,将vue渲染为html
renderer.rendertostring= {
 if{
 throw err;
 console.log;
}); 

第一种方式,在创建 vue 实例时,将需要的数据传入 vue 的模板,使用方法与客户端 vue 一样;运行 server.js 结果如下,数据 data_vue 已经插入到 vue 模板里面了:

 vue-ssr-demo node server.js
 div data-server-rendered="true" hello world! /div 

第二种,模板插值,这里我们也直接先放代码:

const data_vue = {
 word: 'hello world!'
const data_tpl = {
 people: 'hello people!'
//第一步,创建vue实例
const vue = require;
const app = new vue.createrenderer= {
 if{
 throw err;
 console.log;
});

这里我们增加了数据 data_tpl,你会发现,在 rendertostring 方法中传入了这个参数,那么这个参数作用在哪里呢?这就要看下官网中关于 createrenderer 和 rendertostring 方法的介绍了,

createrenderer: 使用选项创建一个 renderer 实例。
const { createrenderer } = require
const renderer = createrenderer

在选项中,就有一个参数叫 template,看官网怎么说的:

template: 为整个页面的 html 提供一个模板。此模板应包含注释 !--vue-ssr-outlet-- ,作为渲染应用程序内容的占位符。
为整个页面的 html 提供一个模板。此模板应包含注释 !--vue-ssr-outlet-- ,作为渲染应用程序内容的占位符。


模板还支持使用渲染上下文 进行基本插值:


使用三花括号 进行 html 不转义插值 。

根据介绍,在创建 renderer 实例时,可以通过 template 参数声明一个模板,这个模板用来干嘛呢?就用来挂载 vue 模板渲染完成之后生成的 html。这里要注意一下,当创建 renderer 实例时没有声明 template 参数,那么默认渲染完就是 vue 模板生成的 html;当创建 renderer 实例时声明了 template 参数,一定要在模板中增加一句注释 “ !--vue-ssr-outlet-- ” 作为 vue 模板插入的占位符,否则会报找不到插入模板位置的错误。


 vue-ssr-demo node server.js
 div data-server-rendered="true" hello world! /div div hello people! /div 

如果我们把 template 换成一个 html 页面的基本架构,来包裹 vue 模板,是不是就能得到一个完整页面了呢?我们来试一下:

const data_vue = {
 word: 'hello world!'
const data_tpl = {
 people: 'hello people!'
//第一步,创建vue实例
const vue = require;
const app = new vue.createrenderer= {
 if{
 throw err;
 console.log;

运行 server.js ,结果如下,我们得到了一个完整的 html 页面,且成功插入了数据:

 vue-ssr-demo node server.js
 !doctype html 
 html lang="en" 
 head title hello /title /head 
 body 
 div data-server-rendered="true" hello world! /div div hello people! /div 
 /body 
 /html 

好,现在页面生成了,该怎么显示呢?这里我们借助下框架 koa 实现,先来安装:

npm install koa -s

然后修改 server.js ,如下:

const data_vue = {
 word: 'hello world!'
const data_tpl = {
 people: 'hello people!'
const koa = require;
//创建 koa 实例
const koa = new koa;
const vue = require;
//创建一个renderer
const renderer = require.createrenderer = {
 // await next;
 //创建vue实例
 const app = new vue;
 ctx.body = body;
// 在端口3001监听:
koa.listen;
console.log;

运行 server.js :

 vue-ssr-demo node server.js
app started at port 3001...

然后打开浏览器,输入网址 http://localhost:3001/ ,即可看到运行后的效果。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持萬仟网。

<
>
关于我们
AB模版网成立于2014年,我们是一家专注用户体验设计开发与互联网品牌建设的设计公司,创立至今为2000多位客户提供了创新与专业的设计方案。设计服务范围包括:交互原型设计、产品视觉设计、网站设计与开发建设、移动及软件产品界面设计、图标设计、品牌及平面设计等。

联系我们

13588889999服务时间:9:00-18:00)

admin@adminbuy.cn

官方微信官方微信

部门热线

前   台:13588889999
业务部:13588889999
客服部:13588889999
技术部:13566667777
人事部:13566667777

咨询电话13588889999 返回顶部
返回顶部