离线 HTML 的客户端与服务器端渲染

Question

我正在创建一个需要离线访问的 HTML 页面形式的交互式报告。这些选项中哪一个会产生更好的性能？

• 提前创建所有 HTML（通过服务器端脚本）并隐藏除一个（登录页面）之外的所有“视图”。当用户单击菜单项时，隐藏当前可见的视图并取消隐藏与其选择对应的视图。
• 将所有数据作为 JavaScript 变量/对象包含在内。当用户从菜单中选择某些内容时，使用 Handlebars.js 之类的模板引擎来创建所需的 HTML。

我发现了其他有关客户端与服务器端渲染的帖子，但没有针对无法回调服务器以请求特定数据点的离线应用程序。在我的例子中，所有数据（从几百到几千条记录）必须从一开始就包含在 HTML 中。

Answer 1

我会将数据和模板发送到客户端并在客户端上呈现 HTML，原因很简单——它可能会工作得更快（当然这取决于您的实际数据）。

首先，如果您在服务器上预渲染 HTML，要传输的数据量通常会大得多。模板和原始数据会小得多，因此应用程序的加载速度会更快。

其次，用户可能不需要所有呈现的页面。如果只使用了部分页面，则服务器上渲染所有页面的资源都被浪费了。

还有一点——如果一切都呈现在客户端上，那么使应用程序完全无服务器应该很容易。您可以将数据连同应用程序代码和资产一起发送到 json 文件中，在这种情况下，它可以在完全没有服务器的情况下工作（当然，如果这个用例与您的情况相关，这只是一个点）。