从 Next.js 到使用 Cloudflare Workers 的 React Edge：一个解放故事

• 最后一根稻草
• Cloudflare 的替代方案？
• React Edge：React 框架源于所有（或几乎）开发人员的痛苦
  • 类型化 RPC 的魔力
  • useFetch 的力量：魔法发生的地方
• 超越 useFetch：完整的武器库
  • RPC：客户端-服务器通信的艺术
  • 有意义的国际化系统
  • JWT 身份验证“正常”
  • 共享商店
  • 优雅的路由
  • 带有边缘缓存的分布式缓存
• 链接：前瞻性思维组件
• app.useContext：边缘网关
• app.useUrlState：与 URL 同步的状态
• app.useStorageState：持久状态
• app.useDebounce：频率控制
• app.useDistinct：没有重复的状态
• React Edge CLI：触手可及的力量
• 结论

最后一滴

这一切都始于 Vercel 的发票。不，它实际上开始得更早——伴随着一些小小的挫折。需要为 DDoS 防护、更详细的日志、甚至像样的防火墙、构建队列等基本功能付费。被困在日益昂贵的供应商锁定中的感觉。

“最糟糕的是：我们宝贵的 SEO 标头根本就停止在使用页面路由器的应用程序中的服务器上呈现。这对任何开发人员来说都是一个真正的头痛！？”

但真正让我重新思考一切的是 Next.js 的发展方向。使用客户端、使用服务器的引入 - 理论上应该简化开发的指令，但实际上增加了另一层管理的复杂性。就好像我们回到了 PHP 时代，用指令标记文件来告诉它们应该在哪里运行。

而且它还不止于此。 App Router，一个有趣的想法，但实现方式是在 Next.js 中创建一个几乎全新的框架。突然之间，我们有两种完全不同的方式来做同一件事。 “旧”和“新” - 具有微妙不同的行为和隐藏的陷阱。

Cloudflare 的替代方案？

那时我意识到：为什么不利用 Cloudflare 令人难以置信的基础设施，其中 Workers 在边缘运行，R2 用于存储，KV 用于分布式数据......当然，还有令人难以置信的 DDoS 防护、全球 CDN、防火墙、规则了解页面和路线以及 Cloudflare 提供的所有其他内容。

最好的：公平的价格模式，按使用量付费，不会出现意外。

这就是 React Edge 的诞生。一个不会尝试重新发明轮子的框架，而是提供真正简单且现代的开发体验。

React Edge：React 框架源于所有（或几乎）开发人员的痛苦

当我开始开发 React Edge 时，我有一个明确的目标：创建一个有意义的框架。不再需要与令人困惑的指令作斗争，不再需要为基本功能付出高昂的代价，最重要的是，不再需要处理客户端/服务器分离所造成的人为复杂性。我想要速度，即在不牺牲简单性的情况下提供性能的东西。凭借我对 React API 的了解以及多年作为 Javascript 和 Golang 开发人员的知识，我确切地知道如何处理流和多路复用以优化渲染和数据管理。

Cloudflare Workers 凭借其强大的基础设施和全球影响力，为我提供了探索这些可能性的完美环境。我想要真正混合的东西，而工具和经验的结合赋予了 React Edge 生命：一个用现代高效的解决方案解决实际问题的框架。

React Edge 为 React 开发带来了革命性的方法。想象一下，能够在服务器上编写一个类并直接从客户端调用它，并且具有完整的类型和零配置。想象一个“正常工作”的分布式缓存系统，允许通过标签或前缀使其失效。想象一下能够以透明且安全的方式在服务器和客户端之间共享状态。除了简化身份验证并带来高效的国际化方法、CLI 等之外。

您的 RPC 通信是如此自然，看起来就像魔法一样 - 您在类中编写方法并从客户端调用它们，就好像它们是本地的一样。智能多路复用系统确保即使多个组件进行相同的调用，也只向服务器发出一个请求。临时缓存避免了不必要的重复请求，所有这些都适用于服务器和客户端。

