前端nuxt框架ssr初体验


吐槽

贵圈真乱..nuxt、nest、next ,已经快傻傻分不清楚了…

前端的车轮,碾压了青春,耗费了精力,疲于奔命,还是归本溯源,天知道…

从前端的性能优化说起

前端的性能优化,谷歌可以一大堆,他们说的当然都是非常有道理的。webpack打包优化,cdn,css权重,雪碧图?似乎都对。还记得一开始学前端时候,经常听到雅虎军规,曾经的优化圣经,现在还适用吗?

雅虎军规:

  1. 尽量减少HTTP请求数
  2. 使用内容发布网络
  3. 添加Expires头
  4. 压缩组件(使用gzip编码压缩http响应包)
  5. 将样式表放在顶部
  6. 将脚本放在底部
  7. 避免CSS表达式
  8. 使用外部的JavaScript和CSS
  9. 减少DNS查找
  10. 精简Javascript
  11. 避免重定向
  12. 移除重复脚本
  13. 配置ETag
  14. 使Ajax可缓存

我们现在基本上还是在遵守这些规则,只是有时候并不感知,打包工具帮我们做了大部分的事情。

前端性能优化,加快传输,加快渲染。现在的spa页面,不利于seo(虽然已经不重要了),无法避免加载白屏的问题。

历史,在召唤新的解决方案。

高大上的ssr是什么

服务端渲染,听起来就挺高大上的。然而,这并不是什么新技术。在很久很久以前phpsmarty模板引擎,javajsp,都可以称为服务端渲染。简单来说,服务端,给到客户端的是已经渲染好的html,浏览器可以立即解析,呈现页面。现在的主流框架都是空页面,然后加载js,通过js渲染出页面。

一般的spa页面,往往在渲染过程中,还会涉及ajax的请求发送,极端情况,可能一开始就有七八个请求,这种用户体验能好,才奇怪了。在这个过程中,页面基本上是不可用的,会出现loading状态,或者骨架屏状态。

能不能,复古一点,服务端直接渲染好页面,前端不发送初始化请求,前端拿到页面直接渲染,交互再通过ajax?

vue也提供了ssr的渲染方案,社区中比较成熟的要数nuxt实现。

nuxt 入门

nuxt 整体学习门槛不高,我整理下我学习遇到的集个问题,详细的还请查看文档。

1. 安装

$ npx create-nuxt-app <项目名>

2. 路由

在pages目录下的vue文件,会自动配置为路由,不需要手动配置。参数的获取遵循约定即可(详情,请查看文档)

3. 异步数据(asyncData)

框架提供了asyncData获取异步数据,注意:asyncData方法会在组件(限于页面组件)每次加载之前被调用。它可以在服务端或路由更新之前被调用。

asyncData执行的时候,页面还没有初始化,访问不到页面的方法,asyncData的返回结果,会被挂载到页面的data上面,渲染的时候,可以拿到数据,server端渲染为html

4.异步数据(fetch)

fetch 方法用于在渲染页面前填充应用的状态树(store)数据, 与 asyncData 方法类似,不同的是它不会设置组件的数据。

5. vuex

按照示例直接声明即可,不需要进行实例化

export const state = () => ({
  counter: 0
})

export const mutations = {
  increment (state) {
    state.counter++
  }
}
export const actions={
    // 服务端执行
  async nuxtServerInit({ commit }) {
    const {
      data: { code, data }
    } = await axios.get('https://loacalhost:3000')
    if (code === '000') {
      commit('setConfig', data.Config)
    }
  }
}

如果,我想,设置初始化数据,然后再执行页面的asyncData方法,直接使用是不行的。需要在状态树中指定 nuxtServerInit方法。

页面首先执行nuxtServerInit方法,结束后触发asyncData或者页面fetch方法

6.插件机制

一般的vue项目我们都是在main.js中引入插件使用。

next项目中,需要在plugins文件夹下声明,并在nuxt.config.js中配置插件

7.注意第三方包的引入方式

服务端是没有window、document的,如果第三方包含有这些,那么就会报错,需要指定这些包为浏览器渲染类型。

let tool
if (process.client) {
  tool = require('name')
}

通过commonjs的方式引入,不能通过es6的方式引入。

同构项目

周末把公司的一个h5项目进行了同构。之前是 6s 出界面,然后是ajax请求,到可用差不多要7~8s。同构之后,初始请求全部放到服务端进行,1s出界面,2s dom渲染结束,页面可用。可以说,提升还是非常大的。

大前端

使用了nuxt之后,前端真的不只是前端了,完全可以站在更高的角度去看待问题,能做到事情也更多了。api缓存,组件缓存,页面缓存,即使已经比较满意了,依然有很多可以优化的点。

more

node 作为中间层,可以做很多事情,大大拓展了前端的职业可能性。只要你愿意,可做的又岂止是一个中间层,可以把后端的事情也完全做完。

日志,监控,安全,涉及到的东西会越来越多。

同构,对体验无疑是有巨大帮助的,但是多出来的这么多运维成本,也是项目需要考虑的。

周末的nuxt体验就到此呐~


文章作者: Yao
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Yao !
 上一篇
基础Linux学习 基础Linux学习
现在的服务都是部署在宝塔的基础上,基本是0技术要求,学习Linux,准备在下半年的服务换成原生的linux,不再依赖第三方控制面板。以下学习都是以Centos 7为基础。 常用命令 init 0: 关机 init 6: 重启 ip ad
2020-03-29
下一篇 
nest 初体验 nest 初体验
假期中,学习了nest这个node后端框架。感觉整体比较简约,学习相对来说,比较容易。本篇,写一下自己对这个框架的理解。 特点 类angular的代码组织形式:imports、module、service 基于typescript,面向未来
2020-02-23
  目录