Nuxt3还能用吗?

Nuxt3还能用吗?

前一段时间,我完成了整个产品,从Nuxt到Next的迁移,因为面临了一些在框架层面就无法解决的问题。

payload json化

在所有的的Nuxt中,我们都能看到有这样一个东西。

其实有这个东西也很正常,在Next中也会把服务端渲染的数据挂载html保持数据同步,这就是一个水合的必要步骤。在Next中是这样的。

可以看到在Next新一点的版本中是压缩过的字符串(老版本Page Router,也是JSON格式),而在Nuxt中采用的是JSON格式.

为什么Nuxt要采用JSON?有什么好处?会面临什么问题?

好处:

其实很好理解,就是为了性能和水合的加速,我的直觉因为是因为V8的性能加速对于JSON格式,V8参考资料。所以它不做压缩。

问题:违背SSR原则

这其实有点不符合SSR的设计原则,本身来说SSR是要在更快的时间看到页面和加载完成,这种设计会让整个html document的文件大小大量的增加。假设项目有18n文件,或者首屏的请求接口非常的多在服务端完成,就会导致拉长整个接口时间。

在本身现代浏览器如此之快的背景下,去加快水合时间,而拖慢请求完成的时间,确实让我非常的不理解。

💥 矛盾暴击现场

  1. i18n地狱 🌐

    1. 服务端渲染多语言版本 → HTML体积×N倍

    2. 爬虫抓取时:“这页面怎么比新华字典还厚?📚”

  2. 接口瀑布流 🌊

    1. 服务端串行请求10个API → 链式延迟堪比春运抢票

    2. 用户内心OS:“我等得都能泡碗面了🍜”

  3. 水合加速 vs 服务端减速 🐢⚡

    1. 现代浏览器渲染飞快,但服务端被重逻辑拖累 → 前端省下的时间,全赔给后端了!

安全问题

我靠,你敢相信吗,这么大一个框架,在一定情况下,会把NUXT_PUBLIC公开的环境变量直接挂在html里(如果用到了环境变量),人都要晕了。

可以参考这个issue:https://github.com/nuxt/nuxt/issues/2033 这个问题从2017年已经到2024年了。

生态问题

不可否认的是,整个生态是欣欣向荣的,但在一些更商业和大型库生态在我看来Nuxt是不够深入的(就是Nuxt有非常多高级的语法糖和渲染方式和写法、社区在遇到更具体问题的时候解法很少),反之整个生态的方向都导向了工具、组件库、提效、性能类似的方向,让我感觉很迷茫有时候,就是大家都不做应用是把。

夸一下

毫无疑问,Nuxt框架在不考虑上述这些因素的情况下,在纯前端层面上的性能、语法便捷度、用户体验(框架基础)上绝对都是大于Next的,它也是可以用的。

欢迎加入群聊,我们一起讨论一些更有趣的技术、商业、闲聊。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/904312.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Dify 获取天气数据并以echarts图表显示

Dify 获取天气数据并以echarts图表显示 1. 创建一个 Chatflow2. 创建一个 HTTP 请求节点3. 创建一个代码执行节点4. 创建一个直接回复节点5. 发布并预览 1. 创建一个 Chatflow 2. 创建一个 HTTP 请求节点 请求地址:https://weather.cma.cn/api/climate?stationid5…

计算机图形学编程(使用OpenGL和C++)(第2版)学习笔记 02.OpenGL图像管线

1. OpenGL图像管线 OpenGL(Open Graphics Library)是一个跨平台的、功能强大的图形渲染API,用于开发2D和3D图形应用程序。它由Khronos Group维护,广泛应用于游戏开发、图形设计、虚拟现实等领域。 1.0.1. OpenGL的特点&#xff…

Linux架构篇、第1章_02源码编译安装Apache HTTP Server 最新稳定版本是 2.4.62

Linux_基础篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:源码编译安装Apache HTTP Server 最新稳定版本是 2.4.62 版本号: 1.0,0 作者: 老王要学习 日期: 2025.05.01 适用环境: Centos7 文档说明 本文…

算法基础学习|03二分

一、思路 (1)mid(lr1)/2 if(check(mid)):1.true [mid,r] lmid 2.false [l,mid-1] rmid-1 (2)mid(lr)/2 if(check(mid)):1.true [l,mid] rmid 2.false [mid1,r] lmid1 二、模板 如何选择模…

18. LangChain分布式任务调度:大规模应用的性能优化

引言:从单机到万级并发的进化 2025年某全球客服系统通过LangChain分布式改造,成功应对黑五期间每秒12,000次的咨询请求。本文将基于LangChain的分布式架构,详解如何实现AI任务的自动扩缩容与智能调度。 一、分布式系统核心指标 1.1 性能基准…

Java泛型(补档)

核心概念 Java 泛型是 Java SE 1.5 引入的一项重要特性,它的核心思想是 参数化类型(Parameterized Types),即通过将数据类型作为参数传递给类、接口或方法,使代码能够灵活地处理多种类型,同时保证类型安全性…

LeetCode 热题 100:普通数组