最强大的点之一是 app.useFetch 钩子，它统一了数据获取体验。在服务器上，它在SSR期间预加载数据；在客户端，它会自动合并这些数据并允许按需更新。凭借对自动轮询和基于依赖关系的反应性的支持，创建动态界面变得前所未有的简单。

但它并不止于此。该框架提供了强大的路由系统（受到出色的 Hono 的启发）、与 Cloudflare R2 集成的资产管理，以及通过 HttpError 类处理错误的优雅方法。中间件可以通过共享存储轻松地将数据发送到客户端，并且为了安全起见，所有内容都会自动混淆。

印象最深刻的是？几乎所有框架的代码都是混合的。没有“客户端”和“服务器”版本 - 相同的代码可以在两种环境中工作，自动适应上下文。客户只收到他们需要的东西，使最终的捆绑包得到了极大的优化。

锦上添花：所有这些都在 Cloudflare Workers 边缘基础设施上运行，以合理的成本提供卓越的性能。账单上没有意外，没有隐藏在强制企业计划背后的基本功能，只有一个坚实的框架，可以让您专注于真正重要的事情：创建令人难以置信的应用程序。此外，React Edge 利用整个 Cloudflare 生态系统，包括队列、持久对象、KV 存储等，为您的应用程序提供强大、可扩展的基础。

Vite 被用作开发环境以及测试和构建的基础。 Vite 以其令人印象深刻的速度和现代化的架构，实现了敏捷高效的工作流程。它不仅加快了开发速度，还优化了构建过程，确保快速准确地编译代码。毫无疑问，Vite 是 React Edge 的完美选择。

重新思考边缘计算时代的 React 开发

你有没有想过在不担心客户端/服务器障碍的情况下开发 React 应用程序会是什么样子？无需记住数十个指令，例如使用客户端或使用服务器？甚至更好：如果您可以像本地一样调用服务器函数，并且具有完整的类型和零配置，会怎么样？

使用 React Edge，您不需要：

• 创建单独的 API 路由
• 手动管理加载/错误状态
• 手动实现去抖
• 担心序列化/反序列化
• 处理 CORS
• 管理客户端/服务器之间的输入
• 手动处理身份验证规则
• 管理国际化的完成方式

最好的部分：所有这些都可以在服务器和客户端上运行，而无需使用 use client 或 use server 来标记任何内容。框架知道根据上下文做什么。我们走吧？

类型化 RPC 的魔力

想象一下能够做到这一点：

与 Next.js/Vercel 进行比较：

useFetch 的力量：魔法发生的地方

重新思考数据获取

忘掉你所知道的关于 React 中数据获取的一切吧。 React Edge 的 app.useFetch 带来了一种全新且强大的方法。想象一个钩子：

• 在 SSR 期间将数据预加载到服务器
• 自动为客户保湿，无闪烁
• 维护客户端和服务器之间的完整打字
• 通过智能去抖动支持反应性
• 自动多路复用相同的调用
• 允许程序化更新和轮询

让我们看看实际效果：

多路复用的魔力

上面的例子隐藏了一个强大的功能：智能复用。当您使用 ctx.rpc.batch 时，React Edge 不仅仅对调用进行批处理 - 它会自动删除重复的相同调用：

SSR 完美补水

最令人印象深刻的部分之一是 useFetch 如何处理 SSR：

超越 useFetch：完整的武器库

RPC：客户端-服务器通信的艺术

安全与封装

React Edge 的 RPC 系统在设计时就考虑到了安全性和封装性。并非 RPC 类中的所有内容都会自动暴露给客户端：

RPC API 层次结构

RPC 最强大的功能之一是将 API 组织成层次结构的能力：

层次结构的好处

将 API 组织成层次结构可以带来多种好处：

