前端周热点123：TanStack Router, Gatsby, Remix, Next.js, React-Three-Fiber, Astro, Expo

大家好！ 这周举行了Jamstack Conf，我们为此发布了一些不错的公告：比如 Tanstack Router、Gatsby 5或是它们年度调查的结果。

Expo发布了高超的SDK 47。第一个试用版本的 React-Native 0.71在部分安卓上有一些构建问题。

Next.js以及React-Natice现在默认使用TypeScript来开发他们的新app。

💡 在Twitter上订阅 - visual format 🎨

---

⚛️ React

TanStack Router

Tanner公布了她们的新项目：一个百分之百类型安全、于框架无关的路由。一些令人印象深刻的功能，包括：

• URL 状态管理
• 内置缓存
• 搜索参数模式和严重（Schema/Validation）
• 自动预加载
• Loaders/Actions
• 异步元素 + 代码拆分

猛地一看，像是受到了Remix或者是React_Router的影响，但是它的API很不一样，它没有基于JSX，这可能有助于使方案不受框架影响以及类型安全。目前只有React适配器，而且文档也没有完成，不过这很值得期待。

🔗 Useful links:

• 🐦 Tanner Linsley launches his project on Twitter with a great trailer!
• 🐦 Ryan Florence could use some inspiration from his work to improve Remix type-safety.

---

Gatsby 5: The Fastest Gatsby Yet

Gatsby 5.0 近期正式发布了。它包括 Gateby Slice API，它可以在修改布局元素时（header，footer等）提升构建速度，以及在测试版本中支持了可以选择性水化的Server Components。还有一些新的 Head/Script组件，GraphQL V2等等。

Gatsby还展示了Valhalla，这是他们云上的一项新服务，提议使用Gatsby源代码插件来创建一个内容中心和一个与Gatsby解耦的统一GraphQL API。可以将Valhara与Next.js一起使用。

静态网站生成近期不是很受欢迎，尽管它适用于很多网站，但我认为有一家大公司能持续创新是一件好事。Slice API看起来是个不错的主意。我希望Valhalla可以在本地运行，但是我认为这只是一个云服务器

🔗 Useful links:

• 📜 Gatsby 5.0 - Release Notes
• 📜 Valhalla Content Hub Explained
• 📜 Gatsby 5 Upgrade. Say No to YOLO
• 📜 Partial Hydration (Beta) Explained
• 📜 The Gatsby Slice API: High Precision Incremental Builds
• 🎥 Valhalla Content Hub video

---

React Router-ing Remix

React-Router 6.4中添加了许多Remix数据API，以及更多。现在轮到Remix正式依赖这些新的React-Router APIs了。升级将分4个递增和向后兼容的步骤完成，这些步骤在Remix v1.x中提供，并带有功能标志。我们的目标是使Remix v2成为React-Router 6的编译器

🔗 Useful links:

• 🗺 Remix on Router v6.4
• 💬 Remix RFC - v2 meta API
• 💬 Remix RFC - Flat Routes
• 🎙️ Remix + Shopify - Twitter Space

---

• 👀 React Core PR - Support Promise as a renderable node(推荐看一下)
• 📊 Jamstack Community Survey 2022: React被广泛的使用到，使用率达到71%，Next.js被二分之一的项目使用，Remix也成长的很好，另外Docusaurus也不错 😜
• 📜 React Router 6 Deferred Fetch: 很酷的文章，展示了如何使用defer API，并强调了一些需要理解的错误处理和避免瀑布的微妙之处。
• 📜 Reduce cumulative layout shift in Docusaurus with fontaine: @next/font使用了相同的的技术，可以用在其它context（并不仅限于Docusaurus）来提升CLS分数。
• 📜 Playing with Astro: Sharing State Between React and Vue Components: 展示了React和Vue如何在一个Astro应用中共存，以及通过纳米商店共享状态。
• 📜 Remix Simplifies Things: Brad解释了他喜欢Remix的原因。他可以编写更少的JavaScript/Reaction，而编写更多的HTML。使用TailWind似乎比使用常规样式表的Links API更容易
• 📜 Why I Ditched Django for NextJS: Bill was a "Python guy" working on Google Compute Engine. Finally, he recommends using Next.js (or at least JS/TS) and avoiding Python/Ruby for web projects.
• 📜 How to Integrate Storybook with Hydrogen: the integration is not so simple and requires to configure Vite correctly.
• 📜 What's New in Next.js 13: a good overview of Next.js v13 new features
• 📜 What does CSR, SSR, SSG and ISR means and why should you care?: now a good overview of Next.js rendering features before Next.js v13
• 📜 Implementing 3D Graphics In React: intro to React-Three-Fiber
• 📜 The magical world of Particles with React Three Fiber and Shaders: advanced article on creating particle scenes with React-Three-Fiber and Frame Buffer Objects
• 🎨 Taxonomy - An open source application using everything new in Next.js 13
• 🐦 TanStack Query for Angular: React-Query is progressively ported to other frameworks
• 🐦 scheduler.yield() - Upcoming Web API, useful for React?
• 🐦 Next-Auth - getServerSession() in Server Components
• 🧵 Meet the new create-next-app: uses TypeScript by default
• 🧵 You might not need Context in Server Components in Next.js 13: Sebastian gives different alternatives to the React context for use in Server Components
• 🎥 NextJS 13 Warning: Easy Mistake = Infinite Loops
• 📦 React-Three-Next - updated to Next.js v13
• 📦 Redux ToolKit 1.9
• 📦 derive-zustand
• 📦 Generouted 1.6 - file-based routes for Vite
• 📦 udomsay - A stricter, signals driven, JSX based library