53. 最大子数组和 给你一个整数数组 nums ,请你找出一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和。 子数组是数组中的一个连续部分。 示例 1: 输入:nums [-2,1,-3,4,-1,2,1,-5,4] 输…

【kafka系列】消费者组

目录 消费者组功能点 1. 动态负载均衡 2. 容错高可用 3. 消费进度管理 4. 并行消费能力 5. 消费隔离性 其他要点 1. Rebalance过程详解 2. 位移提交的精确语义 3. 消费者限速策略 4. 跨机房消费设计 消费者组功能点 1. 动态负载均衡 核心机制:通过Rebal…

黑马点评day01(基于Redis)

1.7 Redis代替session的业务流程 1.7.1、设计key的结构 首先我们要思考一下利用redis来存储数据,那么到底使用哪种结构呢?由于存入的数据比较简单,我们可以考虑使用String,或者是使用哈希,如下图,如果使用…

Python爬虫实战:获取优美图库各类高清图片,为用户提供设计素材

一、引言 在互联网时代,高清壁纸资源丰富多样,而优美图库作为一个提供大量精美壁纸的网站,吸引了众多用户。通过 Python 爬虫技术,可以自动化地从该网站获取所需的壁纸资源,为用户节省时间和精力。然而,网站通常会采取反爬措施来防止数据被恶意抓取,因此需要在爬虫程序…

Go反射-通过反射调用结构体的方法(带入参)

使用反射前,我们需要提前做好映射配置 papckage_struct_relationship.go package reflectcommonimport (api "template/api" )// 包名到包对象的映射 var structMap map[string]func() interface{}{"template/api": func() interface{} { re…

Git_.gitignore文件简介及使用

.gitignore 这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中。实际项目中,很多文件都是不需要版本管理的,比如Python的.pyc文件,Git会根据这个文件里配置的这些规则来判断是否将文件添加到版本控制中。 注意,直接新建文…

HarmonyOS ArkUI安全控件开发指南:粘贴、保存与位置控件的实现与隐私保护实践

目录 安全控件1. 粘贴控件1.1 约束与限制1.2 开发步骤 2. 保存控件2.1 约束与限制2.2 开发步骤 3. 位置控件3.1 约束与限制3.2 开发步骤 安全控件 安全控件是系统提供的一组系统实现的ArkUI组件,其中保存控件在用户首次使用时,会弹出通知弹窗&#xff0…

C++笔记之接口`Interface`

C++笔记之接口Interface code review! 一个简洁简短的 C++ 接口实现示例: #include <iostream>// 1. 定义接口(抽象类) class Shape {public:

动态图表 -- eg1

问题&#xff1a; 前端vue&#xff0c;后端springboot&#xff0c;实现动态表格样式&#xff0c;&#xff08;表格List<Student>&#xff0c;Student类有年级&#xff0c;班级&#xff0c;文理科分类&#xff0c;姓名&#xff0c;学号&#xff0c;等属性。先根据年级分类…

C++学习之shell高级和正则表达式

目录 1.正则表达式 2.C中使用正则 3.复习 4.sort命令 5.uniq命令 6.wc命令 7.grep命令 8.find命令 9.xargs命令 10.sed命令 11.awk命令 12.crontab 1.正则表达式 1 管道 使用| 将多个命令拼接在一起 原理&#xff0c;就是将前一个命令的标准输出作为后一个…

【Vue】 实现TodoList案例(待办事项)

目录 组件化编码流程&#xff08;通用&#xff09; 1.实现静态组件&#xff1a;抽取组件&#xff0c;使用组件实现静态页面效果 2.展示动态数据&#xff1a; 1. 常规 HTML 属性 3.交互——从绑定事件监听开始 什么时候要用 event&#xff1a; 什么时候不需要用 event&am…

【Bootstrap V4系列】学习入门教程之 组件-卡片(Card)

Bootstrap V4系列 学习入门教程之 组件-卡片&#xff08;Card&#xff09; 卡片&#xff08;Card&#xff09;一、Example二、Content types 内容类型2.1 Body 主体2.2 Titles, text, and links 标题、文本和链接2.3 Images 图片2.4 List groups 列表组2.5 Kitchen sink 洗涤槽…

java学习之数据结构:四、树(代码补充)

这部分主要是用代码实现有序二叉树、树遍历、删除节点 目录 1.构建有序二叉树 1.1原理 1.2插入实现 2.广度优先遍历--队列实现 3.深度优先遍历--递归实现 3.1先序遍历 3.2中序遍历 3.3后序遍历 4.删除 4.1删除叶子节点 4.2删除有一棵子树的节点 4.3删除有两棵子树的节…

架构进阶:什么是数据架构,如何理解数据架构?(华为)

数据架构是企业架构的重要组成部分,DAMA、IBM 及国内大厂对其定义各有侧重。它包含数据资产目录、数据标准、数据模型和数据分布四个组件。数据资产目录可梳理企业数据资产,数据标准统一数据含义和规则,数据模型反映业务对象关联关系,数据分布呈现数据流动情况。数据架构是…