|
Post by account_disabled on Jan 6, 2024 6:34:57 GMT
使用 React 和 React Router 来渲染其 UI。实施相当标准。最重要的部分如下图所示: 简单的应用程序结构 **简单的应用程序**结构。(查看大图) 应用程序代码,步骤 1:服务器 在存储库中,您可以看到整个设置,但出于我们的目的,大多数相关代码都在router-manager.js文件中,负责 Express 路由设置和数据 API。 express.Router页面和 API 路由都有单独的路由。上述加载应用程序的过程可以用以下方式示意性地表示: 客户端渲染 这里的服务器还包括*CDN*。(查看大图) 这远非最佳,因为在许多情况下,用户必须等待整个 HTML → JavaScript → 数据序列完成,才能使用该应用程序。 这取决于应用程序的性质。在某些情况下,应用程序的某些部分可能。 会在完全呈现之前呈现并变得可用。另一方面,有些应用程序尽管已完全渲染,但尚未交互,因为并非所有 JavaScript 和/或数据都已被检索。 虽然可以通过进一步优化来改进(该链接是一个很好的起点),但改进仍然受到下载和解析应用程序代码后需要检索的数据 Whatsapp 号码列表 的限制。这需要时间并且会对感知性能产生负面影响。 由于整个应用程序是使用 Ajax 引入的数据在浏览器中呈现的,因此其机器友好性充其量是值得怀疑的。您可以采取一些措施(例如快照),但它们会增加更多复杂性并且容易出错。 我们可以做得更好。 简单的通用应用程序 该应用程序可以在simple+ssr 分支中找到。 该版本应用程序背后的想法是: 根据必要的数据在服务器上呈现 HTML 将 HTML 传送到浏览器 还将用于呈现 HTML 的数据发。 送到浏览器 允许 React 解决必要的重新渲染 利润 这里的利润意味着能够向机器呈现和提供友好的标记以及对人类用户的快速响应。 设置 # 应用程序的一般设置没有变化。 应用程序代码 结构保持不变,只是某些部分发生了各种变化。 简单的SSR应用程序结构 **橙色**表示此版本中更改的部分。(查看大图)在我们开始兴高采烈地击掌并考虑去哪里吃早午餐之前,请考虑一下该解决方案的含义。我们在浏览器中向应用程序提供了用于在服务器上呈现它的数据,但该过程远不令人满意。 用户通过链接共享、搜索引擎和单击那些烦人的浏览器按钮的黑魔法,并不总是到达应用程序的前门。他们直接出现在厨房里,期望看到炉子上有热水壶,桌子上有饼干。由您(好吧,服务器)根据有关他们如何到。
|
|