nuxt核心原理2------nuxt——服务端渲染可选方案

团队在最近的一次开发中前端技术栈从 html + css + jquery 转向 vue 全家桶。后端从 php + Blade + jquery 转向 vue 全家桶。

在转向前后端分离的开发模式中遇到了一些问题。

• 首屏加载缓慢
• seo 问题
• 前后端分离中的异步请求数量过多等问题

为了解决上面的尤其是第二个问题。团队决定使用服务端渲染。

服务端渲染

服务端渲染可以很好的解决打包文件过大导致的首次加载白屏问题，并且页面打开速度相比于 js 渲染界面快很多。

就像过去用 php 的模板引擎渲染 html 界面也是一种服务端渲染方式，但并不适用于大 JavaScript 时代了。

我最早看到服务端渲染是在淘宝博客的前后端分离的思考与实践中，他们提出了一个中途岛的概念。

其实回头想想，在我们把渲染的工作从 服务端抽出来到 浏览器端（JS）的时候，我们的目的只是明确的前后端职责划分，并不是非浏览器渲染不可。
只是因为在传统的开发模式中，出了服务器就到了浏览器，所以前端的工作内容只能被限制在浏览器端。
也因此很多人认定了 后端 = 服务端 前端 = 浏览器端
—— 前后端分离的思考与实践

 

原文链接 前后端分离的思考与实践（二）

---

前后端分离是架构上的分离，并不是人员上的分离，php 程序员写写现代 js 对自身的成长也是有很大帮助的。

其实我想说的是 php 并不是不可替代的？，node.js 什么嗒也是可以很好的完成 web 开发的

由于使用了 vue 全家桶，且对 node.js 也不是很熟悉，所以选择了 nuxt.js 服务端渲染框架 （主要还是用起来简单，学起来快）

nuxt

nuxt 中文文档 https://zh.nuxtjs.org/guide

 

在使用 nuxt 的过程中，我们对一个界面的请求方式有两种。

• 从浏览器地址栏键入
• 通过类似 router-link 的 a 标签点击跳转

当我们从浏览器的地址栏中键入一条请求时，请求被交给了 nuxt 服务器（或者 nginx→nuxt）。
nuxt 服务器解析 vue 组件（中的 asyncData 方法），并将数据绑定到 html。然后再返回给浏览器。

当我们通过点击 router-link 跳转时整个应用依旧是无刷新的单页应用。且会在 window.history 中键入记录。

因此对于任意一个 vue 组件其被访问的情况分为两种，浏览器端渲染和 nuxt 服务器端渲染。

了解 nuxt 最快的方式就是了解 nuxt 的生命周期，了解 nuxt 生命周期最快的方式自然是 conlose.log () 了。
并不具体的细节请参考手册。

后记

nuxt 项目还比较年轻，所以存在一些莫名奇妙的 bug（更多的 bug 主要是对 js 不熟悉所致）。
但是 vue 官方推荐，且有着强大的社区支撑，所以还是有着不错的维护效率。