【后端开发】Next.js 13.4:前端开发的游戏规则改变者!

自我介绍

  • 做一个简单介绍,酒架年近48 ,有20多年IT工作经历,目前在一家500强做企业架构.因为工作需要,另外也因为兴趣涉猎比较广,为了自己学习建立了三个博客,分别是【全球IT瞭望】,【架构师酒馆】和【开发者开聊】,有更多的内容分享,谢谢大家收藏。
  • 企业架构师需要比较广泛的知识面,了解一个企业的整体的业务,应用,技术,数据,治理和合规。之前4年主要负责企业整体的技术规划,标准的建立和项目治理。最近一年主要负责数据,涉及到数据平台,数据战略,数据分析,数据建模,数据治理,还涉及到数据主权,隐私保护和数据经济。 因为需要,比如数据资源入财务报表,另外数据如何估值和货币化需要财务和金融方面的知识,最近在学习财务,金融和法律。打算先备考CPA,然后CFA,如果可能也想学习法律,备战律考。
  • 欢迎爱学习的同学朋友关注,也欢迎大家交流。微信小号【ca_cea】

Next.js

Vercel最近推出了NextJs 13.4稳定版,作为服务客户端前端框架。

但我们更感兴趣的是,这将如何改变网络开发流程。😉

很多人会把它与Php进行比较,或者说“这就是我们10年前在Php中所做的”,答案有点复杂。

PHP实际上是一种服务器端编程语言,主要用于服务器端处理和生成动态web内容。PHP本身并不直接与前端交互,也不提供客户端交互。为了实现前端交互或实时更新,Ajax或JavaScript等附加技术通常与PHP结合使用。

PHP与现代JS框架/库?

React发布时,人们很高兴能学习并开发应用程序,因为我们现在可以制作一个单页应用程序;这对React来说是最好的处理方式。React的工作原理是让您在软件中编写逻辑,将完整的捆绑包发送到用户的浏览器。现在的问题来了,一旦你开始填充多个库,或者你的代码库开始增加,会发生什么?您的生产捆绑包规模也将开始增长,这将给用户带来难以发货的时间。

在我学习React的过程中,我承担了一个项目,并确保了它的生产准备就绪。最初,它是一个基本的React项目,没有任何额外的框架或库。然而,随着代码库的扩展和我集成外部库,捆绑包的大小逐渐增加。不幸的是,这导致了用户对移动设备明显迟缓的抱怨。

javascript

现在React引入了代码拆分的概念,在这里我们可以拆分这些捆绑包并延迟加载它们。好吧,我们可以通过代码拆分来解决捆绑问题&有人可能会说,我们可以将一些捆绑包或文件缓存到用户的机器上,这样它就不会下载回来,这非常适合解决速度慢或网站加载问题。

现在问题来了:如何管理JavaScript代码的处理?🤕 随着我们的代码库越来越大,它无疑会对JavaScript引擎的加载速度产生影响。当浏览器加载JavaScript文件时,引擎需要在执行代码之前解析和解释代码。代码库越大,引擎处理和加载JavaScript文件所需的时间就越多。

正如我们所知,JavaScript是一种专门设计为轻量级的单线程语言,允许它在用户的浏览器上平稳运行。基于web的方法不是提供庞大的软件包,而是提供轻量级的用户界面,同时将逻辑保留在后端。这是大公司将其软件过渡到基于网络的平台的令人信服的原因之一。

现在,当你开始用更复杂的逻辑和繁重的渲染来制作大量的UI代码,然后将其交付生产时,问题就来了。代码分割/缓存无法解决这个问题。您的单线程语言正在执行多项任务,如获取、数据呈现、逻辑处理等&所有这些都发生在用户的机器上。

PHP通过在服务器上预呈现大部分逻辑并将其发送到用户的机器来解决这个问题,这是它成为流行语言之一的一个很好的原因。然而,值得注意的是,PHP的主要优势在于服务器端处理和生成HTML内容。为了实现更具交互性和动态性的浏览器行为,JavaScript通常与PHP结合使用。JavaScript是一种客户端脚本语言,可以处理实时浏览器事件,操作DOM,并提供更具交互性的用户体验。react、angular或其他JS库/框架出现的一个很好的原因。用javascript编写,我们可以设计更多的交互式表单/网站/应用程序,让用户更满意😉.

但我们不只是来回走吗?

NextJs 13是如何解决这个问题的?

对于NextJs13,您编写的每个组件默认都是服务器组件。您可以通过在文件顶部将其写为“使用客户端”,使其成为客户端组件。

javascript

现在,根据NextJs的文档,我们应该将交互式组件作为客户端组件和其他到服务器的组件,就像上面提到的图像一样。

