热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Next.js13提供新的实验性特性,实现App“动态无限制”

作者|BrunoCouriol译者|明知山策划|丁晓昀最近,Next.js大会介绍了Next.js13,一个ReactAp

作者 | Bruno Couriol

译者 | 明知山

策划 | 丁晓昀

最近,Next.js 大会介绍了 Next.js 13,一个 React App 框架的最新版本方正字体库打包。Next.js 13 希望通过提供创新的特性帮助开发人员开发出“动态无限制”的 App,其中许多特性仍处于 alpha 或 beta 阶段。新特性对编译器、路由和渲染基础设施进行了更新,并改进了组件工具包。

Next.js 团队在最近的主题演讲中解释方正字体库打包了 Next.js 最新版本背后的逻辑:

Next.js 13提供新的实验性特性,实现App“动态无限制”

Next.js 最初是一个用于构建动态服务器端渲染网站的 React 框架方正字体库打包。在设计 Next.js 时,我们没有针对单页应用进行优化,而是考虑帮助开发团队构建复杂的应用程序。但是,动态总是伴随着许多限制。

动态意味着要以高成本、始终在线的基础设施为代价,需要手动配置和大量的运维方正字体库打包

动态也意味着要同时处理两组运行时 API,在服务器端没有 JS,而浏览器端有 Web 标准 API方正字体库打包

你想要变得动态,但通常只在一个单一的区域,其伸缩性取决于遗留、静态和 CDN 缓存方正字体库打包

今天,我们发布了 Next.js 13,让你们能够实现无限制的动态方正字体库打包

Next.js 最初是一个用于构建动态服务器端渲染网站的 React 框架方正字体库打包。在设计 Next.js 时,我们没有针对单页应用进行优化,而是考虑帮助开发团队构建复杂的应用程序。但是,动态总是伴随着许多限制。

动态意味着要以高成本、始终在线的基础设施为代价,需要手动配置和大量的运维方正字体库打包

动态也意味着要同时处理两组运行时 API,在服务器端没有 JS,而浏览器端有 Web 标准 API方正字体库打包

你想要变得动态,但通常只在一个单一的区域,其伸缩性取决于遗留、静态和 CDN 缓存方正字体库打包

今天,我们发布了 Next.js 13,让你们能够实现无限制的动态方正字体库打包

新版本对工具包进行了改进(改进的 Link 组件、新的 Image 组件和新的 @next/font 库)方正字体库打包。额外的 alpha/beta 版特性提供了未来的服务器端渲染预览,正如 Vercel 所设想的那样。

新的 Image 组件旨在改善用户体验,采用了本地延迟加载,减少了客户端 Java 交付,没有了布局漂移方正字体库打包。在开发者体验方面,新组件力求更容易设置样式和配置。

改进后的 Link 组件不再需要一个锚标记(即)作为子元素方正字体库打包。现在,下面的锚链接 Next.js 代码是有效的:

展开全文

@next/font(在 beta 版中发布)将自动优化字体(包括自定义字体),并删除外部网络请求,以提高隐私性和性能方正字体库打包。文档中提到的细节:

@next/font 包含了内置的自动自托管任意字体文件,你可以在零布局漂移的情况下加载网页字体,这要得益于使用了底层的 size-adjust CSS 属性方正字体库打包

@next/font 包含了内置的自动自托管任意字体文件,你可以在零布局漂移的情况下加载网页字体,这要得益于使用了底层的 size-adjust CSS 属性方正字体库打包

Next.js 13 引入了 Turbopack(在 alpha 版中发布),作为基于 Rust 的 Webpack 替代方案,为开发人员带来数量级的速度改进方正字体库打包。与之前的 Parcel 一样,Turbopack 可以增量构建和捆绑源文件。Next.js 团队宣称:

Turbopack 只打包开发所需的最小资产文件,因此启动速度非常快方正字体库打包。对于一个包含 3000 个模块的应用程序,Turbopack 启动只需要 1.8 秒,而 Vite 耗时 11.4 秒,Webpack 则需要 16.5 秒。

Turbopack 对 Server Component、Type、JSX、CSS 等都提供了开箱即用的支持方正字体库打包

Turbopack 只打包开发所需的最小资产文件,因此启动速度非常快方正字体库打包。对于一个包含 3000 个模块的应用程序,Turbopack 启动只需要 1.8 秒,而 Vite 耗时 11.4 秒,Webpack 则需要 16.5 秒。

Turbopack 对 Server Component、Type、JSX、CSS 等都提供了开箱即用的支持方正字体库打包

Vite 的作者尤雨溪最近对 Vite 和 Next/Turbo 进行了基准测试方正字体库打包。他发现,当使用类似的配置执行基准测试时,二者的速度是相近的。截至本文发布,Vercel 的基准测试方法和结果也已经发布,纠正了一些错误,但这仍然是一个存在争议的话题。

