React Academy · 课时

什么是边缘渲染,以及它为何重要

了解边缘运行时如何消除源站延迟,以及为什么边缘上的 React SSR 优于传统服务器

第 1 / 4 课13 个步骤

什么是边缘渲染,以及它为何重要 是 CoddyKit 上的免费 React Academy 课时。 这是第 1 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

传统服务器的瓶颈

传统 Web 服务器托管在单一地理区域内。靠近该区域的用户能够获得快速响应,但距离较远的用户会遭遇明显延迟——例如,东京用户从 US-East 服务器请求内容时,在收到第一个字节之前,往返时间就会增加 200 多毫秒。

CDN 的作用与局限

内容分发网络(CDN)会将图像、CSS 和 JavaScript 等静态文件缓存到全球数十个接入点(PoPs),并从距离最近的位置提供这些文件。不过,传统 CDN 无法执行代码,只能提供预构建的静态内容。

边缘运行时

边缘运行时会在全球各地的 CDN PoPs 上执行 JavaScript,从而消除动态请求到源站的往返。请求不再被路由到单一服务器,而是在距离用户最近的 PoP 处理,通常就在同一座城市内,因此延迟会大幅降低。

Cloudflare Workers

Cloudflare Workers 使用 V8 隔离实例,在全球 300 多个位置运行 JavaScript。与无服务器函数(Lambda、Cloud Run)不同,Workers 的冷启动几乎为零,耗时以微秒计算,而不是 Lambda 常见的 100 多毫秒,因为它们会复用 V8 隔离实例,而不是启动容器。

边缘渲染的定义

边缘渲染是指在距离每位用户最近的边缘 PoP 上对 React 应用进行服务器端渲染,并立即提供生成的 HTML。东京用户接收的是来自新加坡 PoP 的完整渲染 HTML 页面,而不是弗吉尼亚服务器提供的页面。

实际应用中的延迟降低

从 US-East 提供的标准 SSR 应用到达东京可能需要 400ms(200ms 网络耗时 + 200ms 服务器渲染)。借助边缘渲染,渲染在新加坡进行,网络延迟降至 30ms,HTML 总计不到 100ms 即可送达——感知到的加载时间提升 4 倍。

边缘运行时的局限

边缘运行时并不是完整的 Node.js 环境。Cloudflare Workers 禁止使用 Node.js 核心接口(fs、net、crypto),将每个请求的 CPU 时间限制为 50ms(付费计划允许更长时间),限制内存,并且无法访问文件系统。这些约束要求您进行周密的架构设计。

Cloudflare Workers 的替代方案

有多个平台提供边缘运行时:Vercel Edge Functions(基于相同的 V8 隔离实例模型)、Deno Deploy(在边缘使用 Deno 运行时)和 Fastly Compute(使用 WebAssembly)。每个平台的接口兼容性、全球覆盖范围和定价模式各不相同。

边缘渲染的最佳适用场景

边缘渲染对于大多静态但需要一定个性化的内容最有价值:包含 A/B 测试变体的营销页面、包含地理定位内容的落地页、带有用户特定元素(登录状态、语言)的博客文章。高度动态且严重依赖数据库的页面受益较少。

比较:Lambda 与 Workers

Lambda(以及 Cloud Run)函数会启动容器、下载代码、初始化运行时,然后执行代码,因此冷启动需要 100–1000ms。Workers 会复用已经运行的 V8 隔离实例,使冷启动几乎不可察觉,不到 5ms。

边缘作为混合架构的一部分

大多数生产应用会选择性地使用边缘渲染:边缘负责快速渲染以静态内容为主的页面,而区域服务器处理需要身份验证、严重依赖数据库的操作。这种混合方式既能获得边缘渲染的低延迟优势,又无需与其限制正面冲突。

Cloudflare Workers 的冷启动

与 AWS Lambda 相比,Cloudflare Workers 为什么能实现几乎为零的冷启动?

课程回顾

边缘渲染在全球 CDN PoPs 上运行 JavaScript,消除到源站的往返并大幅降低延迟。Cloudflare Workers 凭借基于 V8 隔离实例的微秒级冷启动,在 300 多个位置占据优势。权衡确实存在:没有 Node.js 接口且 CPU 受限,因此边缘渲染最适合营销页面以及经过个性化处理但以静态内容为主的页面,而不是严重依赖数据库的页面。

免费开始

用 AI 导师学习 React — 免费

在浏览器中编写并运行真实代码,获得全天候 AI 导师的即时帮助,并在网页或应用中继续学习。

课程
88
课程
324

常见问题解答

「什么是边缘渲染,以及它为何重要」课时是免费的吗?

是的 — 「什么是边缘渲染,以及它为何重要」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 React Academy 课程的其余内容,请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「什么是边缘渲染,以及它为何重要」这节课中我会学到什么?

了解边缘运行时如何消除源站延迟,以及为什么边缘上的 React SSR 优于传统服务器 你通过在浏览器中直接运行的动手代码来练习 React Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗?

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 1 节课,共 4 节。

「什么是边缘渲染,以及它为何重要」课时需要多长时间?

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗?

能。每节 React Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 什么是边缘渲染,以及它为何重要
  2. 使用 Hono 在 Cloudflare Workers 上运行 React
  3. 来自边缘的流式 SSR
  4. React 应用的边缘缓存策略
← 返回 React Academy