关于vue.js:vue-ssr同构

后面记录了下next 如何做服务端渲染,最近看了看vue官网得ssr阐明,而后不基于next,本人来做一个vue得ssr服务端渲染.

官网文档：https://ssr.vuejs.org/

官网文档的解释：Vue.js 是构建客户端应用程序的框架。默认状况下，能够在浏览器中输入 Vue组件，进行生成 DOM 和操作 DOM。然而，也能够将同一个组件渲染为服务器端的 HTML 字符串，将它们间接发送到浏览器，最初将这些动态标记"激活"为客户端上齐全可交互的应用程序。

服务器渲染的 Vue.js 应用程序也能够被认为是"同构"或"通用"，因为应用程序的大部分代码都能够在服务器和客户端上运行。

还是老样子,咱们在用ssr服务端渲染之前须要先问本人是否真的须要它.

技术层面：

• 更快的首屏渲染速度
• 更好的 SEO

业务层面：

• 不适宜管理系统
• 适宜门户资讯类网站，例如企业官网、知乎、简书等
• 适宜挪动网站

vue的ssr 次要分为两种

1. Nuxt.js 开发框架

   1. NUXT提供了平滑的开箱即用的体验，它建设在等同的Vue技术栈之上，但形象出很多模板，并提供了一些额定的性能，例如动态站点生成。通过 Nuxt.js 能够疾速的应用 Vue SSR 构建同构利用。

2. 基于 Vue SSR 官网文档提供的解决方案

   1. 官网计划具备更间接的控制应用程序的构造，更深刻底层，更加灵便，同时在应用官网计划的过程中，也会对Vue SSR有更加深刻的理解。
   2. 该形式须要你相熟 Vue.js 自身，并且具备 Node.js 和 webpack 的相当不错的利用教训。

next的文档写的很棒了,根本跟着它的文档做就能够了，这里次要是参考vue ssr的文档,来实现一下.
首先来个最简略的，把一个vue的实例转换成模板字符串，而后从服务器返回到客户端.

npm install vue vue-server-renderer --save

const Vue = require('vue');const server = require('express')(); //创立服务//抉择模板const template = require('fs').readFileSync('./index.template.html', 'utf-8');//创立渲染器const renderer = require('vue-server-renderer').createRenderer({  template,});//模板应用的数据上下文const context = {    title: 'vue ssr',    metas: `        <meta name="keyword" content="vue,ssr">        <meta name="description" content="vue srr demo">    `,};//匹配所有地址，返回html界面server.get('*', (req, res) => {  const app = new Vue({ //创立vue实例,每次申请都是一个新的实例,避免实例共享,数据错乱    data: {      url: req.url    },    template: `<div>拜访的 URL 是： {{ url }}</div>`,  });   //把vue实例和上下文数据和模板联合返回字符串给客户端浏览器  renderer  .renderToString(app, context, (err, html) => {    console.log(html);    if (err) {      res.status(500).end('Internal Server Error')      return;    }    res.end(html);  });})//监听端口server.listen(8080);

模板留神点：留神 <!--vue-ssr-outlet--> 正文 -- 这里将是应用程序 HTML 标记注入的中央。

这是官网的例子：https://ssr.vuejs.org/zh/guide/

这会是一个最简略的demo,开发阶段热加载，路由定位，数据预取等都没有,上面就咱们来进一步实现它。

首先咱们来看一张图,来看它的构建流程:

首先来看，咱们必定是须要应用webpack来打包咱们的vue程序的,因为：

• 通常 Vue 应用程序是由 webpack 和vue-loader构建，并且许多 webpack 特定性能不能间接在Node.js 中运行（例如通过file-loader导入文件，通过css-loader导入 CSS）。
• 只管 Node.js 最新版本可能齐全反对 ES2015 个性，咱们还是须要转译客户端代码以适应老版浏览器。这也会波及到构建步骤。

所以是这样,首先咱们把所有的源代码例如(store,router,components),通过公共entry app.js和服务端的入口和客户端入口进行webpack打包,对应客户端应用程序和服务端应用程序打进去：服务器须要的bundle 也就是serve bundle，用于服务器渲染ssr, 而打进去的客户端bundle 也就是client bundle, 这个js会写入到html模板中,用于客户端激活,接管服务端发送的动态html,使其变为由vue治理的动静dom.

客户端激活的一些注意事项：

因为服务器曾经渲染好了 HTML，咱们显然无需将其抛弃再从新创立所有的 DOM 元素。相同，咱们须要"激活"这些动态的 HTML，而后使他们成为动静的（可能响应后续的数据变动）。

如果你查看服务器渲染的输入后果，你会留神到应用程序的根元素上增加了一个非凡的属性：

<div id="app" data-server-rendered="true">

data-server-rendered 非凡属性，让客户端 Vue 晓得这部分 HTML 是由 Vue 在服务端渲染的，并且应该以激活模式进行挂载。留神，这里并没有增加 id="app"，而是增加 data-server-rendered 属性：你须要自行添加 ID 或其余可能选取到应用程序根元素的选择器，否则应用程序将无奈失常激活。

在开发模式下，Vue 将推断客户端生成的虚构 DOM 树 (virtual DOM tree)，是否与从服务器渲染的 DOM 构造 (DOM structure) 匹配。如果无奈匹配，它将退出混合模式，抛弃现有的 DOM 并从头开始渲染。在生产模式下，此检测会被跳过，以防止性能损耗。

客户端渲染注意事项：https://ssr.vuejs.org/zh/guid...

一个根本的我的项目应该是这样：

• setup-dev-server: 开发模式下，用来监督打包构建，从新生成renderer渲染器
• webpack.base.config 公共的webpack配置
• webpack.client.config 客户端webpack配置
• webpack.server.config 服务端webpack配置
• pages,router,store 是vue 相干文件
• index.template.html 模板html文件
• app.js咱们应用程序的「通用 entry」,在纯客户端应用程序中，咱们将在此文件中创立根 Vue 实例，并间接挂载到 DOM。然而，对于服务器端渲染(SSR)，责任转移到纯客户端 entry 文件。
• entry-server.js 服务器 entry 应用 default export 导出函数,并在每次渲染中反复调用此函数。此时，除了创立和返回应用程序实例之外，它不会做太多事件 - 然而稍后咱们将在此执行服务器端路由匹配 (server-sideroute matching) 和数据预取逻辑 (data pre-fetching logic)。
• entry-client.js 客户端 entry 只需创立应用程序，并且将其挂载到 DOM 中
• server.js 咱们node服务的启动文件

而后上面就是一步一步来实现在这些性能.
筹备工作装置依赖：
生产：

开发：

而后一步一步来，首先是咱们的 webpack配置，先是公共的webpack.base.config.js