• 逻辑组织：以直观的方式对相关功能进行分组
• 自然命名空间：避免与清晰路径的名称冲突（users.preferences.getTheme）
• 封装：在每个级别保持辅助方法私有
• 可维护性：每个子类都可以独立维护和测试
• 完整的打字：TypeScript 理解整个层次结构

React Edge 的 RPC 系统使客户端-服务器通信变得如此自然，以至于您几乎忘记自己正在进行远程调用。通过将 API 组织成层次结构的能力，您可以创建复杂的结构，同时保持代码的组织性和安全性。

有意义的 i18n 系统

React Edge 带来了一个优雅且灵活的国际化系统，无需繁重的库即可支持变量插值和复杂的格式设置。

代码中的用法：

零配置

React Edge 会自动检测并加载您的翻译，并且可以轻松地将用户首选项保存在 cookie 中。但你已经预料到了，对吧？

“有效”的 JWT 身份验证

身份验证一直是 Web 应用程序中的痛点。管理 JWT 令牌、安全 cookie、重新验证 - 所有这些通常都需要大量样板代码。 React Edge 彻底改变了这一点。

看看实现完整的身份验证系统是多么简单：

客户端使用：零配置

为什么这是革命性的？

1. 零样板

   • 无需手动 cookie 管理
   • 不需要拦截器
   • 无升级令牌手册

2. 默认安全性

   • 令牌自动加密
   • Cookie 是安全的且仅 http
   • 自动重新验证

3. 完成打字

   • 已输入 JWT 有效负载
   • 集成 Zod 进行验证
   • 输入的身份验证错误

4. 无缝集成
   

共享商店

React Edge 最强大的功能之一是它能够在工作线程和客户端之间安全地共享状态。让我们看看它是如何工作的：

它是如何运作的

• 公共数据：标记为公共的数据与客户端安全共享，使组件可以轻松访问这些数据。
• 私有数据：敏感数据保留在工作环境中，永远不会暴露给客户端。
• 中间件集成：中间件可以用公共和私有数据填充存储，确保服务器逻辑和客户端渲染之间的连续信息流。

好处

1. 安全性：公共和私有数据范围的分离确保机密信息受到保护。
2. 方便：对存储数据的透明访问简化了工作人员和客户端之间的状态管理。
3. 灵活性：商店可以轻松与中间件集成，允许基于请求处理进行动态状态更新。

优雅的路由

React Edge 的路由系统受到 Hono 的启发，但具有 SSR 的超能力：

主要特点

• 分组路由：共享路径和中间件下相关路由的逻辑分组。 灵活的处理程序：定义返回页面或直接 API 响应的处理程序。
• 每路由标头：为各个路由自定义 HTTP 标头。
• 集成缓存：使用 ttl 和标签简化缓存策略。

好处

1. 一致性：通过将相关路由分组在一起，可以确保中间件应用程序和代码组织的一致性。
2. 可扩展性：系统支持大规模应用的嵌套和模块化路由。
3. 性能：本机缓存支持可确保最佳响应时间，无需手动配置。

带有边缘缓存的分布式缓存

React Edge 拥有强大的缓存系统，适用于 JSON 数据和整个页面：

主要特点

• 基于标签的失效：可以使用标签对缓存条目进行分组，以便在数据更改时轻松且有选择性地失效。
• 前缀匹配：使用公共前缀使多个缓存条目无效，非常适合搜索查询或分层数据等场景。
• 生存时间 (TTL)：设置缓存条目的过期时间，以确保数据新鲜，同时保持高性能。

好处

1. 改进的性能：通过为频繁访问的数据提供缓存响应来减少 API 的负载。
2. 可扩展性：通过分布式缓存系统有效管理大型数据集和高流量。
3. 灵活性：对缓存进行细粒度控制，使开发人员能够在不牺牲数据准确性的情况下优化性能。

链接：前瞻性思维组件

