01服务端渲染简介
服务端渲染不是一个新的技术;在 Web 最初的时候,页面就是通过服务端渲染来返回的,用 PHP 来说,通常是使用 Smarty 等模板写模板文件,然后 PHP 服务端框架将数据和模板渲染为页面返回,这样的服务端渲染有个缺点就是一旦要查看新的页面,就需要请求服务端,刷新页面。
但如今的前端,为了追求一些体验上的优化,通常整个渲染在浏览器端使用 JS 来完成,配合 history.pushState 等方式来做单页应用(SPA: Single-Page Application),也收到不错的效果,但是这样还是有一些缺点:第一次加载过慢,用户需要等待较长时间来等待浏览器端渲染完成;对搜索引擎爬虫等不友好。这时候就出现了类似于 React,Vue 2.0 等前端框架来做服务端渲染。
使用这些框架来做服务端渲染的兼顾了上面的几个优点,而且写一份代码就可以跑在服务端和浏览器端。Vue 2.0 发布了也有一段时间了,新版本比较大的更新就是支持服务端渲染,最近有空折腾了下 Vue 的服务端渲染,记录下来。
02在 Vue 2.0 中使用服务端渲染
官方文档给了一个简单的例子来做服务端渲染:
// 步骤 1:创建一个Vue实例var Vue = require('vue')var app = new Vue({ render: function (h) { return h('p', 'hello world') }})// 步骤 2: 创建一个渲染器var renderer = require('vue-server-renderer').createRenderer()// 步骤 3: 将 Vue实例 渲染成 HTMLrenderer.renderToString(app, function (error, html) { if (error) throw error console.log(html) // => <p server-rendered="true">hello world</p>})
这样子,配合通常的 Node 服务端框架就可以简单来实现服务端渲染了,可是,在真实场景中,我们一般采用 .vue 文件的模块组织方式,这样的话,服务端渲染就需要使用 webpack 来将 Vue 组件进行打包为单个文件。
03配合 Webpack 渲染 .vue 文件
先建立一个服务端的入口文件 server.js
importVue from'vue';importApp from'./vue/App';export default function (options) { const VueApp = Vue.extend(App); const app = new VueApp(Object.assign({}, options)); returnnew Promise(resolve => { resolve(app); });}
这里和浏览器端的入口文件大同小异,只是默认导出了一个函数,这个函数接收一个服务端渲染时服务端传入的一些配置,返回一个包含了 app 实例的 Promise;
简单写一个 App.vue 的文件
<template> <h1>{{ title }}</h1></template><>module.exports = { props: ['title']</>
这里将会读取服务端入口文件传入 options 的 data 属性,取到 title 值,渲染到对应 DOM 中;
再看看 Webpack 的配置,和客户端渲染同样是大同小异:
const webpack = require('webpack');const path = require('path');const projectRoot = __dirname;const env = process.env.NODE_ENV || 'development';module.exports = { target: 'node', // 告诉 Webpack 是 node 代码的打包 devtool: null, // 既然是 node 就不用 devtool 了 entry: { app: path.join(projectRoot, 'src/server.js') }, output: Object.assign({}, base.output, { path: path.join(projectRoot, 'src'), filename: 'bundle.server.js', libraryTarget: 'commonjs2'// 和客户端不同 }), plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(env), 'process.env.VUE_ENV': '"server"'// 配置 vue 的环境变量,告诉 vue 是服务端渲染,就不会做耗性能的 dom-diff 操作了 }) ], resolve: { extensions: ['', '.js', '.vue'], fallback: [path.join(projectRoot, 'node_modules')] }, resolveLoader: { root: path.join(projectRoot, 'node_modules') }, module: { loaders: [ { test: /.vue$/, loader: 'vue'}, { test: /.js$/, loader: 'babel', include: projectRoot, exclude: /node_modules/ } ] }};
其中主要就是三处不同:声明 node 模块打包;修改打包后模块加载方式为 commonjs(commonjs2 具体可以看 Webpack 官方文档);再就是 vue 的服务端打包优化了,这部分如果不传的话后面 vue 服务端渲染会慢至几十秒,一度以为服务端代码挂了。
最后就是服务端载入生成的 bundle.server.js 文件:
const fs = require('fs');const path = require('path');const vueServerRenderer = require('vue-server-renderer');const filePath = path.join(__dirname, 'src/bundle.server.js');// 读取 bundle 文件,并创建渲染器const code = fs.readFileSync(filePath, 'utf8');const bundleRenderer = vueServerRenderer.createBundleRenderer(code);// 渲染 Vue 应用为一个字符串bundleRenderer.renderToString(options, (err, html) => { if(err) { console.error(err); } content.replace('<div id="app"></div>', html);});
这里 options 可以传入 vue 组件所需要的 data 等信息;下面还是以官方实例中的 express 来做服务端示例下:
const fs = require('fs');const path = require('path');const vueServerRenderer = require('vue-server-renderer');const filePath = path.join(think.ROOT_PATH, 'view/bundle.server.js');global.Vue = require('vue')// 读取 bundle 文件,并创建渲染器const code = fs.readFileSync(filePath, 'utf8');const bundleRenderer = vueServerRenderer.createBundleRenderer(code);// 创建一个Express服务器var express = require('express');var server = express();// 部署静态文件夹为 "assets"文件夹server.use('/assets', express.static( path.resolve(__dirname, 'assets');));// 处理所有的 Get 请求server.get('*', function (request, response) { // 设置一些数据,可以是数据库读取等等 const options = { data: { title: 'hello world'} }; // 渲染 Vue 应用为一个字符串 bundleRenderer.renderToString(options, (err, html) => { // 如果渲染时发生了错误 if(err) { // 打印错误到控制台 console.error(err); // 告诉客户端错误 returnresponse.status(500).send('Server Error'); } // 发送布局和HTML文件 response.send(layout.replace('<div id="app"></div>', html)); });// 监听5000端口server.listen(5000, function (error) { if(error) throw error console.log('Server is running at localhost:5000')});
这样子基本就是 Vue 服务端渲染的整个流程了,这样子和使用普通的模板渲染并没有什么其他的优势,可是当渲染完成后再由客户端接管渲染后就可以做到无缝切换了,下面我们来看看和客户端结合渲染;
04和浏览器渲染无缝集合
为了和客户端渲染结合,我们将 webpack 配置文件分为三部分,base 共用的配置,server 配置,client 浏览器端配置,如下:
webpack.base.js
const path = require('path');const projectRoot = path.resolve(__dirname, '../');module.exports = { devtool: '#source-map', entry: { app: path.join(projectRoot, 'src/client.js') }, output: { path: path.join(projectRoot, 'www/static'), filename: 'index.js'}, resolve: { extensions: ['', '.js', '.vue'], fallback: [path.join(projectRoot, 'node_modules')], alias: { 'Common': path.join(projectRoot, 'src/vue/Common'), 'Components': path.join(projectRoot, 'src/vue/Components') } }, resolveLoader: { root: path.join(projectRoot, 'node_modules') }, module: { loaders: [ { test: /.vue$/, loader: 'vue'}, { test: /.js$/, loader: 'babel', include: projectRoot, exclude: /node_modules/ } ] }};
webpack.server.js
const webpack = require('webpack');const base = require('./webpack.base');const path = require('path');const projectRoot = path.resolve(__dirname, '../');const env = process.env.NODE_ENV || 'development';module.exports = Object.assign({}, base, { target: 'node', devtool: null, entry: { app: path.join(projectRoot, 'view/server.js') }, output: Object.assign({}, base.output, { path: path.join(projectRoot, 'view'), filename: 'bundle.server.js', libraryTarget: 'commonjs2'}), plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(env), 'process.env.VUE_ENV': '"server"', 'isBrowser': false }) ]});
服务端的配置,和之前多了一个 isBrowser 的全局变量,用于在 Vue 模块中做一些差异处理;
webpack.client.js
const webpack = require('webpack');const ExtractTextPlugin = require('extract-text-webpack-plugin');const base = require('./webpack.base');const env = process.env.NODE_ENV || 'development';const config = Object.assign({}, base, { plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(env), 'isBrowser': true }) ]});config.vue = { loaders: { css: ExtractTextPlugin.extract({ loader: 'css-loader', fallbackLoader: 'vue-style-loader'}), sass: ExtractTextPlugin.extract('vue-style-loader', 'css!sass?indentedSyntax'), scss: ExtractTextPlugin.extract('vue-style-loader', 'css!sass') }};config.plugins.push(new ExtractTextPlugin('style.css'));if(env === 'production') { config.plugins.push( new webpack.LoaderOptionsPlugin({ minimize: true }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) );}module.exports = config;
服务端打包时候会忽略 css 等样式文件,浏览器端打包时候就将样式文件单独打包到一个 css 文件。这样在执行 webpack 时候就需要指定 --config 参数来编译不同的版本了,如下:
# 编译 客户端webpack --config webpack.client.js# 编译 服务器端webpack --config webpack.server.js
同样,入口文件也提出三个文件,index.js, server.js, client.js
index.js
importVue from'vue';importApp from'./vue/App';importClipButton from'Components/ClipButton';importToast from'Components/Toast';Vue.filter('byte-format', value => { const unit = ['Byte', 'KB', 'MB', 'GB', 'TB']; let index = 0; let size = parseInt(value, 10); while(size >= 1024&& index < unit.length) { size /= 1024; index++; } return[size.toString().substr(0, 5), unit[index]].join(' ');});Vue.use(Toast);Vue.component('maple-clip-button', ClipButton);const createApp = function createApp(options) { const VueApp = Vue.extend(App); returnnew VueApp(Object.assign({}, options));};export {Vue, createApp};
index.js 中做一些通用的组件、插件加载,一些全局的设置,最后返回一个可以生成 app 实例的函数供不同环境来调用;
server.js
import{createApp} from'./index';export default function (options) { const app = createApp(options); returnnew Promise(resolve => { resolve(app); });}
大部分逻辑已经抽为共用了,所以服务端这里就是简单将 app 实例通过 promise 返回;
client.js
importVueResource from'vue-resource';import{createApp, Vue} from'./index';Vue.use(VueResource);const title = 'Test';const app = createApp({ data: { title }, el: '#app'});export default app;
客户端也类似,这里在客户端加载 VueResource 这个插件,用于客户端的 ajax 请求;通常通过 ajax 请求服务端返回数据再初始化 app,这样基本就是一个单页的服务端渲染框架了,一般情况下,我们做单页应用还会配合 history.pushState 等通过 URL 做路由分发;这样,我们服务端也最好使用同一套路由来渲染不同的页面。
05服务端和浏览器路由共用
路由这里使用 vue-router 就可以了,浏览器端还是通过正常的方式载入路由配置,服务端同样载入路由配置,并在渲染之前使用 router.push 渲染需要展现的页面,所以,在通用的入口文件加入路由配置:
importVue from'vue';importrouter from'./router';importApp from'./vue/App';const createApp = function createApp(options) { const VueApp = Vue.extend(App); returnnew VueApp(Object.assign({ router }, options));};export {Vue, router, createApp};
路由文件是这样子的:
importVue from'vue';importVueRouter from'vue-router';importViewUpload from'../vue/ViewUpload';importViewHistory from'../vue/ViewHistory';importViewLibs from'../vue/ViewLibs';Vue.use(VueRouter);const routes = [ { path: '/', component: ViewUpload }, { path: '/history', component: ViewHistory }, { path: '/libs', component: ViewLibs }];const router = new VueRouter({mode: 'history', routes, base: __dirname});export default router;
这里路由的使用 HTML5 的 history 模式;
服务端入口文件这样配置:
import{createApp, router} from'./index';export default function (options) { const app = createApp({ data: options.data }); router.push(options.url); returnnew Promise(resolve => { resolve(app); });}
这里在初始化 app 实例后,调用 router.push(options.url) 将服务端取到的 url push 到路由之中;
06使用中遇到的坑
整个过程还算顺利,其中遇到最多的问题就是有些模块只能在服务端或者浏览器来使用,而使用 ES6 模块加载是静态的,所以需要将静态加载的模块改为动态加载,所以就有了上面配置 isBrowser 这个全局属性,通过这个属性来判断模块加载了,比如我项目中用到的 clipboard 模块,之前是直接使用 ES6 加载的;
<template> <a @click.prevent :href="text"><slot></slot></a></template><>import Clipboard from 'clipboard';export default { props: ['text'], mounted() { return this.$nextTick(() => { this.clipboard = new Clipboard(this.$el, { text: () => { return this.text; } }); this.clipboard.on('success', () => { this.$emit('copied', this.text); }); }); }};</>
这样就会在服务端渲染时候报错,将加载改为动态加载就可以了:
let Clipboard = null;if(isBrowser) { Clipboard = require('clipboard');}
如果这个模块在服务端并不会渲染,那后面的代码并不需要更改;
还有 VueResource 插件也是需要浏览器环境的,所以需要将它单独配置在 client.js 中;
07总结
同样的路由通过 Vue 服务端渲染后的 HTML 总是一样的,这和 React 渲染后会加上哈希不同,所以可以做渲染后结果的缓存优化,这部分可以参考官方文档的做法,总的来说,Vue 服务端渲染沿袭了 Vue 客户端的轻量做法,也显得比较轻量,唯一不足之处可能就是服务端也同样需要 webpack 来完成。
? ? ? ? ? ? ? ?
原文:
https://blog.alphatr.com/how-to-use-ssr-in-vue-2.0.html
点击“阅读原文”,看更多
精选文章
↓↓↓
2、本站永久网址:https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
源码村资源网 » smarty模板php代码(php模板源码)
1 评论