An illustration of a gauge with a dial that can go from “Static” on the left to “Dynamic” on the right, accompanied by the Remix logo.
2022 年 5 月 13 日

Remix 和“边缘”

Jim Nielsen
设计总监

关于 CDN 和“边缘”,人们议论纷纷。传统上,边缘被视为一个用于快速存储和分发静态资产的分布式网络,而任何动态内容都需要在某个地方进行计算,无论是在客户端(以客户端 JS 与 API 通信的形式)还是服务器端(应用程序服务器、Lambda 函数等)。

但这种情况正在改变。“边缘”不再仅仅关乎静态资产。它正在逐渐成为一个用于动态资产的场所,而动态资产需要计算。Chris Coyier 在他的帖子中谈到了这一点:“如果你的 Jamstack 网站的所有重要内容都来自单个源服务器,那么你的网站有多么 CDN 化并不重要。边缘函数可能是解决方案的一部分。”。

静态文件在“边缘”上很棒,但你知道什么更酷吗?在边缘上实际做一些事情

Kent 也在他在 Reactathon 上的演讲中谈到了“边缘”以及接下来会发生什么。

Screenshot from the video Kent’s talk, showing Kent and his title slide with the words “Shipping to the Edge”

在这篇文章中,我们将更深入地了解在网络上交付内容的不同方式,以及“边缘”存在的原因,以及它如何不断发展以更好地为网络提供出色的用户体验(当然,还有 Remix 如何利用这一切)。

首先:服务器端渲染 (SSR)

在这个模型的基本形式中,你有一个单个源服务器,它根据请求向所有人提供你的内容(动态或静态)。

Illustration depiciting two different users connecting to the same server across the world and being served the same resource.

虽然这种模型有其优点,但它容易出现性能问题,因为 1) 只有一个服务器为所有人提供服务,以及 2) 它没有分布在世界各地(速度部分取决于用户与你的服务器的地理距离)。

引入:静态网站生成 (SSG)

SSG 有望通过消除源服务器(针对静态内容)并将所有内容放在世界各地的分布式计算机网络(也称为 CDN)上,使 SSR 速度更快。这使得访问内容变得更快,因为内容分布在世界各地,便于快速检索。

Illustration depiciting two different users across the world connecting to CDN nodes close to their geographic location and being served the same resource.

但你之前在 SSR 中所做的动态内容怎么办?如果你的网站上的内容发生变化,传统的做法是重新生成整个网站并将其重新推送到 CDN。

用户特定内容怎么办?为此,你需要从这种“静态内容检索”模式中找到一个逃生通道,以及某种服务器来生成这种用户特定内容。

引入:客户端渲染 (CSR)

静态网站生成和 JAMstack 的很大一部分是“A”部分:API。它回答了如何生成和检索针对单个用户定制的动态内容的问题。

在 SSG 模型中,这通常通过从 CDN 提供一个静态的、空的内容外壳来完成。这个外壳最初对所有用户来说都是一样的,它通常显示一个加载器,并包含关于如何检索和呈现用户特定内容的说明。

Illustration depiciting two different users across the world connecting to CDN nodes close to their geographic location and being served the same resource which is a document with a loading spinner.

你好,转轮!然后,每个客户端都需要获取自己的唯一数据,这些数据可能位于世界某个地方的源服务器上(它可能连接到附近的数据库),以获取个性化或动态内容。

Illustration depiciting two different users across the world bypassing CDN nodes close to their geographic location and instead connecting to the same origin server far from their geographic location to be served unique content.

你看到问题了吗?CDN 在为所有用户和请求提供统一的内容方面非常出色。但交付用户特定内容所需的计算和数据检索需要世界某个地方的服务器,因此绕过了 CDN 的分布式增值。

换句话说,如果你的内容交付网络内容是用户特定的,那么它可能不是来自分布在世界各地的计算机网络。相反,它很可能来自世界某个特定地方的源服务器(或 Lambda 函数等)。只有你的应用程序的外壳,它对所有用户来说都是通用的,可以由你的 CDN 提供,并利用它的优势(至少空的外壳渲染速度很快,对吧?)。

引入:ISR、DPR 和 [在此插入缩略语]

增量静态再生 (ISR)、分布式持久渲染 (DPR) 以及我们可能想出的任何其他方法,旨在逐案解决上面描述的一些问题。

但是,关于这些替代方案和框架的一点是,它们呈现了一种选择的错觉。从根本上说,你仍然在为整个网站选择 SSR 或 CSR(以及它们相关的权衡),然后获得一些页面级的逃生通道(ISR、DPR、Lambda 函数等)。

引入:Remix

Remix 不需要你考虑并接受这些无数逃生通道的权衡。它允许你逐页面地决定(并在以后轻松改变主意)你希望为任何给定的资源(或者我应该说路由,因为Remix 将出现在你附近的 react-router 中)实现什么样的动态程度。

Remix 为你提供了一个概念上的杠杆,你可以利用它来实现你希望为任何给定页面实现的动态程度。如果情况发生变化,只需推动或拉动你的杠杆即可。你甚至可以在运行时根据数据、用户甚至 A/B 测试来控制这个杠杆!

  • 关于页面?主要是静态的(对每个用户来说内容都相同,很少更改)。将杠杆拉近“静态”。
  • 用户资料?适度动态(对每个用户来说都不同,很少更改)。将杠杆推向中间,介于静态和动态之间。
  • 用户提要?高度动态(对每个用户来说都不同,每分钟都在变化)。将杠杆一直推到“动态”的方向。

Illustration of a gauge with a dial. The gauge reads “Static” on the left and “Dynamic” on the right, with labled points on the spectrum between those two extremes for SSG, ISR, CSR, and SSR, each of which has a line through them to show they’re not needed. The Remix logo is shown below the gauge.

某个聪明人说过,“给我一个杠杆,我就能撬动地球”。Remix 接受了这个想法,并付诸实践。现在你有一个杠杆可以跨整个动态频谱交付任何网页。借助下一代“边缘”,你可以在世界各地快速完成所有操作。

Remix 和下一代“边缘”

下一代“边缘”——Deno deployCloudflare Workers 等技术(以及越来越多)——承诺将静态内容 CDN 与动态内容服务器相结合,这样你就可以从同一个网络交付静态资产和需要计算的动态内容——想想传统的 SSR,但它是分布式的,就好像源服务器和 CDN 生了一个孩子。

“边缘”可以拥有所请求的内容,也可以执行获取所请求内容并将其缓存所需的计算,这样所有内容都可以在世界各地的所有人面前快速渲染。不再有转轮!

Illustration depiciting two different users across the world connecting to next generation edge nodes, which are a visual combination of a traditional CDN node and an origin server, resulting in each user retrieiving tailored content from a server in close proximity to their geographic location.

将这种计算网络与 Remix 相结合,你现在可以为任何给定页面交付你想要的任何动态程度,并将它们分散到世界范围的计算网络中——所有这些都是为了提供出色的用户体验:快速个性化内容。

还有一件事……

边缘上的流式传输!但这将是另一篇博文的内容。如果你等不及了,去看Ryan 在 Reactathon 上的演讲


获取有关最新 Remix 新闻的更新

成为第一个了解 Remix 新功能、社区活动和教程的人。