详解vue服务端渲染(SSR)初探


Posted in Javascript onJune 19, 2017

前言

首先来讲一下服务端渲染,直白的说就是在服务端拿数据进行解析渲染,直接生成html片段返回给前端。具体用法也有很多种比如:

传统的服务端模板引擎渲染整个页面

服务渲染生成htmll代码块, 前端 AJAX 获取然后js动态添加

服务端渲染的优劣

首先是seo问题,前端动态渲染的内容是不能被抓取到的,而使用服务端渲染就可以解决这个问题。还有就是首屏加载过慢这种问题,比如在SPA中,打开首页需要初始加载很多资源,这时考虑在首屏使用服务端渲染,也是一种折中的优化方案。但是使用SSR时,势必会增加服务器的压力,还有可能会需要前后端同构,使用同样的模板引擎,这似乎与前后端分离的观点又是矛盾的。废话就说到这里,下面来看一下vue框架中的服务器渲染。

vue-server-renderer

vue-server-renderer就是vue中处理服务端加载的一个模块了,官方文档:https://ssr.vuejs.org/en/,暂时没有中文版的,我也只是稍微看了一些,然后写了一个简单的demo。首先新建一个test.js文件,并用npm安装依赖express、vue、vue-server-renderer。引入vue-server-renderer之后,然后新建一个temp.html作为渲染的基本模板,用createRenderer方法新建一个render实例,这里我传入temp.html作为renderer的template的参数,在后面渲染时就会以这个temp.html作为基础模板。

const renderer = require('vue-server-renderer').createRenderer({
  template: require('fs').readFileSync('./temp.html', 'utf-8')
})

temp.html:

<!DOCTYPE html>
<html lang="en">
<head><title>{{title}}</title></head>
 <body>
  <!--vue-ssr-outlet-->
 </body>
</html>

接下来随便定义一些渲染用的数据,然后用express新建一个node服务器,再定义一个vue的实例。然后再调用renderer的renderToString方法来渲染生成html,渲染成功后返回给客户端。

const Vue = require('vue')
const server = require('express')()
const context = {
 title: 'hello'
}
const mocktitle = '我爱吃的水果'
const mockdata = ['香蕉', '苹果', '橘子']
server.get('*', (req, res) => {
 const app = new Vue({
  data: {
   url: req.url,
   data: mockdata,
   title: mocktitle
  },
  template: <div>The visited URL is: {{ url }}
  <h3>{{title}}</h3>
  <p v-for='item in data'>{{item}}</p>
  </div>
 })
 renderer.renderToString(app, context, (err, html) => {
  if (err) {
   res.status(500).end('Internal Server Error')
   return
  }
  res.end(html)
 })
})
server.listen(8080)

注意这里渲染的数据有两种,mockdata是作为vue实例的data来渲染在实例模板中的,而context是作为基础模板的data来渲染temp.html的。可以看到在服务端用vue进行渲染的规则和前端渲染时一样,v-for、v-if等都可以正常使用。最后命令行输入node test.js,然后在浏览器打开http://localhost:8080 查看结果如下:

详解vue服务端渲染(SSR)初探

可以看到服务端直接返回了一个渲染完成的Doc,示例demo到此结束。

结语

服务端渲染还是客户端渲染的问题,个人觉得还是要针对具体业务场景然后再做选择。然后作为前端我对服务端的东西了解的也不是很多,上面说的如果有不对的地方,欢迎指正拍砖。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript的面向对象(二)
Nov 09 Javascript
jQuery对表单元素的取值和赋值操作代码
May 19 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
AngularJS Toaster使用详解
Feb 24 Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
node中koa中间件机制详解
Aug 22 Javascript
JS指定音频audio在某个时间点进行播放
Nov 28 Javascript
jQuery实现简单的手风琴效果
Apr 17 #jQuery
原生JS+Canvas实现五子棋游戏实例
Jun 19 #Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 #Javascript
Node.js中 __dirname 的使用介绍
Jun 19 #Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 #Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 #Javascript
jQuery自定义多选下拉框效果
Jun 19 #jQuery
You might like
多数据表共用一个页的新闻发布
2006/10/09 PHP
第三章 php操作符与控制结构代码
2011/12/30 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
php源码的安装方法和实例
2019/09/26 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
js数组的操作详解
2013/03/27 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
职务聘任书范文
2014/03/29 职场文书
纪律教育月活动总结
2014/08/26 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书