本文为拉勾网大前端高薪训练营第一期笔记
心得体会
SSR是未来前端页面必不可少的一个组成成分,掌握了Vue SSR基本上其他框架都非常类似。
3-4-1 搭建自己的SSR
Vue SSR 介绍
是什么
- 官方文档:https://ssr.vuejs.org/
- Vue SSR(Vue.js Server-Side Rendering) 是 Vue.js 官方提供的一个服务端渲染(同构应用)解决方案
- 使用它可以构建同构应用
- 还是基于原有的 Vue.js 技术栈
官方文档的解释:Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序。
服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用",因为应用程序的大部分代码都可
以在服务器和客户端上运行。
使用场景
在对你的应用程序使用服务器端渲染 (SSR) 之前,你应该问的第一个问题是,是否真的需要它。
技术层面:
- 更快的首屏渲染速度
- 更好的 SEO
业务层面:
- 不适合管理系统
- 适合门户资讯类网站,例如企业官网、知乎、简书等
- 适合移动网站
如何实现 Vue SSR
(1)基于 Vue SSR 官方文档提供的解决方案
官方方案具有更直接的控制应用程序的结构,更深入底层,更加灵活,同时在使用官方方案的过程中,也会对Vue SSR有更加深入的了解。
该方式需要你熟悉 Vue.js 本身,并且具有 Node.js 和 webpack 的相当不错的应用经验。
(2)Nuxt.js 开发框架
NUXT提供了平滑的开箱即用的体验,它建立在同等的Vue技术栈之上,但抽象出很多模板,并提供了一些额外的功能,例如静态站点生成。通过 Nuxt.js 可以快速的使用 Vue SSR 构建同构应用。
Vue SSR 基本使用
接下来我们以 Vue SSR 的官方文档为参考,来学习一下它的基本用法。
渲染一个 Vue 实例
目标:
了解如何使用 VueSSR 将一个 Vue 实例渲染为 HTML 字符串
首先我们来学习一下服务端渲染中最基础的工作:模板渲染。
说白了就是如何在服务端使用 Vue 的方式解析替换字符串。
在它的官方文档中其实已经给出了示例代码,下面我们来把这个案例的实现过程以及其中含义演示一下。
mkdir demo01
cd demo01
npm install vue vue-server-renderer
demo01/index.js :
// 第 1 步:创建一个 Vue 实例
const Vue = require("vue")
const app = new Vue({
template: `<div>{
{ message }}</div>`, data: {
message: "Hello World",
},
})
// 第 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 World</div>
})
// 在 2.5.0+,如果没有传入回调函数,则会返回 Promise:
renderer
.renderToString(app).then((html) => {
console.log(html)
})
.catch((err) => {
console.error(err)
})
与服务器集成
在 Node.js 服务器中使用时相当简单直接,例如 Express。 首先安装 Express 到项目中:
然后使用 Express 创建一个基本的 Web 服务:
npm i express
const express = require("express")
const app = express()
app.get("/", (req, res) => {
res.send("Hello World!")
})
app.listen(3000, () => console.log("app listening at http://localhost:port"))
//启动 Web 服务:
//在 Web 服务中渲染 Vue 实例:
nodemon index.js
const Vue = require("vue")
const server = require("express")()
const renderer = require("vue-server-renderer").createRenderer()
server.get("*", (req, res) => {
const app = new Vue({
data: {
url: req.url,
},
template: <div>访问的 URL 是: {
{ url }}</div>, });
renderer.renderToString(app, (err, html) => {
if (err) {
res.status(500).end("Internal Server Error")
return
}
//or res.setHeader('Content-Type', 'text/html; charset=utf8')
res.end(<!DOCTYPE html > <html lang="en" > <head><title>Hello < /title> <meta charset="UTF-8"> </head > <body>${ html } < /body> </html >)
});
});
server.listen(8080)
使用一个页面模板
const renderer = require('vue-server-renderer').createRenderer({
template: fs.readFileSync('./index.template.html', 'utf-8')
})
renderer.renderToString(app, (err, html)=>{
if(err){return res.status(500).end('Internal Server Error.')}
res.setHeader('Content-Type', 'text/html; charset=utf8')
res.end(html)
})
index.template.html内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{
{
{ meta.inject().title.text() }}}
{
{
{ meta.inject().meta.text() }}}
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
在模板中使用外部数据
index.template.html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{
{ title }}
<!-- 想要原文输出,而不是字符串的形式,用三个大括号 -->
{
{
{meta}}}
</head>
renderer.renderToString(app, {
title: '拉勾教育',
meta: `<meta name="description" content="拉勾教育"`
}, (err, html)=>{
if(err){return res.status(500).end('Internal Server Error.')}
res.setHeader('Content-Type', 'text/html; charset=utf8')
res.end(html)
})
需要重新启动node server.js生效
构建流程
图1
之前的做法只有服务端bundle,没有客户端bundle
项目结构
src
├── components
│ ├── Foo.vue
│ ├── Bar.vue
│ └── Baz.vue
├── App.vue
├── app.js # 通用 entry(universal entry)
├── entry-client.js # 仅运行于浏览器
└── entry-server.js # 仅运行于服务器
安装依赖
npm i vue vue-server-renderer express cross-env
vue: Vue.js 核心库
vue-server-renderer: Vue 服务端渲染工具
express: 基于 Node 的 Web 服务框架
cross-env: 通过 npm scripts 设置跨平台环境变量
开发依赖