究竟什么是脱钩？

在 Jamstack 世界中，“解耦”一词经常被提及，当它如此普遍时，如果不真正理解这个概念，可能会让人感到畏惧。

本周我们在公司 Slack 上讨论了这个问题，我觉得值得分享一下其中精彩的见解和观点！

一切都始于一个问题

娜塔莉：问个傻问题！我一直听到有人把 Jamstack 描述为将 UI 与后端“解耦”。我不太明白。我开始觉得这可能是因为我以前参与的所有项目都采用了这种解耦方式，有人能给我解释一下反过来是什么样的吗？“耦合”架构又是什么样的呢？

Phil：耦合架构的一个例子（虽然我们很少听到这个术语）是，Web 服务器负责生成发送到浏览器的视图。

就像用 PHP 构建的网站一样，服务器始终处于运行状态。当收到页面请求时，服务器上的 PHP 代码就会开始运行，可能从数据库中获取一些数据，然后构建 HTML 并将其返回。

“解耦”是指在提出某种观点和产生这种观点所需完成的工作之间拉开距离。

在我们这个完美解耦的世界里，生成所有这些可能的视图的工作是在构建时在某个构建服务器上完成的（例如在 Netlify 部署中或在本地计算机上），而不是作为对浏览器发出的每个请求的响应。

Natalie：好的，所以如果我的网站设置成这样：某些用户操作会触发对服务器的请求，然后我的用户界面会根据服务器的响应而改变，这完全就是“耦合”这个词吗？

Phil：你仍然可以根据请求返回的数据在浏览器中更新 UI……但解耦是为了确保服务器响应不是由正在运行的某些“活动”代码驱动的。

您的用户界面可能会向各种 API 或 JSON 文件发出请求，这可能会影响浏览器中发生的情况，但服务器不负责确定要返回哪些数据，也不负责将这些数据格式化为 HTML 视图。

娜塔莉：好的，我想我现在明白了。假设我有一个电商网站。用户登录（服务器请求），验证通过后导航栏会发生变化，但服务器不会直接发送HTML代码给我，而是我有一个组件处于待机状态，等待已验证用户再次访问时立即渲染。这样算是解耦吗？

Kenny：对我帮助很大的是，把耦合架构想象成一个带有 EJS 模板的 Node 应用。实际上，你在浏览器中看到的每一个视图，都是在收到请求时由 Node 服务器处理，然后使用 EJS 模板渲染给用户的。

在这种情况下，你不能将服务器与模板分开，它们彼此缺一不可，因此它们是“耦合的”。

娜塔莉：好的，我想我明白了，我很确定我的困惑源于我从未构建过任何由服务器决定 HTML 的东西。

菲尔：是的，这仍然是一种非常主要的模式。

WordPress 是单体架构的典型例子。它是一个包含数据库、模板、内容和代码的单一应用程序，并负责将这些信息组合起来以处理每个请求。

这样有帮助吗？

娜塔莉：确实如此，但我还是不太明白用户交互是如何发挥作用的。这是否意味着在构建时，所有可能的视图都会生成，然后就一直保留着，直到需要时才启用？

菲尔：或许可以用“巨石”这个词来做比较。

在单体应用中，服务器负责处理请求，应用逻辑来确定数据应该应用到哪个模板，将这些内容组合起来并返回结果。

因此，产生响应所付出的努力与每个响应都息息相关。

当我们进行解耦时，我们会将这个单体应用拆分开来，预先生成响应，并在收到请求时只提供我们之前准备好的内容。

娜塔莉：没错，这很有道理！为什么会有人用其他方式建造呢？

（我知道以前的日子很艰难，你们都尽力而为，很高兴来到新学校。）

考虑到很多 Jamstack 用户都是在我之后才开始学习编程的，我觉得在向 Jamstack 新手讲解相关内容时，最好记住我们很多人从未考虑过使用单体架构来构建项目。我不确定如何才能既不让那些过去使用过这种模式或者至少将其与解耦模式结合起来考虑的人感到厌烦，又能兼顾到这一点，但这确实值得思考。（因为我们这些新手往往会把事情想得太复杂，即使明明理解了，也会觉得自己不懂。）

菲尔：请永远不要停止提问！

卡西迪：我可以把这段对话截图放到博客文章里吗？

而她确实做到了，读者朋友。

这类概念可能比较复杂，而提问是获得最佳答案的途径！我希望这次讨论能对那些正在努力理解 Jamstack 概念及其背后原理的朋友们有所帮助。

如果您想了解更多信息，请查看Jamstack 术语表，也欢迎在Jamstack 社区提出更多问题！