“学而不思则惘,思而不学则殆”
服务端渲染(SSR)
SSR意为 server-side rendering(服务端渲染),目的是为了解决单页面应用的SEO的问题。
服务器端渲染(SSR)和客户端渲染(CSR)
服务器端渲染(SSR)
浏览器先请求HTML文档,服务器端先将html页面(或页面组件),生成为html字符串,再返回给浏览器,最后直接渲染到页面上。
客户端渲染(CSR)
浏览器先请求HTML文档,在浏览器端加载html页面中的JS脚本。通过JS(vue/react)的能力,将虚拟DOM最终渲染填充到页面中。
两者本质的区别是什么?
SSR
服务端生成好的html页面内容,直接返回给浏览器渲染。
server
const express = require('express')
const app = express()
app.get('/ssr', (req, res) => {
res.send(`
<html>
<head>
<meta charset='utf-8'>
<title>SSR 服务端渲染</title>
</head>
<body>
<h3>SSR 服务端渲染</h3>
<p>SSR意为 Server Side Rendering(服务端渲染),目的是为了解决单页面应用的SEO的问题。</p>
</body>
</html>
`)
})
app.listen(7200)
客户端访问页面localhost:7200/ssr
<html>
<head>
<meta charset='utf-8'>
<title>SSR 服务端渲染</title>
</head>
<body>
<h3>SSR 服务端渲染</h3>
<p>SSR意为 Server Side Rendering(服务端渲染),目的是为了解决单页面应用的SEO的问题。</p>
</body>
</html>
CSR
页面首先直接输出一个空的div#root,再由客户端加载编译打包好的react代码(bundle.js chunk.js等js脚本),最终将页面组件渲染到页面中。
npx create-react-app my-app
cd my-app
yarn start
浏览器访问http://localhost:3000/
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script></body>
客户端渲染和服务器端渲染的最重要的区别就是究竟是谁来完成html文件的完整拼接,如果是在服务器端完成的,然后返回给客户端,就是服务器端渲染,而如果是前端做了更多的工作完成了html的拼接,则就是客户端渲染。
前后端拆分核心理念
前后端拆分,后端专注于数据接口服务,前端专注接口调用,页面渲染,双剑合璧,相得益彰。
服务器端渲染的优缺点是怎样的?
优点:
- 更好的SEO 首屏加载快 由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
- 首屏加载快 快速地看到完整渲染的页面,从而提高用户体验。
- 后端生成静态化文件 即解析模板的工作完全交由后端来做,客户端只要解析标准的html页面即可。
缺点:
- 开发条件受限 在服务端渲染中,created和beforeCreate之外的生命周期钩子不可用
- 占用服务端资源
- 学习成本相对较高 除了对webpack、Vue要熟悉,还需要掌握node、Express相关技术。相对于客户端渲染,项目构建、部署过程更加复杂。
客户端渲染的优缺点是怎样的?
优点:
- 前后端分离 前端专注于前端UI,后端专注于api开发,且前端有更多的选择性,而不需要遵循后端特定的模板。
- 体验更好
缺点:
- 首屏加载缓慢
- 不利于SEO 除了 Google 和 Bing 比较完美地实现了对于 SPA(Single-Page Application)的爬虫渲染及内容抓取,大多数搜索引擎包括百度都没有支持。因而,包含丰富内容的产品并需要 SEO 流量的产品也就自然需要 SSR 实现。
是否应该使用服务端渲染
- 首屏加载慢 针对于首屏加载,可以做服务端渲染。但要有觉悟,一旦这样做,后期维护是个很痛苦的事情。相比于做服务端渲染,更推荐通过应用拆分、code spliting 来完成优化首屏加载的过程(先前做过一次首屏优化,优化前首屏加载每次都在 5s+,code spliting 之后直接变成 2s+,性价比高)。
- SEO优化 如果是为了主页网站被搜索引擎收录,可以使用服务端渲染。但更好的建议新开引导项目,在该项目上静态资源或服务端渲染显示页面,作为主要网站的搜索引擎引流作用。
Vue服务端渲染
这里我们先从Vue的vue-server-renderer来聊聊服务端渲染,暂先不说那些ssr框架(Nuxt.js Next.js) vue-server-renderer 是官方提供给我们用来实现服务端渲染的npm包
基本用法
安装
npm install vue vue-server-renderer --save
渲染一个Vue实例
1.创建一个 Vue 实例
const Vue = require('vue')
const app = new Vue({
template: `<div>hello zhufeng</div>`
})
2.创建一个 renderer对象
const renderer = require('vue-server-renderer').createRenderer()
3.将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
if (err) throw err
console.log(html)
// <div data-server-rendered="true">hello zhufeng</div>
})
// 在 2.5.0+,如果没有传入回调函数,则会返回 Promise:
renderer.renderToString(app).then(html => {
console.log(html)
}).catch(err => {
console.error(err)
})
Vue实例渲染 完整示例代码
Node.js 服务器作为中间层
npm i express --save
const Vue = require('vue')
const server = require('express')()
// 创建一个 renderer对象
const renderer = require('vue-server-renderer').createRenderer()
// 创建一个后端路由
server.get('/', (req, res) => {
// 创建一个 Vue 实例
const app = new Vue({
data: {
title: 'hello zhufeng'
},
template: `<h3>{{ title }}</h3>`
})
// 通过renderToString方法 将Vue实例转换成HTML
renderer
.renderToString(app)
.then(html => {
console.log(html)
// '<h3 data-server-rendered="true">hello zhufeng</h3>'
// 最终将拼接好的html页面内容 返回给浏览器
res.send(`
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>${html}</body>
</html>
`)
})
.catch(err => {
res.status(500).end('Internal Server Error')
})
})
server.listen(7300)
使用html页面模板
创建一个html模板页面,用一个额外的HTML页面包裹容器,来包裹生成的HTML标记(markup)。
html模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>服务端渲染SSR</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
注意 <!--vue-ssr-outlet--> 注释 -- 这里将是应用程序 HTML 标记注入的地方。
server端
const Vue = require('vue')
const fs = require('fs')
const server = require('express')()
const { createRenderer } = require('vue-server-renderer')
// 创建一个 renderer对象 并指定渲染模板
const renderer = createRenderer({
template: fs.readFileSync('./template/index1.html', 'utf-8')
})
// 创建一个后端路由
server.get('/', (req, res) => {
// 创建一个 Vue 实例
const app = new Vue({
data: {
title: 'hello zhufeng'
},
template: `<h3>{{ title }}</h3>`
})
// 通过renderToString方法 将Vue实例转换成HTML
renderer
.renderToString(app)
.then(html => {
// 最终将拼接好的html页面内容 返回给浏览器
res.send(html)
})
.catch(err => {
res.status(500).end('Internal Server Error')
})
})
server.listen(7300)
动态注入title 和 meta标签
html模板设置插值变量
<!DOCTYPE html>
<html lang="en">
<head>
{{{meta}}}
<title>{{title}}</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
我们可以通过传入一个"渲染上下文对象",作为 renderToString 函数的第二个参数,来提供插值数据:
// 动态注入title 和 meta标签
const context = {
title: '珠峰前端培训',
meta: `
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="keywords" content="HTML, CSS, Vue, React, Node, JavaScript" />
`
}
// 通过renderToString方法 将Vue实例转换成HTML
renderer
.renderToString(app, context)
.then(html => {
// 最终将拼接好的html页面内容 返回给浏览器
res.send(html)
})
.catch(err => {
res.status(500).end('Internal Server Error')
})
参考源码
编写通用代码
"通用"代码 - 即运行在服务器和客户端的代码。由于用例和平台 API 的差异,当运行在不同环境中时,我们的代码将不会完全相同。所以这里我们将会阐述你需要理解的关键事项。
SSR开发需要注意的问题
-
服务端渲染只会执行 vue 的两个钩子函数 beforeCreate 和 created
-
服务端渲染无法访问 window 和 document等只有浏览器才有的全局对象。
通用API 例如,axios 是一个 HTTP 客户端,可以向服务器和客户端都暴露相同的 API。
webpack工程构建
服务端和客户端各自都需要提供Vue应用程序。为了做到这一点,我们需要使用 webpack 来打包我们的 Vue 应用程序。事实上,我们可能需要在服务器上使用 webpack 打包 Vue 应用程序,因为:
-
通常 Vue 应用程序是由 webpack 和 vue-loader 构建,并且许多 webpack 特定功能不能直接在 Node.js 中运行(例如通过 file-loader 导入文件,通过 css-loader 导入 CSS)。
-
尽管 Node.js 最新版本能够完全支持 ES2015 特性,我们还是需要转译客户端代码以适应老版浏览器。这也会涉及到构建步骤
然后我们的服务端代码和客户端代码通过webpack分别打包,生成Server Bundle和Client Bundle
-
服务器需要「服务器 bundle」然后用于服务器端渲染(SSR)
-
客户端 bundle」会发送给浏览器,用于混合静态标记。
从零搭建Vue开发环境(SSR)
利用vue-server-renderer 搭建Vue SSR开发环境
Git仓库源码
从零大家vue ssr环境比较费劲
从零搭建vue环境 可以参考我这篇文章(从零搭建Vue开发环境:webpack4 + vue-loader + babel-loader v8 + Babel v7 + eslint + git hooks + editorconfig)
服务端渲染应用框架-Nuxt.js
Nuxt.js 是一个基于 Vue.js 的服务端渲染应用框架。 你可以基于它初始化新项目的基础结构代码,或者在已有 Node.js 项目中使用 Nuxt.js。 Nuxt.js 预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。
create-nuxt-app
Nuxt.js团队创建的脚手架工具
创建一个nuxt工程
npx create-nuxt-app nuxt-app
它会让你进行一些集成选择, 如服务器端框架(express koa)和 UI框架。
启动项目
npm run dev
现在我们的应用运行在 http://localhost:3000 上运行。
注意:Nuxt.js 会监听 pages 目录中的文件更改,因此在添加新页面时无需重新启动应用程序。
目录结构
├── README.md # 说明文档
├── assets # 资源目录 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript
├── components # 组件目录 用于组织应用的 Vue.js 组件
├── layouts # 布局目录 用于组织应用的布局组件
├── middleware # 中间件目录 用于存放应用的中间件。
├── nuxt.config.js # nuxt配置文件 用于组织Nuxt.js 应用的个性化配置,以便覆盖默认配置。
├── pages # 页面目录 用于组织应用的路由及视图
├── plugins # 插件目录 用于组织那些需要 在根vue.js应用实例化之前需要运行的Javascript插件
├── server # 服务端 用于组织node中间层服务代码
├── static # 静态文件目录 用于存放应用的静态文件
├── store # store目录 用于组织应用的 Vuex 状态树 文件。
目录结构详情说明 zh.nuxtjs.org/guide/direc…
异步数据
asyncData
asyncData方法会在组件(限于页面组件)每次加载之前被调用。它可以在服务端或路由更新之前被调用。你可以利用 asyncData方法来获取数据,Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。
fetch
fetch 方法用于在渲染页面前填充应用的状态树(store)数据, 与 asyncData 方法类似,不同的是它不会设置组件的数据。
Nuxt.js开发实战(打造CNode社区)
路由创建
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
Vuex配置
Nuxt.js 会尝试找到应用根目录下的 store 目录,如果该目录存在,它将做以下的事情:
- 引用vuex模块
- 将vuex模块加到vendors构建配置中去
- 设置Vue根实例的store配置项
middleware中间件配置
每一个中间件应放置在 middleware/ 目录。文件名的名称将成为中间件名称(middleware/auth.js将成为 auth 中间件)。
node服务配置
nuxt.config.js
Nuxt.js 默认的配置涵盖了大部分使用情形,可通过 nuxt.config.js 来覆盖默认的配置。
zh.nuxtjs.org/api/configu… github.com/Lwenli1224/…
Nuxt.js CNode社区项目源码
更多详情请看我仓库源码 github.com/Lwenli1224/…
未完待续 持续更新。。。
论文档资料的重要性
越来越觉得平时学习工作 看文档很重要,特别是官方文档 一手的资料,英语好的话最好是看英文文档一手资料比较多。
-
看官方文档 如:
Nuxt.js zh.nuxtjs.org/
webpack webpack.js.org/
babel babeljs.io/ -
通过npm搜包了解
-
去github看源码
-
查问题去stackoverflow (科学上网)
-
逛技术社区 MDN 掘金 CSDN 博客园等