Nuxt 3.2.0 正式发布
原创2023-02-16 07:30·Echa攻城狮
大家好，我是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版本
具体如下：
最后
一台电脑,一个键盘,尽情挥洒智慧的人生;几行数字,几个字母,认真编写生活的美好;
一 个灵感,一段程序,推动科技进步,促进社会发展。
创作不易，喜欢的老铁们加个关注，点个赞，打个赏，后面会不定期更新干货和技术相关的资讯，速速收藏，谢谢！你们的一个小小举动就是对小编的认可，更是创作的动力。
标签：正式,渲染,页面,SSR,3.2,Nuxt,服务端,客户端 From： https://www.cnblogs.com/sexintercourse/p/17189179.html