立即领取|华润集团、宁德核电、东风岚图等 20+ 标杆企业数字化人才培养实践案例 了解详情
写点什么

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:176933

评论

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

深度学习公式推导(1):神经元的数学公式

老崔说架构

开源一夏 | 为什么应该参与开源项目

baiyutang

开源 架构 微服务 开源文化 CloudWeGo

《游戏机图鉴》:发展、继承、崩溃、复兴,游戏机的前世今生

图灵教育

明源云参加2022数字化转型发展高峰论坛并获多项殊荣

科技热闻

【Metaverse系列二】3D引擎知多少

ThingJS数字孪生引擎

元宇宙

阿里SpringBoot实战手册横空出世!从此不再是易学难精

冉然学Java

Java 编程 程序员 Spring Boot 构架

人非圣贤孰能无过,Go lang1.18入门精炼教程,由白丁入鸿儒,Go lang错误处理机制EP11

刘悦的技术博客

Go Go web go语言 Go 语言

Github又爆神作!野生程序员自学SpringCloudAlibaba必备学习笔记开源(阿里2022最新版)

Java永远的神

Java 程序员 面试 微服务 SpringCloud

从这 5 个 DevOps “恐怖故事”,我们能学到什么?

SoFlu软件机器人

水滴低代码搭建——6倍提效,新品首发素材审核系统实践之路

京东科技开发者

CMS 低代码 表单 素材 低代码开发

影响全彩LED显示屏质量的几个因素

Dylan

LED显示屏 全彩LED显示屏 led显示屏厂家

49张图带领小伙伴们体验一把 Flowable-UI

江南一点雨

spring springboot workflow flowable

开源一夏 | 使用 HTML、CSS 和 JavaScript 的简单模拟时钟

海拥(haiyong.site)

开源 8月月更

数据说|数字经济,山东16市谁最“炫”?排行榜来了

易观分析

数字经济 山东

Redis API——List功能实践与性能测试【Go版】

FunTester

华能 + Alluxio | 数字化浪潮下跨地域数据联邦访问与分析

Alluxio

数字化 国产化 东数西算 大数据 开源 数据编排

兆骑科创创新创业服务平台,双创活动承办,企业落地孵化

兆骑科创凤阁

深入浅出分布式事务的实现原理

清风

面试 分布式事务 后端 原理 事务

华为云SparkRTC面向低时延、大通量传输业务的技术探索

华为云开发者联盟

云计算 后端 华为云

开源图编辑库 NebulaGraph VEditor 的设计思路分享

NebulaGraph

数据库 图数据库 知识图谱 NebulaGraph

应用实例分析——图像检索

Geek_e369a5

图像搜索

得物黑科技|AR测量脚型,解决尺码烦恼

得物技术

AR

首届腾讯云大数据峰会开幕在即,现场将发布全新一代产品矩阵

科技热闻

知识管理体系在企业中的作用

Baklib

字节跳动基于ClickHouse优化实践之Upsert

字节跳动数据平台

OLAP Clickhouse 数据库优化 数据库开发 数据库·

如何成就更高远控帧率和流畅度?向日葵SADDC算法浅析

贝锐

算法 视频解码 视觉策略 远程控制

兆骑科创赛事承办平台,高层次人才引进,创业服务平台

兆骑科创凤阁

QCN9074, 802.11ax,Wallys, 4x4 MU-MIMO, 6GHz, wifi6E,

wallys-wifi6

QCN9074

需求子任务的数据管理提效实践

转转技术团队

开发工具 测试赋能

构建元宇宙概念NFT商城系统——艺术数字藏品平台源码部署

开源直播系统源码

软件开发 数字藏品软件开发 数字藏品源码出售

阿里IM技术分享(八):深度解密钉钉即时消息服务DTIM的技术设计

JackJiang

架构设计 即时通讯 im开发

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