无论如何我们最终要做的是

rmamin

使用一种称为部分水合的技术。我不知道你是否熟悉这一点，但本质上这是一种方法，你有一个组件，我们只想水合客户端中实际需要的部分。因此，如果您更熟悉传统的 SPA、单页应用程序方法，通常只有一个组件，即您的应用程序组件，它只是在其中嵌套了一千个组件。正确的？其中一些组件实际上是交互式的，对吧？可能有一个下拉菜单，也可能有某种类型的带有验证的表单，无论它是什么。这些是实际需要在客户端中运行的部分，但正如 SPA 架构的工作方式一样，您必须运行整个事物的所有代码才能使其正常工作。
马修：因此，般来说，部分水合是一种找出真正重要的部分、实际需要在客户端中运行的部分的方法，并且只看到 JavaScript。我们团队的成员之一 Nate Moore 参与了这个名为 Microsite 的 电报号码数据 项目，它是一个 Preact 服务器渲染项目 Preact。它会做的是你告诉它，“好吧，这个组件需要在客户端中实际运行”，它会为此添加 JavaScript。所以他之前就研究过这种部分水合作用的想法，我们刚刚采用了它。他加入了我们的团队，我们就采用了这种方法。
马修：因此，Astro 所做的一件独特的事情就是你告诉它你希望它如何在客户端中补水，我的意思是你可以通过不同的方式补水。Astro 总是延迟加载 JavaScript，这意味着我们不会在头部为您的组件添加脚本标签或类似的东西。我们不这样做。相反，我们有一个加载 JavaScript 的内联脚本。所以你可以加载，我认为现在有四种不同的方式，你可以在页面加载时加载。这就是浏览器中存在的加载事件，您可以在空闲时加载。因此，有一个名为 requestIdleCallback 的浏览器 API，它的作用是让您基本上知道 CPU 何时空闲、浏览器何时不忙于工作，以便您可以通过这种方式加载。您可以加载可见性，这意味着，例如，您可能有一个位于页面下方很远的组件，您需要等到用户将该组件滚动到视图中，然后我们加载 JavaScript。
马修：最后，有一种称为媒体，它基于媒体查询。因此，其用例是，例如，您有一些仅在移动设备上运行的组件，并且我确信您已经看到了可以单击查看的侧边栏。这些类型的东西通常很多时候并不存在于桌面上，因此您可以设置媒体查询，并且只有在与该媒体查询匹配时才会加载该组件。



马修：无论如何，这就是四种补水方法。所以我认为我们做得好的一件事是我们强迫你选择做哪一件事。所以这让开发人员停下来思考，加载这段代码的最佳方式是什么？我真的需要这个代码吗？这个组件需要立即运行吗？哦不，这个东西只存在于页面下方。让我们让它可见。
德鲁：所以是的，我想每种类型之间都存在各种各样的权衡。我想如果某些东西只在浏览器空闲时加载，那么您就无法控制是否会及时发生您想要的任何类型的交互。
马修：是的。我猜你可能会为较低优先级的事情这样做。我的意思是它通常非常安全，尤其是在 Astro 网站中。空闲发生得更快。你会想到一些作为 SPA 构建的东西，其中有很多事情正在发生，它正在渲染东西并完成所有这些工作，并且可能闲置需要更长的时间，但是，是的，所有这些肯定都需要权衡。但我认为关键是我们并没有真正做任何神奇的事情。我的意思是，我们并没有想出一些疯狂的方法来获得性能。我们只是让您思考，我正在构建的产品的性能特征是什么？以及应该如何加载？我真的需要这个东西出现在浏览器中吗？或者这只是您构建网站时发生的一次？
德鲁：是的。我想很多开发人员忘记了最快的网站是没有 JavaScript 的网站。因此，如果您可以减少加载和传递的 JavaScript 数量，那么默认情况下速度会更快。因此，Astro 将所有 JavaScript 渲染为静态 HTML 和 CSS，并且您可以使用自己的框架，就像它所描述的那样，无论是 React 还是 View 还是您拥有的框架。