Link 组件是一个智能且高性能的解决方案，用于在客户端预加载资源，确保用户更流畅、更快速的导航。当光标悬停在链接上时，其预取功能会被激活，利用用户不活动的时刻提前请求目标数据。

它是如何工作的？

1. Conditional Prefetch：prefetch 属性（默认处于活动状态）控制是否执行预加载。

2. 智能缓存：Set用于存储已经预加载的链接，避免冗余调用。

3. Mouse Enter：当用户将光标悬停在链接上时，handleMouseEnter 函数会检查是否需要预加载，如果需要，则向目的地发起获取请求。

4. 错误安全：抑制请求中的任何失败，确保组件的行为不受瞬时网络错误的影响。
   

当用户将鼠标悬停在“关于我们”链接上时，该组件将开始从 /about 页面预加载数据，提供几乎瞬时的转换。好主意，对吧？但我在react.dev文档中看到了它。

app.useContext：边缘网关

app.useContext 是 React Edge 的基本钩子，提供对整个工作上下文的访问：

app.useContext的主要特点

• 路线管理：轻松访问相应的路线、其参数和查询字符串。
• RPC 集成：直接从客户端进行类型化且安全的 RPC 调用，无需额外配置。
• 共享存储访问：在工作程序-客户端共享状态下检索或设置值，并完全控制可见性（公共/私有）。
• 通用URL访问：轻松访问当前请求的完整URL，进行动态渲染和交互。

为什么它如此强大

app.useContext 挂钩弥合了工作人员和客户端之间的差距。它允许您构建依赖于共享状态、安全数据获取和上下文渲染的功能，而无需重复代码。这简化了复杂的应用程序，使它们更容易维护并更快地开发。

app.useUrlState：与 URL 同步的状态

app.useUrlState 挂钩使应用程序的状态与 URL 参数保持同步，让您可以精确控制 URL 中包含的内容、状态的序列化方式以及更新时间。

参数

1. 初始状态

   • 定义其状态的默认结构和值的对象。

2. 选项：

   • debounce：控制状态更改后 URL 更新的速度。
   • kebabCase：序列化为 URL 时将状态键转换为 kebab-case。
   • omitKeys：指定要从 URL 中排除的键。
   • omitValues：存在时将从 URL 中排除关联键的值。
   • pickKeys：限制序列化状态仅包含特定键。
   • 前缀：为所有查询参数添加前缀。
   • url：同步的基本 URL，通常源自应用程序上下文。

好处

• SEO 友好：确保状态相关视图反映在可共享 URL 中。
• 使用去抖动进行更新：防止快速变化的输入出现过多的查询更新。
• 干净的 URL：kebabCase 和 omitKeys 等选项保持查询字符串可读。
• State Hydration：组装组件时自动初始化 URL 的状态。
• 适用于所有环境：支持服务器端渲染和客户端浏览。

实际应用

• 列表过滤器：将用户应用的过滤器与 URL 同步。
• 动态视图：确保地图缩放、中心点或其他设置持续存在。
• 用户首选项：将选定的设置保存到 URL 以便共享。

app.useStorageState：持久状态

app.useStorageState 挂钩允许您使用 localStorage 或 sessionStorage 并具有完整的类型支持来在浏览器中保留状态。

持久性选项

• 去抖：控制录制频率
• 存储：在 localStorage 和 sessionStorage 之间选择
• omitKeys/pickKeys：对持久数据的精细控制

表现

• 通过 debounce 优化的更新
• 自动序列化/反序列化
• 内存中的缓存

常见用例

• 搜索历史
• 收藏夹列表
• 用户偏好
• 过滤器状态
• 临时购物车
• 表格草稿

app.useDebounce：频率控制

轻松消除无功值：

app.useDistinct：没有重复的状态

通过输入维护唯一值的数组：

app.useDistinct 是一个专门用于检测值何时实际更改的钩子，支持深度比较和反跳：

主要特点

1. 不同值检测：
   • 监控当前和之前的值
   • 根据您的标准自动检测更改是否显着
