Vue实现SSR效果

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

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

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

css实现全兼容的毛玻璃效果

通过本文,你能了解到:最基本的使用 CSS backdrop-filter 实现磨砂玻璃(毛玻璃)的效果,在至今不兼容 backdrop-filter 的 firefox 浏览器,如何利用一些技巧性的操作,巧妙的同样实现毛玻璃效果

js实现放大镜效果

使用电脑逛淘宝,京东等商城时,将鼠标移入图片中,图片会放大,之前一直在想这种是怎么实现的,前两天刚写出来,纯js实现的,无任何工具库。下面先来看下思路吧!刚学js的时候可能对于布局不是很重要

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

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

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

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

JavaScript实现许愿墙效果

初始化自动生成两个愿望签;输入框失去焦点或者按回车键,会生成愿望签;点击关闭会删除愿望签;可以拖动愿望签,并且不能拖出可视窗口

一个简易的 LED 数字时钟Js实现方法

这个应该是已经有很多人做过的东西,我应该只是算手痒,想写一下,所以,花了点时间折腾了这个,顺便把 Dark Mode 的处理也加上了

原生js实现放大镜效果

我们平时在电商网站购物时,需要对选取的某一个商品进行详情查看,此时当鼠标在商品图片上某一部分移动查看时旁边就会出现一个该部分图片的放大效果,这样就能够更好的对商品进行分析,下面就使用原生js来实现一下类似放大镜的效果

CSS实现雨滴动画效果

今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的。其实就是给一张图片,做了个模糊化的效果,看起来像毛玻璃的效果

vue实现左右滑动效果实例代码

vue.js是现在流行的js框架之一,vue 是一套用于构建用户界面的渐进式javascript框架,与其它大型框架不同的是:vue被设计为可以自底向上逐层应用。vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合

Js实现时钟效果

在JavaScript中,有一个内置对象Date,它重要的一个作用就是实现了时间的时刻更新,通过代码来创造一个实实在在的时间表。

点击更多...

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