不是为了渲染出来的吗？因此，这些插件本质上使 Astro 能够连接到这些渲染方法，并且-
马修：是的，完全正确。这就是他们所做的一切，就是……是的。是的。
德鲁：那太好了。因此，我假设 Astro 无法采用现有的（例如 React 单页应用程序）并将其转变为静态站点。我猜你实际上需要以一种特定的方式构建你的网站，首先考虑到 Astro。是对的吗？
马修：有点儿。我的意思是，绝对最好从你将其视为静态站点的位置开始，但你当然可以采用 React，就像我说的，一个，你有你的应用程序组件，你可以将其放入 Astro 中，你可以比如说客户端加载，也就是说在客户端加载
斯里兰卡电话号码表 这个东西，然后你就得到了你的SPA。因此，您实际上可以在 Astro 之上构建一个 SPA，然后随着时间的推移可能会删除一些东西，您会想，“哦等等，这个标头不需要在客户端上运行，让我从我的 SPA 中获取它并将其放入 Astro 文件中。” 就那样做吧。
德鲁：所以我看到文档提到的是岛屿的接近而不是一大片陆地。你能给我们解释一下吗？这意味着什么？
马修：是的，这又回到了我之前谈到的部分水合作用，那就是，不像我说的那样，一个大型 SPA 是您的整个应用程序，一切都从中衍生出来，而是您拥有这些我们称之为岛屿的小岛的互动性。我认为谷歌的 Jason Miller 提出了这个术语。所以你可能有你的顶部导航栏，那是一个岛，然后你可能有一个带有一些内容的选项卡岛，你有这些东西。所以它们就像页面中的迷你应用程序。
德鲁：好的。因此，您可能本质上有一个渲染主导航的组件，然后是它旁边的第二个组件，例如，它显示购物车中的商品数量，并且您可以选择不同的方法来处理这些商品的水合情况。因此，导航可能只是呈现为 HTML，而不是真正的交互式，它只是链接。购物车组件实际上会更具交互性，将在客户端上运行，并在您将东西添加到购物车时或任何情况下进行更新。
马修：是的，完全正确。就像你说的，很好的一点是你可以选择不同的方式来补水。有些你可能根本不需要补水，有些你需要立即补水，有些你可能需要在能见度下补水，因为你有这些不同的岛屿，你可以单独考虑它们，什么是最好的实际加载它们的方法。像购物车这样的东西，您可能希望尽早完成，因为您希望用户看到购物车编号很快出现。
德鲁：因此，当加载一个组件时，我们想要完全水合的组件，当浏览器中发生水合过程时，幕后发生了什么？在传统架构中加载页面时，是否会加载整个初始 JavaScript，然后是否会下载并实例化整个包？还是有更聪明的事情发生？
马修：不，这就是它的工作原理。就像我说的，我们并没有真正做任何神奇的事情，只是非常简单。你说你想要在空闲时加载一些东西，我们在空闲时加载它。我们所做的就是专门为该组件注入我们自己的小脚本，例如，对于空闲，有一个名为 requestIdleCallback、window.requestIdleCallback 的 API，当浏览器调用它时，我们导入您的 JavaScript，基本上就是这样。然后我们渲染它。每个框架都有不同的方式在客户端上渲染组件，因此我们拥有实际执行渲染的代码。然后从那里开始，您就进入了框架组件。你所做的任何事情，如果它是一个 View 组件，你用 View 做的任何事情，这一切都发生在里面。