现在让我们讨论一下NextJs 13是如何解决上述问题的。客户端渲染,带来全新的可能性;意味着现在我们可以将重UI逻辑(如数据获取、预渲染和复杂的js逻辑)转移到服务器端,只将轻UI转移到用户浏览器。所有这些东西都可以用Javascript编写。

此外,Next.js 13通过其内置功能简化了开发过程,如服务器端生成(SSG)、服务器端渲染(SSR)和客户端渲染(CSR)。与早期版本的Next.js相比,这些功能可以无缝地结合到工作流程中,而不需要广泛的知识,从而产生更精简、更易于理解的代码。

我的最后结论

总之,Next.js 13通过为服务器端和客户端渲染提供全面的解决方案,在web开发方面取得了重大进步。通过利用JavaScript和服务器端处理的优势,它提供了更高效和交互式的用户体验,同时解决了与大型代码库相关的性能问题。

关于这个主题可以有多种观点,但我相信,在我们的学习过程中,我们无疑受益于PHP和RubyonRails等语言。

此外,我们可能会遇到某些UI库,这些库可能无法在Next13中正常工作,或者需要升级。尽管如此,我相信我们正在朝着正确的方向前进。

本文:【后端开发】Next.js 13.4:前端开发的游戏规则改变者! | 程序员云开发,云时代的程序员.

欢迎收藏  【全球IT瞭望】,【架构师酒馆】和【开发者开聊】.

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

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

相关文章

微服务实战系列之MQ

前言 从今天起,席卷北国的雪,持续了一整天,北京也不例外。这场意外的寒潮,把整个冬天渲染的格外cool。当然你可以在外面打雪仗、堆雪人、拉雪橇,也可以静坐屋内,来一场围炉煮茶的party。此刻,冬…

世界第一个语言不通的人是如何沟通的?

引言:语言是人类交流的重要工具,但在人类历史的某个时刻,肯定会有这样一位勇敢的先驱,他成为了世界上第一个语言不通的人。那么在他面临交流难题时,他是如何与他人沟通的呢?本文将对此进行探索。主体&#…

18 5G - NR物理层解决方案支持6G非地面网络中的高移动性

文章目录 非地面网络场景链路仿真参数实验仿真结果 非地面网络场景 链路仿真参数 实验仿真结果 Figure 5 && Figure 6:不同信噪比下的BER和吞吐量 变量 SISO 2x2MIMO 2x4MIMO 2x8MIMOReyleigh衰落、Rician衰落、多径TDL-A(NLOS) 、TDL-E(LOS)(a)QPSK (b)16…

HTML行内元素和块级元素的区别? 分别有哪些?

目录 一、行内元素和块级元素的区别二、行内元素和块级元素分别有哪些1、行内元素2、块级元素 一、行内元素和块级元素的区别 1、行内元素不会占据整行,在一条直线上排列,都是同一行,水平方向排列;    2、块级元素可以包含行内…

C语言—每日选择题—Day42

第一题 1. 下面程序输出的结果是&#xff08;&#xff09; #include <stdio.h> int main () {int x;x printf("I See, Sea in C");printf("x%d" , x); } A&#xff1a;2 B&#xff1a;随机值 C&#xff1a;都不是 D&#xff1a;15 答案及解析 D p…

人工智能:机器与人类的对决

一、引言 随着科技的飞速发展&#xff0c;人工智能已经逐渐渗透到我们生活的方方面面。从智能手机到自动驾驶汽车&#xff0c;从语音识别到机器翻译&#xff0c;人工智能已经成为我们生活中不可或缺的一部分。然而&#xff0c;随着人工智能的不断演进&#xff0c;人们开始担心…

数据结构——队列

目录 一、队列的定义 二、队列的实现 1. 队列的顺序存储结构 1.1. 顺序队 1. 创建顺序队 2. 删除顺序队 3. 判断队列是否为空 4. 判断队列是否已满 5. 入队 6. 出队 7. 获取队列长度 8. 获取队首元素 1.2. 环形队 1. 创建环形队 2. 删除环形队 3. 判断环形队列…

LeetCode 每日一题 Day 12 || BFS

2415. 反转二叉树的奇数层 给你一棵 完美 二叉树的根节点 root &#xff0c;请你反转这棵树中每个 奇数 层的节点值。 例如&#xff0c;假设第 3 层的节点值是 [2,1,3,4,7,11,29,18] &#xff0c;那么反转后它应该变成 [18,29,11,7,4,3,1,2] 。 反转后&#xff0c;返回树的根…

每日一题SQL