2. 深度比较：
   • 启用复杂对象的深层相等性检查
3. 个性化比较：
   • 支持自定义函数来定义什么构成“独特”更改
4. 去抖：
   • 当更改过于频繁时减少不必要的更新

好处

• API 与 useState 相同：易于集成到现有组件中。
• 优化性能：当值没有显着变化时，防止不必要的重新获取或重新计算。 改进的用户体验：防止过度反应的 UI 更新，从而实现更顺畅的交互。
• 简化逻辑：消除状态管理中对相等或重复的手动检查。

React Edge hooks 旨在协调工作，提供流畅且类型化的开发体验。将它们组合起来可以让您用更少的代码创建复杂且反应式的界面。

React Edge CLI：触手可及的力量

React Edge CLI 旨在通过将基本工具集中在一个直观的界面中来简化开发人员的生活。无论您是初学者还是专家，CLI 都确保您可以高效、轻松地配置、开发、测试和部署项目。

主要特点

模块化且灵活的命令：

• 构建：构建应用程序和工作线程，并提供指定开发或生产环境和模式的选项。
• dev：启动本地或远程开发服务器，允许您单独在应用程序或工作人员上工作。
• 部署：结合使用 Cloudflare Workers 和 Cloudflare R2 的强大功能执行快速高效的部署，确保边缘基础设施的性能和可扩展性。
• 日志：直接在终端中监控工作日志。
• lint：自动执行 Prettier 和 ESLint，并支持自动更正。
• 测试：使用 Vitest 运行具有可选覆盖范围的测试。
• 类型检查：验证项目中的 TypeScript 类型。

生产用例

我很自豪地分享，第一个使用 React Edge 的生产应用程序现在正在运行！这是一家巴西房地产公司 Lopes Imóveis，该公司已经利用了该框架的所有性能和灵活性。

在房地产中介的网站上，房产会加载到缓存中，以优化搜索并为用户提供更流畅的体验。由于它是一个极其动态的网站，因此路由缓存使用仅 10 秒的 TTL，并结合 stale-while-revalidate 策略。这确保了即使在后台重新验证期间，站点也能提供具有卓越性能的最新数据。

此外，使用集成到 RPC 的缓存系统，偶尔会在后台高效地计算类似属性的推荐，并直接保存在 Cloudflare 的缓存中。这种方法减少了后续请求的响应时间，并使查询建议几乎是即时的。此外，所有图像都存储在 Cloudflare R2 上，提供可扩展的分布式存储，无需依赖外部提供商。

很快我们还将启动一个庞大的 Easy Auth 自动化营销项目，进一步展示这项技术的潜力。

结论

所以，亲爱的读者，我们通过 React Edge 宇宙的冒险结束了！我知道还有大量令人难以置信的事情需要探索，例如像 Basic 和 Bearer 这样最简单的身份验证，以及其他让开发人员的日常生活更加快乐的小秘密。但冷静点！我们的想法是在未来推出更详细的文章，以深入探讨这些功能中的每一个。

并且，剧透：很快 React Edge 将开源并正确记录！平衡开发、工作、写作和一点社交生活并不容易，但看到这一奇迹付诸实践的兴奋感，尤其是 Cloudflare 基础设施提供的荒谬速度，是推动我前进的动力。所以请抑制住你的焦虑，因为最好的尚未到来！ ？

同时，如果您想立即开始探索和测试，该软件包现已在 NPM 上提供：React Edge on NPM..

我的电子邮件是feliperohdee@gmail.com，我总是乐于接受反馈，这只是这个旅程的开始，建议和建设性批评。如果您喜欢所读内容，请与您的朋友和同事分享，并留意即将推出的新内容。感谢您关注我到目前为止，直到下一次！ ???

以上是从 Next.js 到使用 Cloudflare Workers 的 React Edge：一个解放故事的详细内容。更多信息请关注PHP中文网其他相关文章！