ssr(服务端渲染)顾名思义就是将页面在服务端渲染完成后在客户端直接展示。
即客户端渲染的模式
vue.js构建的应用程序,默认情况下是有一个html模板页,然后通过webpack打包生成一堆js、css等等资源文件。然后塞到中
用户输入url访问页面 -> 先得到一个html模板页 -> 然后通过异步请求服务端数据 -> 得到服务端的数据 -> 渲染成局部页面 -> 用户
即服务端渲染模式
ssr的好处官网已经给出,最有意思的两个优点如下:
这是vue.js官方的ssr原理介绍图,从这张图片,我们可以知道:我们需要通过webpack打包生成两份bundle文件:
不管你项目先前是什么样子,是否是使用vue-cli生成的。都会有这个构建改造过程。在构建改造这里会用到 vue-server-renderer 库,这里要注意的是 vue-server-renderer 版本要与vue版本一样。
了解ssr原理后,来开始step by step搭建一个自己的ssr应用程序
全局安装vue-cli脚手架
npm install @vue/cli -g --registry=https://registry.npm.taobao.org
vue create ssr-example
会进入到一个交互bash界面,按自己需要选择
一步一步回车,根据自己需要选择
npm run serve
看到这个提示,说明成功了一半了,接下来进行后一半的改造。
npm install vue-server-renderer lodash.merge webpack-node-externals cross-env --registry=https://registry.npm.taobao.org --save-dev
npm install koa koa-static --save --registry=https://registry.npm.taobao.org
// server.js // 第 1 步:创建一个 vue 实例 const vue = require("vue"); const koa = require("koa"); const app = new koa(); // 第 2 步:创建一个 renderer const renderer = require("vue-server-renderer").createrenderer(); // 第 3 步:添加一个中间件来处理所有请求 app.use(async (ctx, next) => { const vm = new vue({ data: { title: "ssr example", url: ctx.url }, template: `<div>访问的 url 是: {{ url }}</div>` }); // 将 vue 实例渲染为 html renderer.rendertostring(vm, (err, html) => { if(err){ res.status(500).end('internal server error') return } ctx.body = html }); }); const port = 3000; app.listen(port, function() { console.log(`server started at localhost:${port}`); });
node server.js
看到这个说明一个简单的ssr构建成功了。
不过到目前为止,我们并没有将客户端的.vue文件通过服务端进行渲染,那么如何将前端的.vue文件与后端node进行结合呢?
main.js 是我们应用程序的「通用 entry」。在纯客户端应用程序中,我们将在此文件中创建根 vue 实例,并直接挂载到 dom。但是,对于服务器端渲染(ssr),责任转移到纯客户端 entry 文件。app.js 简单地使用 export 导出一个 createapp 函数:
// main.js import vue from 'vue' import app from './app.vue' import { createrouter } from "./router"; // 导出一个工厂函数,用于创建新的 // 应用程序、router 和 store 实例 export function createapp () { const router = createrouter(); const app = new vue({ router, // 根实例简单的渲染应用程序组件。 render: h => h(app) }) return { app } }
客户端 entry 只需创建应用程序,并且将其挂载到 dom 中
import { createapp } from './main' // 客户端特定引导逻辑…… const { app } = createapp() // 这里假定 app.vue 模板中根元素具有 `id="app"` app.$mount('#app')
服务器 entry 使用 default export 导出函数,并在每次渲染中重复调用此函数。
import { createapp } from "./main"; export default context => { // 因为有可能会是异步路由钩子函数或组件,所以我们将返回一个 promise, // 以便服务器能够等待所有的内容在渲染前, // 就已经准备就绪。 return new promise((resolve, reject) => { const { app, router, store } = createapp(); // 设置服务器端 router 的位置 router.push(context.url); // 等到 router 将可能的异步组件和钩子函数解析完 router.onready(() => { const matchedcomponents = router.getmatchedcomponents(); // 匹配不到的路由,执行 reject 函数,并返回 404 if (!matchedcomponents.length) { return reject({ code: 404 }); } // promise 应该 resolve 应用程序实例,以便它可以渲染 resolve(app); }, reject); }); };
import vue from 'vue' import router from 'vue-router' import home from './views/home.vue' vue.use(router) export function createrouter(){ return new router({ mode: 'history', //一定要是history模式 routes: [ { path: '/', name: 'home', component: home }, { path: '/about', name: 'about', component: () => import(/* webpackchunkname: "about" */ './views/about.vue') } ] }) }
在vue-cli3创建的vue项目,已经没有了之前的webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js。那么如何进行webpack的配置呢?
在vue-cli官网上也说明了如何使用。 调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configurewebpack 选项提供一个对象,该对象将会被 webpack-merge 合并入最终的 webpack 配置。
// vue.config.js const vuessrserverplugin = require("vue-server-renderer/server-plugin"); const vuessrclientplugin = require("vue-server-renderer/client-plugin"); const nodeexternals = require("webpack-node-externals"); const merge = require("lodash.merge"); const target_node = process.env.webpack_target === "node"; const target = target_node ? "server" : "client"; module.exports = { configurewebpack: () => ({ // 将 entry 指向应用程序的 server / client 文件 entry: `./src/entry-${target}.js`, // 对 bundle renderer 提供 source map 支持 devtool: 'source-map', target: target_node ? "node" : "web", node: target_node ? undefined : false, output: { librarytarget: target_node ? "commonjs2" : undefined }, // https://webpack.js.org/configuration/externals/#function // https://github.com/liady/webpack-node-externals // 外置化应用程序依赖模块。可以使服务器构建速度更快, // 并生成较小的 bundle 文件。 externals: nodeexternals({ // 不要外置化 webpack 需要处理的依赖模块。 // 你可以在这里添加更多的文件类型。例如,未处理 *.vue 原始文件, // 你还应该将修改 `global`(例如 polyfill)的依赖模块列入白名单 whitelist: [/\.css$/] }), optimization: { splitchunks: { chunks: "async", minsize: 30000, minchunks: 2, maxasyncrequests: 5, maxinitialrequests: 3 } }, plugins: [target_node ? new vuessrserverplugin() : new vuessrclientplugin()] }), chainwebpack: config => { config.module .rule("vue") .use("vue-loader") .tap(options => { merge(options, { optimizessr: false }); }); } };
"build:client": "vue-cli-service build", "build:server": "cross-env webpack_target=node vue-cli-service build", "build:win": "npm run build:server && move dist\\vue-ssr-server-bundle.json bundle && npm run build:client && move bundle dist\\vue-ssr-server-bundle.json",
npm run build:win
在dist目录下会生成两个json文件
const fs = require("fs"); const koa = require("koa"); const path = require("path"); const koastatic = require('koa-static') const app = new koa(); const resolve = file => path.resolve(__dirname, file); // 开放dist目录 app.use(koastatic(resolve('./dist'))) // 第 2 步:获得一个createbundlerenderer const { createbundlerenderer } = require("vue-server-renderer"); const bundle = require("./dist/vue-ssr-server-bundle.json"); const clientmanifest = require("./dist/vue-ssr-client-manifest.json"); const renderer = createbundlerenderer(bundle, { runinnewcontext: false, template: fs.readfilesync(resolve("./src/index.temp.html"), "utf-8"), clientmanifest: clientmanifest }); function rendertostring(context) { return new promise((resolve, reject) => { renderer.rendertostring(context, (err, html) => { err ? reject(err) : resolve(html); }); }); } // 第 3 步:添加一个中间件来处理所有请求 app.use(async (ctx, next) => { const context = { title: "ssr test", url: ctx.url }; // 将 context 数据渲染为 html const html = await rendertostring(context); ctx.body = html; }); const port = 3000; app.listen(port, function() { console.log(`server started at localhost:${port}`); });
node server.js
访问 localhost:3000,可以看到页面的数据都是又服务端渲染完成后返回的。到这一步已经基本算完成了ssr的构建了。
如果有问题的话,可以把dist目录下的文件删了。避免直接访问到了该html文件。
import vue from 'vue' import vuex from 'vuex' vue.use(vuex) export function createstore() { return new vuex.store({ state: { }, mutations: { }, actions: { } }); }
import vue from "vue"; import app from "./app.vue"; import { createrouter } from "@/router"; import { createstore } from "@/store"; export function createapp() { const router = createrouter(); const store = createstore() // + const app = new vue({ router, store, // + render: h => h(app) }); return { app, router }; }
npm run build:win node server.js
附上案例源码 欢迎star
到目前为止,仅仅是完成了ssr的基础部分,还有相关的 ssr热更新之类的问题还需要继续探索。如果有好的热更新方法欢迎发出了参考参考。
如对本文有疑问, 点击进行留言回复!!
2016年信息安全工程师综合知识第11-15题解析【建群网培信息安全工程师】
网友评论