34

继前段时间西安电面之后顺利拿到了OFFER,今天(5月2号)是我入职第一天,在简短的内部培训了一上午后,前端leader让我先了解下什么是vue的服务器端渲染(SSR)

图片描述

SSR,英文全称叫 Server side rendering ,国人叫它服务器端渲染。

首先听到这个名词,我头脑就有点眩晕。咱们还是先去官网了解下SSR的定义:

Vue.js 可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序。这种在服务器和客户端都可以运行的代码程序,也可以叫做“同构”。

我弱弱地问了leader一句,咱们公司为什么要使用服务端渲染

leader回复我,有两点原因,第一点,因为我们公司的站点很注重SEO,页面又是异步获取内容;第二点,同时也希望用户更快速地看到完整渲染的页面,从而提高用户体验。基于这两点,所以需要服务器端渲染(SSR)来解决这些问题。
那服务端渲染的流程究竟是怎样的呢?话不多说,先上图:

图片描述

在使用服务端渲染的时候,首先要有个server端。因为在开发vue项目时,需要起一个webpack-dev-server的服务,端口8000。因为我们要使用它的热更替,这样能加快开发效率。

由于webpack是一个自主的server,我们没有办法在里面添加服务端渲染的代码,而这段代码是需要自己去写的,所以需要再起一个node server,去执行服务端渲染的逻辑。我们会用到vue-server-renderer这个包来帮我们在node.js环境里面去渲染出vue代码生成的HTML代码,这部分代码是直接返回给用户的,用户可以在浏览器里直接看到HTML的内容。

以图为例,我们看到两个渲染的过程,两种server。如果直接访问webpack-dev-server,就跟我们之前开发的过程一样,它是一个纯前端渲染的过程。如果我们要走服务端渲染的流程,就要走node server服务,端口3333以示区别。而且需要打包一个逻辑到node端运行,通过webpack-server-compiler去生成一个server bundle,也就是服务端的app.js。 当node server 获取到server bundle之后,就可以执行vue-server-renderer,去渲染出HTML的代码,直接返回给用户,这样的话就不需要通过js再去渲染出页面内容,减少了用户的等待时间。

今天这篇文章的主要任务是,先用webpack创建一个配置文件来打包server端的代码。

入门第一步,如何编写服务器端渲染的配置文件?

首先我们需要在项目根目录里面找到build文件夹,然后在其下面新建一个webpack.config.server.js文件,具体配置代码,我先撸为敬:

const path = require('path')
const ExtractPlugin = require('extract-text-webpack-plugin')
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.config.base')
const VueServerPlugin = require('vue-server-renderer/server-plugin')

let config

config = merge(baseConfig, {
  target: 'node',
  entry: path.join(__dirname, '../client/server-entry.js'),
  devtool: 'source-map',
  output: {
    libraryTarget: 'commonjs2',
    filename: 'server-entry.js',
    path: path.join(__dirname, '../server-build')
  },
  externals: Object.keys(require('../package.json').dependencies),
  module: {
    rules: [
      {
        test: /\.styl/,
        use: ExtractPlugin.extract({
          fallback: 'vue-style-loader',
          use: [
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true
              }
            },
            'stylus-loader'
          ]
        })
      }
    ]
  },
  plugins: [
    new ExtractPlugin('styles.[contentHash:8].css'),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      'process.env.VUE_ENV': '"server"'
    }),
    new VueServerPlugin()
  ]
})

module.exports = config

刚接触SSR的童鞋,看完以上代码是不是感觉有点晕?别着急,我来带大家一一分析下。

target: 'node',

target需要指定为node,因为打包出来的程序是在node端运行的,不是在浏览器端运行,所以要指定打包的目标是node环境。

entry: path.join(__dirname, '../client/server-entry.js'),

entry需要提供一个单独的入口文件,所以需要在client文件夹下新建一个server-entry.js文件。

devtool: 'source-map',

devtool需要指定source-map,因为vue-server-renderer有个webpack插件,它能提供代码调试的功能,不过只能提示到出错的文件出在哪一行。

libraryTarget: 'commonjs2',

指定libraryTarget的类型为commonjs2,用来指定代码export出去的入口的形式。在node.js中模块是module.exports = {...},commonjs2打包出来的代码出口形式就类似于此。

externals: Object.keys(require('../package.json').dependencies),

externals是外部因素的意思,首先我们可以打开package.json文件看看dependencies

图片描述

我们用Object.keys()得到的就是一个数组。externals就是告诉webpack不要去打包node_modules里面的js代码。devDependencies里面是一些工具型的东西,在应用真正跑起来的时候是不需要的。只有在执行一些打包,工具化操作的时候才会需要它。

'process.env.VUE_ENV': '"server"'

这是vue服务端官方建议我们这么去做的,在vue-server-renderer里面可能会用到这个属性。

const VueServerPlugin = require('vue-server-renderer/server-plugin')

这个插件能帮我们单独地生成一个json文件,用于在vue的服务端渲染里面能帮助我们处理一些很复杂的逻辑。

最后

文章写到这儿,Vue的服务端渲染的入门工作就算完成了(先用webpack创建一个配置文件来打包server端的代码),下一篇文章将介绍如何使用koa这个node服务端框架去实现node server,最新文章都会第一时间更新在我的公众号<闰土大叔>里面,欢迎关注。

图片描述

你可能感兴趣的

12 条评论
码农土哥 作者 · 2018年05月05日

深夜写文不易,觉得好的话,帮我点个赞吧~

+2 回复

0

闰土换工作到西安了?

若川 · 2018年05月05日
0

@轩辕Rowboat 没有,太原有新成立的研发中心

码农土哥 作者 · 2018年05月05日
0

@闰土大叔 原来如此~都用上ssr了,不错~

若川 · 2018年05月05日
transtone · 2018年05月08日

“第一点,因为我们公司的站点很注重SEO,页面又是异步获取内容;第二点,同时也希望用户更快速地看到完整渲染的页面,从而提高用户体验。” 这两点都不能算SSR的理由。

【服务器端渲染 vs 预渲染(SSR vs Prerendering)
如果你调研服务器端渲染(SSR)只是用来改善少数营销页面(例如 /, /about, /contact 等)的 SEO,那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML,而是使用预渲染方式,在构建时(build time)简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单,并可以将你的前端作为一个完全静态的站点。

如果你使用 webpack,你可以使用 prerender-spa-plugin 轻松地添加预渲染。它已经被 Vue 应用程序广泛测试 - 事实上,作者是 Vue 核心团队的成员。】
https://ssr.vuejs.org/zh/

+2 回复

flashdoggy · 2018年05月07日

。。。。你不要强调那个冷冷地回复会好一些。
我都希望公司可以有入职的技术培训。

+1 回复

0

好的,你的建议已收到。

码农土哥 作者 · 2018年05月07日
0

已修正。

码农土哥 作者 · 2018年05月07日
0

@闰土大叔 哈哈哈哈哈!!
你这个态度也太端正了点。
我略带打趣这么说的。
毕竟不是所有公司,或者说大部分公司都不会说刚进公司就开始对技术进行培训的。
都会先上来直接业务三连打得你脑仁都疼😷😷😷

flashdoggy · 2018年05月07日
leekafai · 2018年05月05日

vue-server-render会启用缓存吗?

回复

i牛牛丶 · 1月18日

准备接触vue,弱弱的问一下,如果后台自己新建活动页面(类似于易企秀),然后部署到CDN上,大佬有什么好的建议么?

回复

0

看下这个 www.h5ds.com

馒头 · 3月21日
载入中...