虽然开发者体验的改善得到了许多开发者的积极评价方正字体库打包,但一位开发者仍然指出了可能存在的缺点和局限性:

因为存在一个庞大的 Webpack 插件生态系统,这可能会使现有应用程序的迁移变得非常困难方正字体库打包。Vercel 可能需要依靠社区的贡献开发某种插件系统,这可能很困难,因为像我这样的 Java 开发人员愚蠢又懒惰,不愿意学习 Rust。

此外,对于大多数项目来说,带有 esbuild 的 Vite 已经足够快了,它提供了无与伦比的开发者体验方正字体库打包

你还应该知道的是,Vercel 有意希望通过在云端远程缓存构建来赚钱方正字体库打包

因为存在一个庞大的 Webpack 插件生态系统,这可能会使现有应用程序的迁移变得非常困难方正字体库打包。Vercel 可能需要依靠社区的贡献开发某种插件系统,这可能很困难,因为像我这样的 Java 开发人员愚蠢又懒惰,不愿意学习 Rust。

此外,对于大多数项目来说,带有 esbuild 的 Vite 已经足够快了,它提供了无与伦比的开发者体验方正字体库打包

你还应该知道的是,Vercel 有意希望通过在云端远程缓存构建来赚钱方正字体库打包

Next.js 13 还对路由和渲染基础设施进行了重大更改,其中一些直接与 React 核心团队合作,以便更好地利用 React 的 Server Component、Suspense 和流方正字体库打包。文档中提到:

新的路由器支持:

1.布局:在路由之间轻松共享 UI,同时保留状态,避免昂贵的重新渲染方正字体库打包

2.Server Component:将服务器优先作为大多数动态应用程序的默认设置方正字体库打包

3.流:渲染时在 UI 单元中显示即时加载状态和流方正字体库打包

4.数据抓取:async 的 Server Component 和扩展的 fetchAPI 支持组件级抓取方正字体库打包

新的路由器支持:

1.布局:在路由之间轻松共享 UI,同时保留状态,避免昂贵的重新渲染方正字体库打包

2.Server Component:将服务器优先作为大多数动态应用程序的默认设置方正字体库打包

3.流:渲染时在 UI 单元中显示即时加载状态和流方正字体库打包

4.数据抓取:async 的 Server Component 和扩展的 fetchAPI 支持组件级抓取方正字体库打包

要了解更多细节,可以查看发布说明方正字体库打包。虽然有很多开发者对该版本做出了积极的反应,但一位开发者指出:

Next.js 13提供新的实验性特性,实现App“动态无限制”

与如何使用 Server Component 相关的规则可能不直观,也很难理解方正字体库打包。React 本来就有过于复杂的负面名声,我不认为这会有带来什么帮助。在同一个代码库中处理客户端 JS 和 Node 运行时已经有点麻烦了,但在旧范式中,至少两端之间只有一个交互点(getServerSideProps/getStaticProps),而现在可以出现在每个组件边界上。

与如何使用 Server Component 相关的规则可能不直观,也很难理解方正字体库打包。React 本来就有过于复杂的负面名声,我不认为这会有带来什么帮助。在同一个代码库中处理客户端 JS 和 Node 运行时已经有点麻烦了,但在旧范式中,至少两端之间只有一个交互点(getServerSideProps/getStaticProps),而现在可以出现在每个组件边界上。

另一名开发者对一些新特性提出方正字体库打包了警告:

Next.js 涵盖了 React 团队正在研究的一些实验性的、还不稳定的 React 特性,比如服务器端组件,或者在这些服务器端组件中支持 async/await方正字体库打包。因此,Next.js 也包含了 React 的一些未来的概念。但更为重要的是,我们需要知道我们谈论的是不稳定、尚未完成的 API,它们仍在研究和实现当中。因此,当你尝试在 beta 版的文档中搜索如何使用新的 /app 文件夹和构建 Next.js 应用程序的新方法时,你会发现许多关于特性仍然缺失、未完成、可能发生变更等警告和注释。

Next.js 涵盖了 React 团队正在研究的一些实验性的、还不稳定的 React 特性,比如服务器端组件,或者在这些服务器端组件中支持 async/await方正字体库打包。因此,Next.js 也包含了 React 的一些未来的概念。但更为重要的是,我们需要知道我们谈论的是不稳定、尚未完成的 API,它们仍在研究和实现当中。因此,当你尝试在 beta 版的文档中搜索如何使用新的 /app 文件夹和构建 Next.js 应用程序的新方法时,你会发现许多关于特性仍然缺失、未完成、可能发生变更等警告和注释。

