王尘宇

做者:Charon

出处:https://segmentfault.com/a/1190000038872454

简介：跟着前端手艺栈和东西链的迭代成熟，前端工程化、模块化也已成为了当下的支流手艺计划，在那波前端手艺海潮中，涌现了诸如 React、Vue、Angular 等基于客户端衬着的前端框架，那类框架所构建的单页应用（SPA）具有用户体验好、衬着性能好、可维护性高档长处。但也也有一些很大的缺陷，此中次要涉及到以下两点：

首屏加载时间过长与传统办事端衬着间接获取办事端衬着好的 HTML 差别，单页应用利用 JavaScript 在客户端生成 HTML来呈现内容，用户需要期待客户端 JS 解析施行完成才气看到页面，那就使得首屏加载时间变长，从而影响用户体验。倒霉于 SEO当搜刮引擎爬取网站 HTML 文件时，单页应用的 HTML 没有内容，因为他它需要通过客户端 JavaScript解析施行才气生成网页内容，而目前的支流的搜刮引擎关于那一部门内容的抓取还不是很好。为领会决那两个缺陷，业界借鉴了传统的办事端曲出 HTML 计划，提出在办事器端施行前端框架（React/Vue/Angular）代码生成网页内容，然后将衬着好的网页内容返回给客户端，客户端只需要负责展现就能够了；

本来得spa应用是如许

但是那种形式下，也会存在一些明显的不敷，此中最次要的就是：

首屏衬着慢：因为 HTML 中没有内容，必需比及 JavaScript 加载并施行完成才气呈现页面内容。SEO 问题：同样因为 HTML 中没有内容，所以关于目前的搜刮引擎爬虫来说，页面中没有任何有用的信息，天然无法提取关键词，停止索引了。

我们说的同构衬着（现代化的办事端衬着）是如许:

当然不单单如斯，为了获得更好的用户体验，同时会在客户端未来自办事端衬着的内容激活为一个 SPA应用，也就是说之后的页面内容交互都是通过客户端衬着处置。

那种体例简而言之就是：

通过办事端衬着首屏曲出，处理首屏衬着慢以及倒霉于 SEO 问题通过客户端衬着接收页面内容交互得到更好的用户体验

那种体例我们凡是称之为现代化的办事端衬着，也叫同构衬着，所谓的同构指的就是办事端构建衬着 +客户端构建衬着。同理，那种体例构建的应用称之为办事端衬着应用或者是同构应用

那个流程次要就是：

客户端倡议恳求办事端衬着首屏内容 + 生成客户端 SPA 相关资本办事端将生成的首屏资本发送给客户端客户端间接展现办事端衬着好的首屏内容首屏中的 SPA 相关资本施行之后会激活客户端 Vue之后客户端所有的交互都由客户端 SPA 处置阐发优缺点：长处：首屏衬着速度快、有利于 SEO缺点：开发前提所限。阅读器特定的代码，只能在某些生命周期钩子函数 (lifecycle hook) 中利用；一些外部扩展库 (external library) 可能需要特殊处置，才气在办事器衬着应用法式中运行。涉及构建立置和摆设的更多要求。与能够摆设在任何静态文件办事器上的完全静态单页面应用法式(SPA) 差别，办事器衬着应用法式，需要处于 Node.js server 运行情况。更多的办事器端负载。在 Node.js 中衬着完好的应用法式，显然会比仅仅供给静态文件的 server愈加大量占用 CPU 资本 (CPU-intensive - CPU 密集)，因而若是你意料在高流量情况 (high traffic)下利用，请筹办响应的办事器负载，并明智地接纳缓存战略。

在对你的应用法式利用办事器端衬着 (SSR) 之前，你应该问的第一个问题是，能否实的需要它。那次要取决于内容抵达时间 (time-to-content) 对应用法式的重要水平。例如，若是你正在构建一个内部仪表盘，初始加载时的额外几百毫秒其实不重要，那种情况下去利用办事器端衬着 (SSR) 将是一个借题发挥之举。然而，内容抵达时间 (time-to-content) 要求是绝对关键的目标，在那种情况下，办事器端衬着(SSR) 能够帮忙你实现更佳的初始加载性能。

事实上，良多网站是出于效益的考虑才启用办事端衬着，性能却是在其次。假设 A 网站页面中有一个关键字叫前端性能优化，那个关键字是 JS 代码跑过一遍后添加到 HTML 页面中的。那么客户端衬着形式下，我们在搜刮引擎搜刮那个关键字，是找不到 A 网站的——搜刮引擎只会查找现成的内容，不会帮你跑 JS 代码。A 网站的运营方见此情形，感应很头大：搜刮引擎搜不出来，用户找不到我们，谁还会用我的网站呢？为了把现成的内容拿给搜刮引擎看，A 网站不能不启用办事端衬着。但性能在其次，不代表性能不重要。

至于本来客户端spa应用得衬着和办事端衬着比照，各人能够用阅读器

弱网3G来测试一下.

所以我们能够把 需要 做SEO和需要起首起头衬着出来得部门来做办事端衬着 ,然后部门不需要马上衬着得能够放到客户端，来做恳求或者懒加载.

如今我们来领会一下nuxt一个vue得办事端得衬着框架:

uxt.js 是一个基于 Vue.js 的办事端衬着应用框架，它能够帮我们轻松的实现同构应用。

通过对客户端/办事端根底架构的笼统组织，Nuxt.js 次要存眷的是应用的UI衬着。

我们的目的是创建一个灵敏的应用框架，你能够基于它初始化新项目标根底构造代码，或者在已有Node.js 项目中利用 Nuxt.js。

Nuxt.js 预设了操纵 Vue.js 开发办事端衬着的应用所需要的各类设置装备摆设。

除此之外，我们还供给了一种号令叫：nuxtgenerate，为基于 Vue.js 的应用供给生成对应的静态站点的功用。

我们相信那个号令所供给的功用，是向开发集成各类微办事（Microservices）的 Web 应用迈开的新一步。

做为框架，Nuxt.js 为客户端/办事端那种典型的应用架构形式供给了许多有用的特征，例如异步数据加载、中间件撑持、规划撑持等十分适用的功用。

nuxt.js得官网写的很好，很完美了，各人用之前能够先看一遍官网。

nuxt.js中文官网

那里贴一份生命周期得比照

nuxt得常见问题

若是利用了 Koa/Express 等 Node.js Web 开发框架，并利用了 Nuxt 做为中间件，能够自定义 Web 办事器的启动入口：

办事器发布

做者:Charon

出处:https://segmentfault.com/a/1190000038872454