Nuxt 3.2.0 正式发布

Nuxt 3.2.0 正式发布

 

大家好,我是Echa。

好消息,2023年2月8日Nuxt官方正式发布v3.2.0版本。距离Nuxt v3.1.0正式版(2023年1月27日),详细请见这篇文章:Nuxt 3.1.0 正式发布,相距只有短短12天时间。小编在Github上看到Nuxt开发团队没日没夜的在维护修改提交新版本,同时兼容其他底层扩展组件,Nuxt团队非常给力。

Nuxt 介绍

官网地址:https://nuxt.com/

在线演示:
https://nuxt.com/docs/examples/essentials/hello-world

Github:https://github.com/nuxt/nuxt

Nuxt 是易懂的 Web 框架,用于构建现代和高性能的 Web 应用,可以部署在任何运行 JavaScript 的平台上。

使用Nuxt自信地构建下一个Vue.js应用程序。一个在MIT许可下的开源框架,使web开发简单而强大。

Nuxt提供前端和后端功能,因此您可以专注于重要的事情:创建您的web应用程序。

 

什么是SSR?

SSR 就是 服务器渲染,什么是 服务器渲染?由 服务器 组装好 DOM 元素,生成 HTML 字符串给到浏览器,也就是在浏览器里面是可以看到整个页面的 DOM 源码的。

SSR 解决的问题:

SEO:搜索引擎的优先爬取级别是页面的 HTML 结构,当我们使用 SSR 的时候,服务端已经生成了与业务相关联的 HTML,这样的信息对于 SEO 是很友好的。

内容呈现:客户端无需等待所有的 JS 文件加载完成即可看见渲染的业务相关视图(压力来到了服务端这边,这也是需要做权衡的地方,需要区分哪些由服务端渲染,哪些可以交给客户端)。

SSR 相关的弊端:

代码兼容:对于开发人员来讲,需要去兼容代码在不同环境的运行 Vue SSR 所需要的服务端环境是 Node,有一些客户端的对象,比如 dom、windows 之类的则无法使用。

服务器负载:相对于前后端分离模式下服务器只需要提供静态资源来说,SSR 需要的服务器负载更大,所以在项目中使用 SSR 模式要慎重,比如一整套图表页面,相对于服务端渲染,可能用户不会在乎初始加载的前几秒,可以交由客户端使用类似于骨架屏,或者懒加载之类的提升用户体验。

Vue 与 Vue SSR 与 原生HTML 页面源码区别对比,在网页上右键查看源码:

Vue SSR 与 原生HTML 是可以看到源码标签的

在认识SSR之前,首先对CSR与SSR之间做个对比。

首先看一下传统的web开发,传统的web开发是,客户端向服务端发送请求,服务端查询数据库,拼接HTML字符串(模板),通过一系列的数据处理之后,把整理好的HTML返回给客户端,浏览器相当于打开了一个页面。这种比如我们经常听说过的jsp,PHP,aspx也就是传统的MVC的开发。

SPA应用,到了Vue、React,单页面应用优秀的用户体验,逐渐成为了主流,页面整体式javaScript渲染出来的,称之为客户端渲染CSR。SPA渲染过程。由客户端访问URL发送请求到服务端,返回HTML结构(但是SPA的返回的HTML结构是非常的小的,只有一个基本的结构,如第一段代码所示)。客户端接收到返回结果之后,在客户端开始渲染HTML,渲染时执行对应javaScript,最后渲染template,渲染完成之后,再次向服务端发送数据请求,注意这里时数据请求,服务端返回json格式数据。客户端接收数据,然后完成最终渲染。(请求两次,百度搜索引擎不能抓取SPA页面的数据)

SPA虽然给服务器减轻了压力,但是也是有缺点的:

首屏渲染时间比较长:必须等待JavaScript加载完毕,并且执行完毕,才能渲染出首屏。

SEO不友好:爬虫只能拿到一个div元素,认为页面是空的,不利于SEO。

为了解决如上两个问题,出现了SSR解决方案,后端渲染出首屏的DOM结构返回,前端拿到内容带上首屏,后续的页面操作,再用单页面路由和渲染,称之为服务端渲染(SSR)。