Next.js 基于 MIT 开源许可方正字体库打包。欢迎开发者为 Next.js GitHub 代码库做出贡献,并遵循 Next.js 贡献指南和行为准则。

原文链接:

/

和Rust一样好方正字体库打包,编程更安全?三年实践、员工态度反转,英伟达用 SPARK 换掉 C

反转!马斯克正在求被裁工程师复职方正字体库打包,尤其是Android和iOS开发

苹果暂停除研发外岗位招聘方正字体库打包,市值一夜蒸发7160亿元;腾讯和联通合资公司因为云计算;国美停发工资,要求员工签理解承诺书|Q资讯

阿里巴巴开源下一代云原生网关Higress:基于Envoy方正字体库打包,支持Nginx Ingress零成本快速迁移


推荐阅读
  • 一句话解决高并发的核心原则
    本文介绍了解决高并发的核心原则,即将用户访问请求尽量往前推,避免访问CDN、静态服务器、动态服务器、数据库和存储,从而实现高性能、高并发、高可扩展的网站架构。同时提到了Google的成功案例,以及适用于千万级别PV站和亿级PV网站的架构层次。 ... [详细]
  • 目录结构如下:Nginx基础知识NginxHTTP服务器的特色及优点Nginx的主要企业功能Nginx作为web服务器的主要应用场景包括:Nginx的安装安装环境 ... [详细]
  • 高并发网站架构的核心原则其实就一句话“把所有的用户访问请求都尽量往前推“,即:能缓存在用户电脑本地的,就不要让他去访问CDN。能缓存CDN服务器上的,就不要让CDN去访问源(静态服 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • 摘要:本文中,我们将进一步理解微服务架构的核心要点和实现原理,为读者的实践提供微服务的设计模式,以期让微服务在读者正在工作的 ... [详细]
  • 导读:今天编程笔记来给各位分享关于php动态扩展怎么加载的相关内容,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: ... [详细]
  • jquery popupDialog 使用 加载jsp页面办法
    php教程|PHP开发jqueryphp教程-PHP开发如下所示:软件市场源码,vsCode字体不变,ubuntu的所有版本,taotomcat,sqlite连接php,个人域名服 ... [详细]
  • socket.io是个基于node.js的快平台实时通讯框架。只用不到10行代码,就可以搭建一个简单的多人实时聊天室。先来看看运行后的效果:socket.io多人聊天室只要简单几 ... [详细]
  • Shiro 简单了解
    Shiro简单了解简单用过SpringSecurity安全框架后,再试试另一个安全框架——Shiro。1.Shiro简介ApacheShiro是一个强大且易用的Java安全框架:S ... [详细]
  • CentOS7.2详细安装步骤(二)
    7)语言设置(可以在上一个主界面进行设置,这里不用再次设置)8)SECURITY设置(安全设置)选择default(默认的)策略就可以,通过进行选择,单击完成即可Default#默 ... [详细]
  • ASP.NET使用Ajax如何返回Json对象的示例方法介绍
    这篇文章主要介绍了ASP.NET使用Ajax返回Json对象的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下一、 ... [详细]
  • 情况说明最近打开Github经常会遇到用户头像或者仓库中的图片无法预览。F12打开控制台也能看到一堆报错信息。解决方法找到hosts文件Win:C:\Windows\Sys ... [详细]
  • 搭建Windows Server 2012 R2 IIS8.5+PHP(FastCGI)+MySQL环境的详细步骤
    本文详细介绍了搭建Windows Server 2012 R2 IIS8.5+PHP(FastCGI)+MySQL环境的步骤,包括环境说明、相关软件下载的地址以及所需的插件下载地址。 ... [详细]
  • 浏览器中的异常检测算法及其在深度学习中的应用
    本文介绍了在浏览器中进行异常检测的算法,包括统计学方法和机器学习方法,并探讨了异常检测在深度学习中的应用。异常检测在金融领域的信用卡欺诈、企业安全领域的非法入侵、IT运维中的设备维护时间点预测等方面具有广泛的应用。通过使用TensorFlow.js进行异常检测,可以实现对单变量和多变量异常的检测。统计学方法通过估计数据的分布概率来计算数据点的异常概率,而机器学习方法则通过训练数据来建立异常检测模型。 ... [详细]
  • 本文介绍了Composer依赖管理的重要性及使用方法。对于现代语言而言,包管理器是标配,而Composer作为PHP的包管理器,解决了PEAR的问题,并且使用简单,方便提交自己的包。文章还提到了使用Composer能够避免各种include的问题,避免命名空间冲突,并且能够方便地安装升级扩展包。 ... [详细]
author-avatar
亮我mc踢弯的
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有