关闭

Vue实现SSR效果

时间: 2020-11-10阅读: 150标签: 效果

SSR概念  

SSR即通过服务端渲染生成后输出给客户端。在SPA之前我们的WEB架构大都是SSR,如WordPress、DEDECMS、Discuz等,都是通过服务端取出数据和模板组合生成html输出给前端,且路由是在服务端控制的。


为什么要使用SSR

首屏优化 非SPA页面后台渲染好了直接返回html浏览器浏览器直接展示页面。而SPA页面后台给浏览器返回一堆js,前台再执行js去渲染页面,就导致打开很慢。

有助于seo 搜索引擎会通过蜘蛛发http get请求的方式去访问你的网页,并根据网站的内容来建立索引。蜘蛛是不会用js来渲染页面然后再爬里面的内容的,它们通常就是爬一个html文件。因此SPA页面就凉凉了。


SSR的实现原理和缺陷

使用SSR渲染是为了解决单页面应用seo能力不足的问题。所有的操作仍然是单页面控制,所谓的服务端渲染只是在平时返回的单页面应用的html上增加了对应路由的页面信息,好让爬虫获取到而已。

所以SSR项目需要服务端渲染和客户端渲染,服务端渲染就是根据vue实例获取对应路由的SEO信息并添加到单页面应用的HTML上,客户端渲染就是平时我们所熟悉的单页面应用。


vue-server-renderer

将Vue实例渲染成html 

构建服务器端渲染我们需要借助vue-server-renderer,为了了解它的作用,我们先看一段代码(先安装vue和vue-server-renderer,yarn add vue vue-server-renderer,vue-server-renderer和vue必须匹配版本):

const Vue = require('vue')
const app = new Vue({
    template: `<div>hello world</div>`
})

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

renderer.renderToString(app,(err, html)=>{
    if(err) throw err
    console.log(html)
})

执行node server.js可以看到打印<div>Hello World</div>,从这段代码可以明白vue-server-renderer的作用是拿到Vue实例并渲染成html

将html代码渲染到页面上  

为了将代码渲染到页面上,我们需要构建一个服务(官方使用的是express,也可以使用koa),接下来我们对上面的server.js进行改造(安装express,yarn add express)。

const Vue = require('vue')
const server = require('express')()

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

server.get('*',(req, res)=>{
    const app = new Vue({
        template: `<div>hello world</div>`
    })
    renderer.renderToString(app,(err, html)=>{
        if(err){
            res.status(500).end('Server Error')
            return
        }
        res.end(`
            <!DOCTYPE html>
            <html lang="en">
            <head><title>Hello</title></head>
            <body>${html}</body>
            </html>
        `)
    })
})

server.listen(8080)

执行node server.js并在浏览器上打开localhost:8080,页面上显示hello world说明服务已经启动。

1、使用页面模板

创建一个页面模板index.template.html,内容如下,<!--vue-ssr-outlet-->这里将是应用程序 HTML 标记注入的地方

<!DOCTYPE html>
<html lang="en">
  <head><title>Hello</title></head>
  <body>
    <!--vue-ssr-outlet-->
  </body>
</html>
const renderer = createRenderer({
  template: require('fs').readFileSync('./index.template.html', 'utf-8')
})

2、模板插值

<!DOCTYPE html>
<html lang="en">
  <head><title>Hello</title></head>
  <body>
    <!--vue-ssr-outlet-->
  </body>
</html>
const renderer = createRenderer({
  template: require('fs').readFileSync('./index.template.html', 'utf-8')
})
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9835

关闭

CSS :placeholder-shown伪类实现输入框浮动文字效果

当我们处理输入框时,会想方设法提供给用户更好的体验。有两个标签属性是我们经常会用到的:label标签是关联表单元素,提供说明信息最适合的元素。输入框的placeholder属性允许您指定没有输入内容时出现在<input>元素内的文本

使用 JavaScript 实现分屏视觉效果

今天这篇文章就来讲讲使用JavaScript来实现这种分屏的视觉UI效果。现在在网站上这种分屏视觉效果应用的也非常广泛,比如 Corsair website。

CSS :placeholder-shown伪类实现Material Design占位符交互效果

Material Design风格占位符交互效果官方示意见此demo页面。现在这种设计在移动端很常见,相信不少人设计项目中有实现过这种交互,而且,大部分是利用JS实现的。(ps:weex 不支持这个样式)

实现一个div的拖拽效果

实现思路:鼠标按下开始拖拽,记录摁下鼠标时的鼠标位置以及元素位置,拖动鼠标记下当前鼠标的位置,鼠标当前位置-摁下时鼠标位置= 鼠标移动距离

js之切换全屏和退出全屏实现

应用场景:比如很多网页游戏全屏之类的,或者是网上看小说等。核心代码:控制全屏,前端代码:document.exitFullscreen(); document.mozCancelFullScreen(); document.webkitCancelFullScreen();

ES6前后实现排它的两种写法

排它思想:清除其它所有的没有选中元素的样式, 只设置当前选中元素的样式

vue2实现带地区编号和名称的省市县三级联动效果

我们知道省市区县都有名称和对应的数字唯一编号,使用编号可以更方便查询以及程序处理,我们今天来了解一下使用vue2来实现常见的省市区下拉联动选择效果。

纯css实现星级评分效果

纯css实现超酷炫的星级评分动画效果,实现思路:5个类型为radio的input,label标签修改样式背景图为星星,label标签给每个星星鼠标停留时加注名字,点击星星有放大旋转的动画

纯CSS3制作3d网红热词盒子

今天给大家分享的是CSS3制作的带3d效果的方块,上面简单整理了一下2019年的网红热词。这个DEMO用到了CSS3的3d变化技巧,做出来的效果还不错。请注意,该3d效果依赖transform-style: preserve-3d属性

以轮播效果为案例谈如何写优质代码

作为程序员大家在写代码时谈的最多的就是代码的拓展性、复用性。本文就以大家熟悉的轮播效果为案例,讲一讲写优质代码的思路和实践。文章分三个步骤。第一步,实现基本功能

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!