使用 Express 服务器端部分更新 HTML 内容答案

【问题标题】：Update HTML content partially with Express server side使用 Express 服务器端部分更新 HTML 内容
【发布时间】：2018-09-12 13:36:37
【问题描述】：

在我的网站上需要加载一些 JSON 文件，一般情况下，我会在 客户端 上使用 fetch，如下所示：

fetch(jsonFileLocation)
  .then(res => res.json())
  .then(json => {
    document.getElementById("jsonOutput").innerText = JSON.stringify(json, null, 2);
  });

但在我的例子中，HTML 渲染有一个明显的延迟，用户会首先看到一个空白区域，然后加载 JSON 内容。所以我想如果我渲染 JSON 内容服务器端，它可能会加快速度。

我可以先解析 JSON，然后 res.render() 完全解析 HTML，但我不希望解析 JSON 文件的过程延迟页面的其余部分，所以在我的 Node/ Express/Pug 设置我尝试进行两次渲染：

res.render('index', {
  title: 'Homepage',
  mainContent: '...'
});

fs.readFile(jsonFileLocation, 'utf8', (err, data) => {
  if (err) { 
    return;
  }
  res.render('index', {
    jsonOutput: JSON.stringify(json, null, 2)
  })
})

但这给了我Error: Can't set headers after they are sent.的错误。

解决这个问题有什么更好的方法？

【问题讨论】：

你应该先弄清楚到底什么是慢；延迟不太可能是由浏览器内渲染引起的。如果您的服务器代码是延迟的来源，那么在服务器上做更多的工作只会让事情变慢。收集实际性能数据，以免您在黑暗中工作。
好点，我会调查缓慢的原因，但我的问题是，有没有办法像我尝试的那样从服务器端部分呈现 HTML 内容？

标签： javascript html node.js express pug

【解决方案1】：

这不是哈巴狗（或节点/快递）问题，它是 HTTP 的工作方式 - 一个请求有一个响应。发送第二个响应违反了这一原则。

我建议将服务器上的 JSON 文件直接加载到 pug 模板中的 JavaScript 变量中，然后让客户端对其进行所有解析工作。

路线：

res.render('index', {
  title: 'Homepage',
  mainContent: '...',
  jsonOutput: JSON.stringify(json, null, 2)
});

在您的哈巴狗模板内：

script.
  var jsonOutput = !{jsonOutput || []};

如果您一遍又一遍地访问相同的文件，那么您还可以将它们存储在路径顶部的变量中，以便将其保留在内存中。您也可以使用插件行 node-cache 来执行此操作，并提供更多选项，甚至可以使用 redis 缓存来托管 JSON 内容。

【讨论】：