修是的这又回到了我之前谈到的部分水合作用，那就是，不像我说的那样，一个大型 SPA 是您的整个应用程序，一切都从中衍生出来，而是您拥有这些我们称之为岛屿的小岛的互动性。我认为谷歌的 Jason Miller 提出了这个术语。所以你可能有你的顶部导航栏，那是一个岛，然后你可能有一个带有一些内容的选项卡岛，你有这些东西。所以它们就像页面中的迷你应用程序。
德鲁：好的。因此，您可能本质上有一个渲染主导航的组件，然后是它旁边的第二个组件，例如，它显示购物车中的商品数量，并且您可以选择 电话号码数据 不同的方法来处理这些商品的水合情况。因此，导航可能只是呈现为 HTML，而不是真正的交互式，它只是链接。购物车组件实际上会更具交互性，将在客户端上运行，并在您将东西添加到购物车时或任何情况下进行更新。
马修：是的，完全正确。就像你说的，很好的一点是你可以选择不同的方式来补水。有些你可能根本不需要补水，有些你需要立即补水，有些你可能需要在能见度下补水，因为你有这些不同的岛屿，你可以单独考虑它们，什么是最好的实际加载它们的方法。像购物车这样的东西，您可能希望尽早完成，因为您希望用户看到购物车编号很快出现。
德鲁：因此，当加载一个组件时，我们想要完全水合的组件，当浏览器中发生水合过程时，幕后发生了什么？在传统架构中加载页面时，是否会加载整个初始 JavaScript，然后是否会下载并实例化整个包？还是有更聪明的事情发生？
马修：不，这就是它的工作原理。就像我说的，我们并没有真正做任何神奇的事情，只是非常简单。你说你想要在空闲时加载一些东西，我们在空闲时加载它。我们所做的就是专门为该组件注入我们自己的小脚本，例如，对于空闲，有一个名为 requestIdleCallback、window.requestIdleCallback 的 API，当浏览器调用它时，我们导入您的 JavaScript，基本上就是这样。然后我们渲染它。每个框架都有不同的方式在客户端上渲染组件，因此我们拥有实际执行渲染的代码。然后从那里开始，您就进入了框架组件。你所做的任何事情，如果它是一个 View 组件，你用 View 做的任何事情，这一切都发生在里面。
德鲁所以你仍然依赖像 Webpack 这样的传统工具，你需要做些什么来进行捆绑以确保你只加载一个 React 实例和所有这些东西？
马修：是的。我们使用雪包。我们的团队是 Snowpack 的创造者。Fred 最初创建了，但这是一个比 Webpack 之类的工具更现代的工具，它的作用是基本上为您提供了一个可以按需编译内容的开发服务器。因此，每个文件都在 Dev 中单独编译，而不是获得整个“应用程序”的一个巨大捆绑包，然后当您部署该产品时，当然所有文件都会以优化的方式捆绑在一起。是的。
德鲁：静态站点生成器的优点之一是它们通常非常简单。您正在获取一些 Markdown 文件或其他任何文件并将它们渲染为 HTML，并且实际上并没有太多错误。