这一切都始于 Vercel 的发票。不，它实际上开始得更早——伴随着一些小小的挫折。需要为 DDoS 防护、更详细的日志、甚至像样的防火墙、构建队列等基本功能付费。被困在日益昂贵的供应商锁定中的感觉。
“最糟糕的是：我们宝贵的 SEO 标头根本就停止在使用页面路由器的应用程序中的服务器上呈现。这对任何开发人员来说都是一个真正的头痛！？”
但真正让我重新思考一切的是 Next.js 的发展方向。使用客户端、使用服务器的引入 - 理论上应该简化开发的指令，但实际上增加了另一层管理的复杂性。就好像我们回到了 PHP 时代，用指令标记文件来告诉它们应该在哪里运行。
而且它还不止于此。 App Router，一个有趣的想法，但实现方式是在 Next.js 中创建一个几乎全新的框架。突然之间，我们有两种完全不同的方式来做同一件事。 “旧”和“新” - 具有微妙不同的行为和隐藏的陷阱。
那时我意识到：为什么不利用 Cloudflare 令人难以置信的基础设施，其中 Workers 在边缘运行，R2 用于存储，KV 用于分布式数据......当然，还有令人难以置信的 DDoS 防护、全球 CDN、防火墙、规则了解页面和路线以及 Cloudflare 提供的所有其他内容。
最好的：公平的价格模式，按使用量付费，不会出现意外。
这就是 React Edge 的诞生。一个不会尝试重新发明轮子的框架，而是提供真正简单且现代的开发体验。
当我开始开发 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 应用程序会是什么样子？无需记住数十个指令，例如使用客户端或使用服务器？甚至更好：如果您可以像本地一样调用服务器函数，并且具有完整的类型和零配置，会怎么样？
最好的部分：所有这些都可以在服务器和客户端上运行，而无需使用 use client 或 use server 来标记任何内容。框架知道根据上下文做什么。我们走吧？
想象一下能够做到这一点：
忘掉你所知道的关于 React 中数据获取的一切吧。 React Edge 的 app.useFetch 带来了一种全新且强大的方法。想象一个钩子：
让我们看看实际效果：
上面的例子隐藏了一个强大的功能：智能复用。当您使用 ctx.rpc.batch 时，React Edge 不仅仅对调用进行批处理 - 它会自动删除重复的相同调用：
最令人印象深刻的部分之一是 useFetch 如何处理 SSR：
React Edge 的 RPC 系统在设计时就考虑到了安全性和封装性。并非 RPC 类中的所有内容都会自动暴露给客户端：
RPC 最强大的功能之一是将 API 组织成层次结构的能力：
将 API 组织成层次结构可以带来多种好处：
React Edge 的 RPC 系统使客户端-服务器通信变得如此自然，以至于您几乎忘记自己正在进行远程调用。通过将 API 组织成层次结构的能力，您可以创建复杂的结构，同时保持代码的组织性和安全性。
React Edge 带来了一个优雅且灵活的国际化系统，无需繁重的库即可支持变量插值和复杂的格式设置。
代码中的用法：
React Edge 会自动检测并加载您的翻译，并且可以轻松地将用户首选项保存在 cookie 中。但你已经预料到了，对吧？
身份验证一直是 Web 应用程序中的痛点。管理 JWT 令牌、安全 cookie、重新验证 - 所有这些通常都需要大量样板代码。 React Edge 彻底改变了这一点。
看看实现完整的身份验证系统是多么简单：
零样板
默认安全性
完成打字
无缝集成
React Edge 最强大的功能之一是它能够在工作线程和客户端之间安全地共享状态。让我们看看它是如何工作的：
React Edge 的路由系统受到 Hono 的启发，但具有 SSR 的超能力：
React Edge 拥有强大的缓存系统，适用于 JSON 数据和整个页面：
Link 组件是一个智能且高性能的解决方案，用于在客户端预加载资源，确保用户更流畅、更快速的导航。当光标悬停在链接上时，其预取功能会被激活，利用用户不活动的时刻提前请求目标数据。
它是如何工作的？
Conditional Prefetch：prefetch 属性（默认处于活动状态）控制是否执行预加载。
智能缓存：Set用于存储已经预加载的链接，避免冗余调用。
Mouse Enter：当用户将光标悬停在链接上时，handleMouseEnter 函数会检查是否需要预加载，如果需要，则向目的地发起获取请求。
错误安全：抑制请求中的任何失败，确保组件的行为不受瞬时网络错误的影响。
当用户将鼠标悬停在“关于我们”链接上时，该组件将开始从 /about 页面预加载数据，提供几乎瞬时的转换。好主意，对吧？但我在react.dev文档中看到了它。
app.useContext 是 React Edge 的基本钩子，提供对整个工作上下文的访问：
app.useContext 挂钩弥合了工作人员和客户端之间的差距。它允许您构建依赖于共享状态、安全数据获取和上下文渲染的功能，而无需重复代码。这简化了复杂的应用程序，使它们更容易维护并更快地开发。
app.useUrlState 挂钩使应用程序的状态与 URL 参数保持同步，让您可以精确控制 URL 中包含的内容、状态的序列化方式以及更新时间。
初始状态
选项：
app.useStorageState 挂钩允许您使用 localStorage 或 sessionStorage 并具有完整的类型支持来在浏览器中保留状态。
轻松消除无功值：
通过输入维护唯一值的数组：
app.useDistinct 是一个专门用于检测值何时实际更改的钩子，支持深度比较和反跳：
React Edge hooks 旨在协调工作，提供流畅且类型化的开发体验。将它们组合起来可以让您用更少的代码创建复杂且反应式的界面。
React Edge CLI 旨在通过将基本工具集中在一个直观的界面中来简化开发人员的生活。无论您是初学者还是专家，CLI 都确保您可以高效、轻松地配置、开发、测试和部署项目。
主要特点
我很自豪地分享，第一个使用 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中文网其他相关文章！
