服务端渲染和nuxt

Charon

简介:随着前端技术栈和工具链的迭代成熟,前端工程化、模块化也已成为了当下的主流技术方案,在这波前端技术浪潮中,涌现了诸如 React、Vue、Angular 等基于客户端渲染的前端框架,这类框架所构建的单页应用(SPA)具有用户体验好、渲染性能好、可维护性高等优点。但也也有一些很大的缺陷,其中主要涉及到以下两点:

  • 首屏加载时间过长

    • 与传统服务端渲染直接获取服务端渲染好的 HTML 不同,单页应用使用 JavaScript 在客户端生成 HTML来呈现内容,用户需要等待客户端 JS 解析执行完成才能看到页面,这就使得首屏加载时间变长,从而影响用户体验。
  • 不利于 SEO

    • 当搜索引擎爬取网站 HTML 文件时,单页应用的 HTML 没有内容,因为他它需要通过客户端 JavaScript解析执行才能生成网页内容,而目前的主流的搜索引擎对于这一部分内容的抓取还不是很好。
    • 为了解决这两个缺陷,业界借鉴了传统的服务端直出 HTML 方案,提出在服务器端执行前端框架(React/Vue/Angular)代码生成网页内容,然后将渲染好的网页内容返回给客户端,客户端只需要负责展示就可以了;

原来得spa应用是这样
image.png
但是这种模式下,也会存在一些明显的不足,其中最主要的就是:

  • 首屏渲染慢:因为 HTML 中没有内容,必须等到 JavaScript 加载并执行完成才能呈现页面内容。
  • SEO 问题:同样因为 HTML 中没有内容,所以对于目前的搜索引擎爬虫来说,页面中没有任何有用的信息,自然无法提取关键词,进行索引了。

我们说的同构渲染(现代化的服务端渲染)是这样:

image.png

当然不仅仅如此,为了获得更好的用户体验,同时会在客户端将来自服务端渲染的内容激活为一个 SPA应用,也就是说之后的页面内容交互都是通过客户端渲染处理。

image.png

这种方式简而言之就是:

  • 通过服务端渲染首屏直出,解决首屏渲染慢以及不利于 SEO 问题
  • 通过客户端渲染接管页面内容交互得到更好的用户体验

这种方式我们通常称之为现代化的服务端渲染,也叫同构渲染,所谓的同构指的就是服务端构建渲染 +客户端构建渲染。同理,这种方式构建的应用称之为服务端渲染应用或者是同构应用
这个流程主要就是:

  1. 客户端发起请求
  2. 服务端渲染首屏内容 + 生成客户端 SPA 相关资源
  3. 服务端将生成的首屏资源发送给客户端
  4. 客户端直接展示服务端渲染好的首屏内容
  5. 首屏中的 SPA 相关资源执行之后会激活客户端 Vue
  6. 之后客户端所有的交互都由客户端 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应用得渲染和服务端渲染对比,大家可以用浏览器
image.png
弱网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中文官网
这里贴一份生命周期得对比
image.png

image.png

nuxt得常见问题

如果使用了 Koa/Express 等 Node.js Web 开发框架,并使用了 Nuxt 作为中间件,可以自定义 Web 服务器的启动入口:

image.png

image.png
image.png
服务器发布
image.png

这里有一个我用nuxt做的demo

https://github.com/544076724/...
这是地址 dev分支上

这是界面素材:
https://github.com/gothinkste...

在线实例:
https://demo.realworld.io/#/

接口文档:
https://github.com/gothinkste...

大家如果想学个东西练手,这个模板还不错.

这是我http://106.75.104.214:3000/ 部署得地址.

下一篇聊一下如何部署,做持续集成.

阅读 1.2k

世界核平

31 声望
11 粉丝
0 条评论
你知道吗?

世界核平

31 声望
11 粉丝
宣传栏