以下题目来源微信公众号【SQL数据库开发】 1、编写一个 SQL 查询来实现分数排名。如果两个分数相同&#xff0c;则两个分数排名&#xff08;Rank&#xff09;相同。请注意&#xff0c;平分后的下一个名次应该是下一个连续的整数值。换句话说&#xff0c;名次之间不应该有“间隔…

主卧卫生间门对着床,怎么设计才能让你好好睡觉呢?福州中宅装饰,福州装修

主卧卫生间门对着床&#xff0c;一抬眼就能和卫生间来一个对视&#xff0c;心里很膈应&#xff0c;那么怎么解决这个问题呢&#xff1f; 1️⃣门改方向 首先&#xff0c;你可以考虑把卫生间门的开门方向改一下。如果卫生间门是向外开的&#xff0c;你可以考虑把门换成向内开的…

ChatGPT热门项目

1.智能GPT 项目地址&#xff1a;智能GPT&#xff1a;你只要提供OpenAI的API Key&#xff0c;那么它就可以根据你设定的目标&#xff0c;采用Google搜索、浏览网站、执行脚本等方式 主要语言&#xff1a;Python 推荐理由&#xff1a;这是由开发者Significant Gravitas推出的项目…

2023-12-14 使用Qt画一条曲线(AI辅助)

点击 <C 语言编程核心突破> 快速C语言入门 使用Qt画一条曲线 前言一、Qchart简介二、代码总结 前言 要解决问题: 有一个函数, 生成一些点, 想画一条曲线. 想到的思路: 这个用Qchart比较简单. 其它的补充: 需要稍许配置 一、Qchart简介 QChart是Qt中的一个图表控件&a…

常用的系统存储过程

exec sp_databases ---列出服务器上所有的数据库信息 exec sp_help student ---查看学生表中的所有信息 exec sp_renamedb Myschool,MySchools ---更改数据库的名称 需要两个参数 一个是原来数据库的名称 一个是要改为的数据库名称 消息框显示&#xff1a;数据库 名称 MyS…

【SpringBoot】Starter的使用与案例讲解

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《SpringBoot》。&#x1f3af;&#x1f3af; &…

JVM调优:参数(学习笔记)

一、jvm的运行参数 标准参数 -help、-version、-D参数 jvm的标准参数&#xff0c;一般都是很稳定的&#xff0c;在未来的JVM版本中不会改变&#xff0c;可以使用java -help 检索出所有的标准参数。 通过以下命令查看&#xff1a; 命令&#xff1a;java -help 可以看到我们经常…

vue2项目vue-qrcode-reader 扫一扫二维码插件

vue2项目 vue-qrcode-reader 扫一扫二维码插件 问题所在解决办法成功展示 问题所在 今天在引导师弟做扫二维码功能&#xff0c;发现通过npm install --save vue-qrcode-reade安装死活就是报错TypeError: Object...) is not a function 解决办法 百度了很多大牛的博客&#…

uniCloud(一) 新建项目、初始化服务空间、云对象访问测试

一、新建一个带有unicloud 二、创建一个服务空间 1. 右键uniCloud&#xff0c;关联云服务空间 我当前没有服务空间&#xff0c;需要新建一个服务空间&#xff0c;之后将其关联。初始化服务空间需要的时间有点长 服务空间初始化成功后&#xff0c;刷新HBuilder&#xff0c;勾选…

0012Java安卓程序设计-ssm记账app

文章目录 **摘要**目 录系统设计5.1 APP端&#xff08;用户功能&#xff09;5.2后端管理员功能模块开发环境 编程技术交流、源码分享、模板分享、网课分享 企鹅&#x1f427;裙&#xff1a;776871563 摘要 网络的广泛应用给生活带来了十分的便利。所以把记账管理与现在网络相…

CanEasy多场景应用,让汽车总线测试更简单

来源&#xff1a;虹科汽车电子 虹科分享 | CanEasy多场景应用&#xff0c;让汽车总线测试更简单 原文链接&#xff1a;https://mp.weixin.qq.com/s/ojic4xfVTLbxXcKlJMGQZw 欢迎关注虹科&#xff0c;为您提供最新资讯&#xff01; 导读 CanEasy是一个基于Windows的总线工具&…

ChatGPT对话为什么不用WebSocket而使用EventSource?

文章目录 1. 引言2. WebSocket和EventSource简介2.1 WebSocket2.2 EventSource 3. ChatGPT对话系统的特点4. EventSource的优势4.1 简单易用4.2 容错性强4.3 兼容性良好 5. 为何选择EventSource而非WebSocket&#xff1f;5.1 单向通信模式5.2 长轮询模式5.3 简化部署和维护 6. …