写点什么

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

  • 2022-11-23
    北京
  • 本文字数:2008 字

    阅读完需:约 7 分钟

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

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

 

Next.js 团队在最近的主题演讲中解释了 Next.js 最新版本背后的逻辑。

 

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

 

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

 

动态也意味着要同时处理两组运行时 API,在服务器端没有 JS,而浏览器端有 Web 标准 API。

 

想要动态,通常只在一个单一的区域,其伸缩性取决于遗留、静态和 CDN 缓存。

 

我们发布 Next.js 13,让你们能够实现无限制的动态。

 

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

 

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

 

改进后的 Link 组件不再需要锚标记(即<a>)作为子元素。现在,下面的锚链接 Next.js 代码是有效的:

 

// Next.js 13: `<Link>` always renders `<a>`<Link href="/about">  About</Link>
复制代码

 

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

 

@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、TypeScript、JSX、CSS 等都提供了开箱即用的支持。

 

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

 

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

 

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

 

此外,对于大多数项目来说,带有esbuildVite已经足够快了,它提供了无与伦比的体验。

 

你还应该知道的是,Vercel 有意希望通过在云端远程缓存构建来赚钱。

 

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

 

新的路由器支持。

 

1. 布局:在路由之间轻松共享 UI,同时保留状态,避免昂贵的重新渲染。

2. Server Component:将服务器优先作为大多数动态应用程序的默认设置。

3. 流渲染:渲染时在 UI 单元中显示即时加载状态和流。

4. 数据抓取:async 的 Server Component 和扩展的 fetchAPI 支持组件级抓取。

 

要了解更多细节,可以查看发布说明

 

虽然有很多开发者对该版本做出了积极的反应,但一位开发者指出

 

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

 

另一名开发者对一些新特性提出了警告:

 

Next.js 涵盖了 React 团队正在研究的一些实验性的、还不稳定的 React 特性,比如服务器端组件,或者在这些服务器端组件中支持 async/await。

 

因此,Next.js 也包含了 React 的一些未来的概念。但你需要知道这些是不稳定、尚未完成的 API,它们仍在研究和实现当中。

 

当你尝试在 Beta 版的文档中搜索如何使用新的/app 文件夹和构建 Next.js 应用程序的新方法时,你会发现许多相关特性仍然缺失、未完成、可能发生变更等警告和注释。

 

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

 

原文链接


https://www.infoq.com/news/2022/11/nextjs-13-released/


相关阅读:


前端又开撕了:用 Rust 写的 Turbopack,比 Vite 快 10 倍?


尤雨溪向 React 推荐自己研发的 Vite,网友:用第三方工具没有任何意义

2022-11-23 13:177186

评论

发布
暂无评论
发现更多内容

海外云手机的三大实用性

Ogcloud

云手机 海外云手机

云边协同的 RTC 如何助力即构全球实时互动业务实践

阿里巴巴云原生

阿里云 云原生

独立站运营应该知道的十佳 WordPress SEO 插件

九凌网络

RocketMQ 中冷热分离的随机索引模块详解

阿里巴巴云原生

阿里云 RocketMQ 云原生

SD-WAN满足企业不断增长的网络需求

Ogcloud

SD-WAN SD-WAN组网 SD-WAN服务商

网络安全中的人工智能:保护未来数字世界的利剑

快乐非自愿限量之名

人工智能 低代码 AI技术 智能化

Python程序员常用的IDE和其它开发工具

不在线第一只蜗牛

Python ide 编程语言 开发语言

阿里云 ACK One 新特性:多集群网关,帮您快速构建同城容灾系统

阿里巴巴云原生

阿里云 容器 云原生

自动化的10项准备工作

FunTester

模型服务网格:云原生下的模型服务管理

阿里巴巴云原生

阿里云 云原生 服务网格

2023 IoTDB Summit:北京城建智控科技股份有限公司高级研发主管刘喆《IoTDB 在城市轨道交通综合监控系统中的应用》

Apache IoTDB

国内大模型打假胜诉第一案;苹果取代三星成为 2023 年智能手机销售冠军丨 RTE 开发者日报 Vol.128

声网

低代码开发让量化交易插上翅膀

EquatorCoco

低代码 低代码开发 量化交易

2024年要想做好谷歌SEO,你需要了解这些新趋势!

九凌网络

典型场景解析|PolarDB分布式版如何支撑SaaS多租户?

阿里云瑶池数据库

数据库 阿里云 SaaS 多租户

云原生场景下,AIGC 模型服务的工程挑战和应对

阿里巴巴云原生

阿里云 云原生

无需改动代码:将传统应用平滑迁移到云端

北京好雨科技有限公司

Kubernetes 容器 #云原生

阿里巴巴按关键字搜索商品 API (alibaba.item_search)在电商中的需求

技术冰糖葫芦

API

拍卖直播APP开发公司选择,延期赔付合同承诺无隐藏费用

软件开发-梦幻运营部

低代码与智能化办公:解锁工作效率的新纪元

不在线第一只蜗牛

人工智能 低代码 数字化 智能化 智能办公

试用活动 300上车 年中大促

开源物联卡管理平台-设备管理

物联网 IoT eSIM安全 java 技术提升

聚道云连接器实现泛微OA与金蝶EAS对接,企业实现数字化转型

聚道云软件连接器

案例分享

强化加密生态合规性:Token Explorer 助你一臂之力!

Footprint Analytics

区块链 Token

部署SD-WAN需要哪些设备和软件?

Ogcloud

SD-WAN SD-WAN组网 SD-WAN服务商 异地组网

IPQ6010 and IPQ8072:OFDMA support in Wifi6 Solution

wallyslilly

IPQ6010 IPQ8072

阿里巴巴按关键字搜索商品API(alibaba.item_search):如何保证阿里巴巴按关键字搜索商品API返回的商品信息的准确性

技术冰糖葫芦

API 编排

游戏字体渲染

游戏开发 计算机图形学 渲染 字体

15款Java程序员必备的开发工具

快乐非自愿限量之名

Java jdk web开发

ETLCloud详解,如何实现最佳实践及问题排查

RestCloud

ETL 数据集成

Next.js 13新的实验性特性,实现App“动态无限制”_大前端_Bruno Couriol_InfoQ精选文章