SSR的应用场景

1.SEO需求

SEO（Search Engine Optimization，搜索引擎优化），是一种利用搜索引擎规则，提高网站在搜索引擎内自然排名的技术。通常这需要页面内容在页面加载完成时便已经存在。

前后端分离的纯前端项目，由于这类项目需要页面加载完成后再异步获取数据渲染，因此大部分搜索引擎无法获取到这类项目的内容。Vue SSR正是基于此类需求而给出的一种技术方案。利用nodejs搭建页面渲染服务，在服务端完成之前需要在客户端完成的页面渲染工作，输出给SEO更友好的页面。

2.首屏渲染速度

目前对于首屏渲染速度的提升有许多方案，在ssr之外还有龙骨，墓碑，数据直出。相比于这些方案ssr方案实现是最复杂的，但效果也是最好的。

实现方案

Vue SSR的实现有两种实现

1.基于官方Vue SSR指南文档的官方方案

更直接的控制应用程序的结构，更深入底层，更加灵活

2.vue.js通用应用框架–NUXT

平滑的开箱即用的体验，它建立在同等的Vue技术栈之上，但抽象出很多模板，并提供了一些额外的功能，例如静态站点生成。通过NUXT可以根据约定的规则，快速的实现Vue SSR

步骤代码

新建文件夹 ssr ，创建ssr demo项目，终端输入：
mkdir ssr-demo
cd ssr-demo
初始化文件夹：npm init -y
安装依赖：
vue、vue-server-renderer： npm i vue vue-server-renderer nodemon --save
（npm install express --save）
（npm install vue-router --save）
其中vue-server-renderer尤为关键，我们实现的vue-ssr依靠于这个库提供的API；vue用于创建vue实例；vue-router则用于实现路由控制；express使我们node端的框架。
修改package.json文件：

 "scripts": {"test": "echo \"Error: no test specified\" && exit 1","server": "node index.js","dev": "nodemon ./server.js"},

根目录新建server.js，搭建node服务：touch server.js
修改server.js中代码

// ① 引入express，express()
const server = require('express')()
// 1. 引入vue
const Vue = require('vue')// ② server.get('/',(req, res) => {})
server.get('/', (req, res) => {const app = new Vue({template: `<div>hello SSR !</div>`,})// 2. 使用vue-server-renderer的createRenderer，创建rendererconst renderer = require('vue-server-renderer').createRenderer()// 3. renderer.toString(vue实例).then(html => {}).catch(err => {console.log(err)})renderer.renderToString(app).then((html) => {console.log(html)res.end(`<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" />AaA<meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body>${html}</body></html>
`)}).catch((err) => {console.log(err)})
})// ③ server监听3001端口
server.listen(3001, () => {console.log('http://localhost:3001')
})

// 1. 引入vue
const Vue = require('vue')
const app = new Vue({template: `<div>hello SSR !</div>`,
})// 2. 使用vue-server-renderer的createRenderer，创建renderer
const renderer = require('vue-server-renderer').createRenderer()// 3. renderer.toString(vue实例).then(html => {}).catch(err => {console.log(err)})
renderer.renderToString(app).then((html) => {console.log(html)}).catch((err) => {console.log(err)})

运行命令：npm run dev

从零开始搭建一个vue-ssr（上）
https://segmentfault.com/a/1190000019618170

Vue SSR(vue服务端渲染)相关推荐

Vue SSR之服务端渲染
目录准备工作开始折腾 1. 首先安装 ssr 支持 2. 增加路由test与页面 3. 在src目录下创建两个js: 4. 修改router配置. 5. 改造main.js 6. entry-cl ...
vue ssr搭建服务端渲染项目
什么是服务器端渲染 (SSR) Vue.js 是构建客户端应用程序的框架.默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM.然而,也可以将同一个组件渲染为服务器端的 HT ...
使用Nuxt.js搭建VUE应用的SSR（服务端渲染）
Nuxt.js的介绍 Nuxt.js概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染) Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用V ...
SSR（服务端渲染）
客户端渲染: 在服务端放了一个html 页面,里面有客户端发起请求,服务端把页面(响应的是字符串)发送过去,客户端从上到下依次解析,如果在解析的过程中,发现ajax 请求,再次像服务器发送新的请求, ...
vue如何实现服务端渲染
一.服务端渲染服务器端渲染:后端先调用数据库,获得数据以后,将数据和页面元素进行拼装,组合成完整的 html页面,再直接返回给浏览器,以用户浏览,也就是说明数据和页面是由服务器所去完成,返回浏览器展 ...
SSR（服务端渲染）于CSR（客户端渲染）
SSR (Server Side Rendering,服务端渲染) 希望的是:服务端第一次只把渲染好的 HTML 发给客户端,这样客户端就能直接显示出来网页的样式,首次绘制(First Paint)就 ...
vue项目转换服务器端渲染,vue-server-renderer实现vue项目改造服务端渲染
这是一篇教程,从创建项目到改造项目 vue-cli创建一个项目在放你做demo的地方,创建一个项目 vue create vue-ssr // 如果你安装了vue-cli4,选择vue2的版本,以下 ...
Vue、Nuxt服务端渲染，NodeJS全栈项目，面试小白的博客系统~~
Holle,大家好,我是李白!! 一时兴起的开源项目,到这儿就告一段落了. 这是一个入门全栈之路的小项目,从设计.前端.后端.服务端,一路狂飙的学习,发量正在欣喜若狂~~ 接触过WordPress,H ...
SSR（服务端渲染）、CSR（客户端渲染）和预渲染
SSR:由服务端实时渲染好完整页面(数据是最新的),来减少浏览器首次访问网站的渲染时间 CSR:由浏览器实时渲染好完整页面(数据是最新的),所以用户首次访问时,白屏时间会比较长预渲染:在项目构建时提 ...
服务端渲染（回答vue为啥子不支持seo优化，如何解决）
整体目标: 理解服务端渲染的概念会用vue的SSR Nuxt中的async 一.基本概念页面的两种生成方式用户从浏览器地址栏中输入地址访问服务器上的页面时,服务器可以用两种不同的策略来生成这个页 ...

Vue SSR(vue服务端渲染)

SSR的应用场景

1.SEO需求

2.首屏渲染速度

实现方案

1.基于官方Vue SSR指南文档的官方方案

2.vue.js通用应用框架–NUXT

步骤代码

Vue SSR(vue服务端渲染)相关推荐

最新文章

热门文章

Vue SSR(vue服务端渲染)

SSR的应用场景

1.SEO需求

2.首屏渲染速度

实现方案

1.基于官方Vue SSR指南文档的官方方案

2.vue.js通用应用框架–NUXT

步骤 代码

Vue SSR(vue服务端渲染)相关推荐

最新文章

热门文章

步骤代码