SSR渲染流程是这样的,客户端发送URL请求到服务端,服务端读取对应的url的模板信息,在服务端做出html和数据的渲染,渲染完成之后返回html结构,客户端这时拿到的之后首屏页面的html结构。所以用户在浏览首屏的时候速度会很快,因为客户端不需要再次发送ajax请求。并不是做了SSR我们的页面就不属于SPA应用了,它仍然是一个独立的spa应用。

SSR是处于CSR与SPA应用之间的一个折中的方案,在渲染首屏的时候在服务端做出了渲染,注意仅仅是首屏,其他页面还是需要在客户端渲染的,在服务端接收到请求之后并且渲染出首屏页面,会携带着剩余的路由信息预留给客户端去渲染其他路由的页面。

Nuxt.js是特点(优点):

  • 基于Vue
  • 自动代码分层
  • 服务端渲染
  • 强大的路由功能,支持异步数据
  • 静态文件服务
  • EcmaScript6和EcmaScript7的语法支持
  • 打包和压缩JavaScript和Css
  • HTML头部标签管理
  • 本地开发支持热加载
  • 集成ESLint
  • 支持各种样式预编译器SASS、LESS等等
  • 支持HTTP/2推送

缺点

  • 对于服务器要求比客户端渲染高

如下图:

 

 

小编带着大家先回顾一下Nuxt v3.0正式版更新了哪些内容:

  • 更轻量:以现代浏览器为目标的服务器部署和客户端产物最多可缩小 75 倍
  • 更快:基于 nitro 提供动态代码分割能力,以优化冷启动性能
  • Hybrid:增量静态生成和其他的高级功能现在都成为可能
  • Suspense:在任意组件和导航前后都可以获取数据
  • Composition API:使用 Composition API 和 Nuxt 3 的 composables 实现真正的代码复用
  • Nuxt CLI:没有任何依赖,帮你轻松搭建项目和集成模块
  • Nuxt Devtools:通过直接在浏览器中查看信息和快速修复实现更快地工作
  • Nuxt Kit:具有 Typescript 和跨版本兼容性的全新模块开发
  • Webpack 5:更快的构建时间和更小的包大小,无需配置
  • Vite:使用 Vite 作为打包工具,体验闪电般快速的 HMR
  • Vue 3:Vue 3 是你下一个 Web 应用程序的坚实基础
  • TypeScript:使用原生 TypeScript 和 ESM 构建,无需额外步骤

 

下面就来看看 Nuxt v3.1.0 都有哪些更新:

  • 文档改进
  • 实验性的岛屿组件和 服务器组件(目前不支持异步)
  • 新增 API onNuxtReady,useNuxtData、useSeometa
  • 实验性的 config schema
  • 升级到 Nitropack v2
  • 升级到 Vite4 和 Rollup3

 

 

接着 Nuxt v3.2.0 都有哪些更新:

  • Nuxt DevTools 支持可视化项目、页面、组件、模块、Hooks 等等信息。
  • 更好的DX用于重写runtimeConfig,包括内联类型助手
  • 根据方法自动推断useFetch和$fetch的返回类型。
  • useFetch现在已与事件集成$fetch,这意味着cookie和上下文现在在内部请求中自动传递给api请求。
  • 新增treeshakeClientOnly特性,更有效地构建了服务器外的treeshake客户端组件
export default defineNuxtConfig({
  experimental: {
    treeshakeClientOnly: false
  }
})
  • 新增addRouteMiddleware工具包实用程序
  • 兼容Nitropack v2.2版本

具体如下:

 

 

 

 

最后

一台电脑,一个键盘,尽情挥洒智慧的人生;几行数字,几个字母,认真编写生活的美好;

一 个灵感,一段程序,推动科技进步,促进社会发展。

创作不易,喜欢的老铁们加个关注,点个赞,打个赏,后面会不定期更新干货和技术相关的资讯,速速收藏,谢谢!你们的一个小小举动就是对小编的认可,更是创作的动力。

posted on 2023-03-07 18:48  漫思  阅读(103)  评论(0编辑  收藏  举报

导航