关于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