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

news2024/11/27 6:18:29

自我介绍

  • 做一个简单介绍,酒架年近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.coloradmin.cn/o/1300791.html

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

相关文章

云计算大屏,可视化云计算分析平台(云实时数据大屏PSD源文件)

大屏组件可以让UI设计师的工作更加便捷,使其更高效快速的完成设计任务。现分享可视化云分析系统、可视化云计算分析平台、云实时数据大屏的大屏Photoshop源文件,开箱即用! 若需 更多行业 相关的大屏,请移步小7的另一篇文章&#…

浅析不同NAND架构的差异与影响

SSD的存储介质是什么,它就是NAND闪存。那你知道NAND闪存是怎么工作的吗?其实,它就是由很多个晶体管组成的。这些晶体管里面存储着电荷,代表着我们的二进制数据,要么是“0”,要么是“1”。NAND闪存原理上是一…

TCP为什么可靠之“重传机制”

TCP重传机制 TCP针对数据包丢失的情况,会通过重传机制解决,包括像超时重传、快速重传、选择确认SACK、D-SACK 超时重传 TCP会设置一个定时器,如果在发送数据之后的规定时间内,没有收到对方的ACK报文,就会触发重新发…

基于SpringBoot+JSP+Mysql宠物领养网站+协同过滤算法推荐宠物(Java毕业设计)

大家好,我是DeBug,很高兴你能来阅读!作为一名热爱编程的程序员,我希望通过这些教学笔记与大家分享我的编程经验和知识。在这里,我将会结合实际项目经验,分享编程技巧、最佳实践以及解决问题的方法。无论你是…

基于JavaWeb+SSM+Vue微信小程序的科创微应用平台系统的设计和实现

基于JavaWebSSMVue微信小程序的科创微应用平台系统的设计和实现 源码获取入口Lun文目录前言主要技术系统设计功能截图订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 源码获取入口 Lun文目录 1系统概述 1 1.1 研究背景 1 1.2研究目的 1 1.3系统设计思想 1 2相关技术…

Unity中Shader黑白阀值后处理效果

文章目录 前言一、我们先来PS看一下黑白阀值的效果二、使用step(a,b)函数实现效果三、实现脚本控制黑白阀值1、在Shader属性面板定义控制阀值变量2、把step的a改为_Value3、在后处理脚本设置公共成员变量,并且设置范围为(0,1)4、在Graphics.B…

Echarts 环形图配置 环形半径(radius) 修改文本位置(label) 南丁格尔图(roseType)

数据 const data [{ name: 华为, value: 404 },{ name: 小米, value: 800 }, { name: 红米, value: 540 }, { name: 苹果, value: 157 }]设置南丁格尔图 roseType: area设置标签位置 label: {show: true,position: center // center 中间展示 outside 外侧展示 inside 内侧…

案例026:基于微信小程序的原创音乐系统的设计与实现

文末获取源码 开发语言:Java 框架:SSM JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序…

Vue 纯css方式实现自定义进度条组件

组件源码 <template><div><div class"bar" :style"{--precent: precent}"></div></div></template><script>export default {name: ProgressBar,props: {precent:{},},data() {return {}},methods: {}}</sc…

GoLong的学习之路,进阶,微服务之使用,RPC包(包括源码分析)

今天这篇是接上上篇RPC原理之后这篇是讲如何使用go本身自带的标准库RPC。这篇篇幅会比较短。重点在于上一章对的补充。 文章目录 RPC包的概念使用RPC包服务器代码分析如何实现的&#xff1f;总结Server还提供了两个注册服务的方法 客户端代码分析如何实现的&#xff1f;如何异步…

kali linux无法使用root打开vlc观看视频的解决办法

kali linux陆续装了几个视频播放器&#xff0c;都比较不够友好&#xff0c;无奈安装vlc,vlc安装方法就是 apt install vlc这个没什么好说的&#xff0c;多数源都集成这个著名软件了&#xff0c;kali linux打开闪退&#xff0c;终端下运行出现&#xff1a; VLC is not supposed…

【数学建模】《实战数学建模:例题与讲解》第七讲-Bootstrap方法(含Matlab代码)

【数学建模】《实战数学建模&#xff1a;例题与讲解》第七讲-Bootstrap方法&#xff08;含Matlab代码&#xff09; 基本概念习题7.31. 题目要求2.解题过程3.程序4.结果 习题7.51. 题目要求2.解题过程3.程序4.结果 如果这篇文章对你有帮助&#xff0c;欢迎点赞与收藏~ 基本概念…

软件设计师——计算机网络(二)

&#x1f4d1;前言 本文主要是【计算机网络】——软件设计师——计算机网络的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 &#x1…

Unity DOTS中的baking(一) Baker简介

Unity DOTS中的baking&#xff08;一&#xff09; Baker简介 baking是DOTS ECS工作流的一环&#xff0c;大概的意思就是将原先Editor下的GameObject数据&#xff0c;全部转换为Entity数据的过程。baking是一个不可逆的过程&#xff0c;原先的GameObject在运行时不复存在&#x…

漏刻有时百度地图API实战开发(8)关键词输入检索获取经纬度坐标和地址

在百度地图中进行关键词输入检索时&#xff1a; 在地图页面顶部的搜索框中输入关键词。点击搜索按钮或按下回车键进行搜索。地图将显示与关键词相关的地点、商家、景点等信息。可以使用筛选和排序功能来缩小搜索范围或更改搜索结果的排序方式。点击搜索结果中的地点或商家&…

软件工程考试复习

第一章、软件工程概述 &#x1f31f;软件程序数据文档&#xff08;考点&#xff09; &#x1f31f;计算机程序及其说明程序的各种文档称为 &#xff08; 文件 &#xff09; 。计算任务的处理对象和处理规则的描述称为 &#xff08; 程序 &#xff09;。有关计算机程序功能、…

Spring Cloud Gateway + Nacos + LoadBalancer实现企业级网关

1. Spring Cloud Gateway 整合Nacos、LoadBalancer 实现企业级网关 前置工作&#xff1a; 创建 SpringBoot 多模块项目创建网关&#xff08;gateway-service&#xff09;、用户&#xff08;user-service&#xff09;模块用户模块添加 Nacos discovery 支持以及 Spring Web&am…

一键抠图2:C/C++实现人像抠图 (Portrait Matting)

一键抠图2&#xff1a;C/C实现人像抠图 (Portrait Matting) 目录 一键抠图2&#xff1a;C/C实现人像抠图 (Portrait Matting) 1. 前言 2. 抠图算法 3. 人像抠图算法MODNet &#xff08;1&#xff09;模型训练 &#xff08;2&#xff09;将Pytorch模型转换ONNX模型 &…

【IDEA】IntelliJ IDEA中进行Git版本控制

本篇文章主要记录一下自己在IntelliJ IDEA上使用git的操作&#xff0c;一个新项目如何使用git进行版本控制。文章使用的IDEA版本 IntelliJ IDEA Community Edition 2023.3&#xff0c;远程仓库为https://gitee.com/ 1.配置Git&#xff08;File>Settings&#xff09; 2.去Git…

Java网络编程——安全网络通信

在网络上&#xff0c;信息在由源主机到目标主机的传输过程中会经过其他计算机。在一般情况下&#xff0c;中间的计算机不会监听路过的信息。但在使用网上银行或者进行信用卡交易时&#xff0c;网络上的信息有可能被非法分子监听&#xff0c;从而导致个人隐私的泄露。由于Intern…