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官方推荐，且有着强大的社区支撑，所以还是有着不错的维护效率。

博客地址 nuxt——服务端渲染可选方案

本作品采用《CC 协议》，转载必须注明作者和本文链接