如何在没有客户端 JavaScript 的情况下使用 JSON 数据呈现静态 HTML？答案

【问题标题】：How to render static HTML with JSON data with no client-side javascript?如何在没有客户端 JavaScript 的情况下使用 JSON 数据呈现静态 HTML？
【发布时间】：2019-04-10 06:22:44
【问题描述】：

我有一个 json 文件，其中包含我想在网站上显示的数据数组，目前，我只使用 Javascript 并使用 fetch 作为：

fetch('file.json').then(response => {
   return response.json();
}).then(response => {
   //response = {list: [{item: 1}, {item: 2}, {item: 3}]}
   response.list.forEach(listItem => {
     document.body.innerHTML += `${listItem.item} `;
   });
});

但是，我不想让客户端每次都调用来获取包含相同数据的文件。我研究了 SSR 框架，但同时，我不希望服务器一遍又一遍地呈现相同的 .html 文件。

我正在寻找的是一种使用来自此 .json 的数据呈现 .html 文件并将其作为静态页面托管的方法（首选 Node.js）。是否有一个节点模块或脚本可以将此页面呈现为 .html 文件而没有要求，例如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
  </head>
  <body>
    1 2 3 4
  </body>
</html>

【问题讨论】：

阅读这篇文章你可能会发现Awesome Universal Rendering Awesome

标签： javascript html node.js

【解决方案1】：

我可能错了，但我对您的问题的理解是您可能希望将 HTML 作为响应呈现。因此，如果您想将 HTML 作为响应呈现，我将编写以下代码：

const http = require('http');
const fs = require('fs');

const onRequest = (request, response) => {
   response.writeHead(200, {
    'Content-Type': 'text/html',
   });

   fs.readFile('./index.html', null, (error, data) => {
     if (error) {
        response.writeHead(404);
        response.write('File Not Found.');
     } else {
        response.write(data);
     }

     response.end();
  });
};

http.createServer(onRequest).listen(8000);

诀窍是将Content-Type 设置为text/html 以将index.html 呈现为网站页面。您可以修改上面的代码来编辑 index.html 内容。如果我的回答根本没有帮助，请告诉我。

【讨论】：

不，我想读取非 html 数据（JSON 或 .js 数组）并将它们转换为列表项。

【解决方案2】：

如果您强烈反对不使用客户端 javascript，而只想在服务器端呈现它，也许您应该研究类似 EJS 的东西。使用客户端 javascript/jquery 渲染通常是“更好的做法”，因此更容易制作动态，但是...

有了这个很容易做到。他们的网站上有关于如何使用它的示例，但是一旦你将它安装在服务器端，它实际上就像......

app.set('view engine', 'ejs');

// your server code

app.render('index.ejs', { "foo": "bar" );

您的 index.ejs 语法类似于

<p> <%= foo %> </p>

哪个会渲染到

<p> bar </p>

【讨论】：