---

📱 React-Native

Expo SDK 47 新的SDK 47刚刚正式发布，有一篇关于新特性的更详细的文章。

• React Native 0.70.5 and React 18.1.0
• Expo Modules API 1.0允许在SWIFT/Kotlin中非常轻松地创建本机交换矩阵模块
• Hermes在EXPO GO iOS上可用，简化了调试体验。Hermes将成为下一代SDK的默认引擎。
• Fabric support in several Expo modules
• Expo路由器测试版：React 导航的文件系统路由。
• 各种EAS改进：端到端安全性、M1工作人员...

简而言之，这是一个非常好的版本！与目前还不支持Swift的react-native-codegen等官方工具相比，使用EXPO模块似乎更容易采用新的架构。

---

• 📦 React-Native 0.71 RC.0: 包括TypeScript类型，新应用默认使用TypeScript，支持flex gap。发布导致了Android构建失败，现在已经修复了
• 👥 Open Native: Native Modules, for all: 一个有趣的计划，建议在不同的生态系统(React-Native, Flutter, Capacitor, NativeScript...)之间通过agnostic模块和适配器来减少重复创建原生模块
• 📜 Migrating a React Native Library to the New Architecture:Oscar将 React-Native Slider升级为Fabric架构，列出了他遇到的挑战，以及解释从现有库或者新库升级的4个主要步骤。
• 📜 Introducing End-to-end Security to EAS Update with Code Signing
• 📜 Flutter vs. React Native: Which is the right cross-platform framework for you?
• 💬 RFC: Metro package exports support + Node.js - define "react-native" community condition
• 💬 RFC: Vision for Layout Conformance/Parity
• 🎉 React-Native - Use TypeScript by default for new applications
• 🎙️ RNR 251 - Examining React Native 0.70
• 🎥 React-Native and Bluetooth Low Energy ( BLE ) - Send and Receive Data
• 🎥 Animated FlatList in React Native
• 📦 Storybook-Solito

---

🔀 Other

• Announcing Rome v10: Rome工具链的第一个稳定版本，它建议用一个更快、更容易使用的Rust替代方案来取代ESLint/Beautier。最吸引我的不是速度，而是关于错误恢复和错误消息的部分
• Introducing the CodeSandbox GitHub App: 提供集成，以促进提交和代码评审。这让人想起最近推出的[StackBlitz Codeflow]但采用了相当不同的技术。
• Jest over Vitest: Brad decided to stay on Jest for now, after an attempt to migrate to Vitest that didn't really improve the execution speed and presented some challenges.
• Vitest 0.25:allows you to write tests for its TypeScript types
• TypeScript PR - Convert TypeScript to modules: in TypeScript 5.0, tsc will be 10-25% faster
• Xata - Serverless Data Platform for modern web builders
• Tina CMS 1.0
• Safari Technology Preview 157
• ESLint - consistent-type-imports
• Client-side Routing without the JavaScript
• Performance: Rust and its relationship with Node.js
• What is a realm in JavaScript?
• Tailwind CSS turns 5 years old
• New to the web platform in October
• Protobuf-ES: The Protocol Buffers TypeScript/JavaScript runtime we all deserve
• ESLint v8.27
• Node.js - drop fetch experimental warning
• Node.js - Nov 3 2022 Security Releases
• Playwright now has new getBy APIs

---

🤭 Fun

上周末就像- 小React-Native-Native 0.71多米诺骨牌下跌大反应-Previopus发行的Native多米诺骨牌。

更有趣的是，这个新的推特帖子列出了我的所有发现。他们中的许多人从来没有在时事通讯中发表过，因为我每周只有一次