当前位置: 首页 > 科技观察

React和Next.js已经死了,它们真的要被取代了吗?

时间:2023-03-17 22:00:05 科技观察

作者丨SomnathSingh  译者|徐磊  这是JavaScript框架下一次革命的开始吗?很明显,是的!  在平时的网页开发中存在着一对不可调和的矛盾,即一方面需要更多的JavaScript代码来实现你的客户所期望的功能,另一方面为了让你的网站加载速度更快,并且不得不考虑减少JavaScript代码量。作为开发人员,您总是试图在两者之间取得平衡。  如果我现在告诉你,你可以随意编写大量的JavaScript代码,即使达到几千兆字节,你仍然不需要担心应用程序的性能。更重要的是,如果你到目前为止使用的每一个著名的前端框架在设计上都存在根本性的缺陷,你会作何感想?  首先我们要接受一个现实:JavaScript是不可避免的!这将使我们的工作更轻松。我们所处的困境是我们太固执了,无法承认网络现在处于混乱状态的事实。我们很久以前就得出结论,从服务器向客户端发送HTML的成本太高了。所以我们开始开发各种替代产品。这些年,我们不断开发各种框架来对抗构建web的基础。  阅读下面的说明,您就会明白我的意思。在一个典型的web应用中,我们将服务器端生成的HTML发送到客户端,然后客户端开始渲染它,当然你现在不能与之交互,然后浏览器开始加载JavaScript部分,最后执行关联程序和额外的监听器,然后你才能开始与之交互。  那么问题来了,虽然服务端已经把包括视图在内的整个结构体发送给了客户端,但是我们还是要等到可以交互的时候,这样就无谓地增加了整个流程的启动时间。  加载时间长的主要原因是每次都要从头开始。整个过程称为Hydration,即浏览器读取JavaScript部分,然后判断网页上的代码属于哪一部分,并进行额外的监控。如果这是导致整个问题的原因,我们不能通过延迟加载来解决它吗?这样做是可以的,但是并不能解决问题!  假设我们从服务端发送HTML到客户端下载执行,特定的块以懒加载的方式完成。这样一来,你可能已经想到,既然组件都是可见的,那么遇到懒加载的block只能重新请求组件,完成Hydration,已经失去了懒加载的意义。它也首先违背了使用延迟加载的目的。  延迟加载适用于现有系统,主要针对不在渲染树中的组件。对于渲染树中的组件来说,懒加载是一种干扰。但是每个人都没有意识到这一点。当你反馈应用太大时,大多数人会主观地认为“只是懒加载所有东西”,却没有意识到其实做起来并不容易,尤其是我们上面提到的场景。  当然我们也可以采用岛式建筑。没必要在一开始就把所有东西都水合(成本有点高),而是在客户与特定组件交互时才进行。例如,当我们与菜单进行交互时,我们只需要对菜单进行水合即可。我们可以与任何特定组件进行交互,我们只需要对特定组件进行Hydrate而不是整个应用程序。  虽然这是一个改进,但如果“岛屿”足够大,岛屿之间的沟通就会成为一个问题。因为你刚刚把组件变成了孤岛,每个孤岛都是一个独立的应用,应用之间的通信问题亟待解决。  现在Qwik来了!当我们与特定的组件进行交互时,只需要加载这个组件,而不再需要将组件的父类和子类也随之加载。  Qwik还可以足够智能地识别当前组件是否还需要依赖其他组件(想象一下电子商务网站上的添加到购物车按钮),并唤醒依赖的组件。此时,如果我们再次打开网络选项卡,我们会发现初始页面加载时的JavaScript为零。  页面上没有JavaScript加载的情况并不少见,如果您请求的是静态页面,任何框架都可以做到这一点。这也不是Qwik的怪异之处,它会查看您的代码并得出结论“当前不需要JavaScript,现在无需发送它”。所以您会注意到,在我们单击按钮之前,JavaScript不会加载。  单个JS的加载时间好像是“点点滴滴”,大量积累很快就会变成瀑布”。幸运的是,我们页面的加载时间并没有因此而增加。因为依赖Qwik让你可以随心所欲地编写JavaScript,再也不用担心包大小或性能低下了。不用想就觉得不可思议适用性.匠心往往被认为是魔法  刚开始接触虚拟机的时候,感觉很神奇“这不可能吧,一个系统怎么跑另一个系统呢?”。看似神奇的东西,背后是纯粹的技术。在Windows系统中启动Linux,一开始对我来说是难以置信的,但我还有另一个原因让我兴奋。当您启动进入Linux,登录,打开一个应用程序(如文字处理器),然后开始打字,然后在某个时刻您保存虚拟机并将相关文件发送给您的朋友。当你的朋友通过文件恢复虚拟机时,显示界面和我们离开时一模一样,不用打开电脑,打开文字处理器,然后找到我们离开时的输入位置。这就是吸引我的地方!  这些正是Qwik提供的。应用在服务器端启动,当达到特定状态时,进行快照,然后将快照以HTML的形式发送给客户端,客户端可以直接显示快照的具体状态。从本质上讲,网站启动慢的原因是我们在做Hydration之前必须先加载它,整个过程很昂贵。  Qwik很快,因为它跳过启动,客户端直接显示服务器的确切状态,其中包含我们要执行的代码,还可以访问语法环境以更新可能由其他组件共享的信息状态,当然,状态本身是惰性加载的。  “最好的代码是根本没有代码”。Qwik的快并不是因为它的效率高,而是因为它善于避免工作,带来了一种新的渲染方式,叫做resumablerendering。这也是我们以非线性方式在线播放电影的方式,由用户决定他们想要应用程序的哪些部分以及何时。因此,Qwik打开了一个全新的世界,使您能够跨多个后端在边缘服务上呈现您的页面,然后将它们组合成一个完整的响应。总结  几千年前,释迦牟尼就告诫我们要选择中庸之道。但是我们的发展太固执了,还是选择走极端。有一组人告诉你一直使用JavaScript,另一组人告诉你永远不要选择JavaScript,还有一组人告诉你使用JS或多或少地以牺牲性能为代价来捆绑包袱.  Qwik是一股清新的空气,不同于我们以前使用的任何框架。我不是在这里鼓吹一个框架,但我们不得不承认它是革命性的。希望更多的框架采用这种方法,它代表了前进的方向,否则我们将永远陷入循环。  原文链接:https://javascript.plainenglish.io/react-and-next-js-is-dead-something-new-is-finally-replacing-it-for-good-c792c48806f6  徐磊,社区编辑,某知名电商公司技术副总监,专注于Java后端开发、技术管理、架构优化、分布式开发等领域。