同构应用程序是不是意味着前后站在一起？

Posted 2023-03-11

【中文标题】同构应用程序是不是意味着前后站在一起？

【英文标题】：Do the isomorphic apps implies back and front stand together?同构应用程序是否意味着前后站在一起？

【发布时间】：2016-09-29 13:00:31

【问题描述】：

我一直在使用Angular 2 Universal 进行同构应用程序开发，但有一点我脑子里想不明白。

我的理解是，在不同的模块上保留背面和正面是一种很好的做法，但在使用 MEAN 应用程序时，这似乎不是一种常见的模式。

所以，我即将开始一个可以扩展的项目，并且我想在未来实现服务器端渲染，但我不知道我应该采用哪种方法。老实说，我觉得将后端和前端分开会更舒服，但是，如果是这样，以后是否可以实现服务器端渲染？

另外，假设我在两边复制index.html，当第一个服务器渲染完成时，服务器是否能够将控制权委托给客户端？我的意思是，考虑到他们不在同一个项目中，我无法想象该委托将如何工作。

提前致谢。

【参考方案1】：

据我了解，您说的是渲染 UI，这是您应用程序的前端部分，即使您在服务器上进行预渲染工作也是如此。

这种预渲染只是优化，你可以将它保存在一些单独的代码层中，但我相信同构 javascript 的整个想法是在客户端和服务器上重用相同的代码。尝试复制代码和/或模板的这种方式不是一个好主意（从来都不是）。

如果您真的想将事物分开，请考虑将您的应用程序拆分为更多服务：

后端服务器应用程序 - 数据库之上的某种 rest API，它包含所有业务逻辑（第一个 node.js 应用程序） 前端服务器应用程序 - 另一个 node.js 应用程序，它通过 HTTP 请求从 API 获取数据并执行服务器端预渲染（第二个 node.js 应用程序） 前端 - 在浏览器中运行的所有代码

这样，最初“前端服务器应用程序”可以是“前端”和“后端服务器应用程序”之间的简单代理。 稍后您可以使用服务器端渲染对其进行扩展。

重要提示：如果您要开发应用程序而不在服务器上预渲染并在稍后阶段添加它，您需要考虑到并非所有浏览器端 javascript 功能都可以在服务器上运行（例如例如，使用原生 DOM 元素进行操作），请参阅best practices section in angular universal readme。

【讨论】：

感谢您的回复。让我直截了当地说：后端服务器将进行初始渲染（依靠frontend 模块），然后它将渲染管理委托给前端服务器（也依靠frontend 模块）？如果我错了，请纠正我。此外，是否可以在分离的模块之间委派渲染管理？就我与Angular 2 Universal 接触到的那一点点而言，似乎为了实现这一点，你必须将前后保持在一起（顺便说一句，我是新手，所以要加点盐）。

在常规应用程序中，您已经将后端和前端放在一起，因为后端发送前端代码（html、CSS、JavaScript）。因此，无论如何，您的支持都会进行一些预渲染（即使这只是一个空的 HTML 页面，其余的都在客户端完成）。 Angular Universal 允许你在服务器上运行前端代码来做更多的预渲染。但总的来说，这个过程是一样的——服务器做了一些事情，然后将 html、CSS、js 代码发送到客户端。没有什么特殊的“委托”，只是浏览器接收到的初始html页面不再为空。

我现在明白了！非常感谢！

@jscherman 如果您要开发应用程序而不在服务器上预渲染并在稍后阶段添加它，您需要考虑到并非所有浏览器端的 JavaScript 功能都可以工作在服务器上（例如，使用本机 DOM 元素进行操作），请参阅best practices section in angular universal readme。所以你需要避免在你的应用中使用这些不兼容的特性。