Javascript 将HTML动态添加到Pug（Jade）模板的正确方法是什么？

假设我们希望使用Pug和NodeJS创建一个网页，该网页显示基于外部数据源的项目列表，例如：

doctype html
  ...
  body
    p Welcome to #{siteName}
    each item in variableWithExternalData
        ul
          li= item

目前的做法：

用户访问页面

服务器向外部API发送请求

服务器处理外部数据并将其存储在

data

使用

res.Render（'index'，{siteName:'MyName'，variableWithExternalData:data}）呈现页面

虽然这可以很好地工作，但这并不是一种特别快速的客户端体验，因为服务器在呈现页面之前必须首先处理外部数据。更可取的是以下内容：

用户访问页面

服务器呈现页面

服务器向外部API发送请求

服务器处理外部数据

客户端从服务器检索数据并将其动态添加到页面

---

这将是有益的，因为页面可以在检索和处理外部数据之前呈现，特别是因为当页面加载时，

ul

不直接可见。我知道，通过使用Ajax从客户端发出请求，然后使用JavaScript将项目添加到列表中，可以完成上述操作。但是，我想知道Pug是否允许使用一种更基于服务器端的方法，例如，在

Pug.render（）

？

中使用chunked response发送部分页面（HTML标记），然后在后端处理完更多数据后，发送另一个页面块。但是，这种方法有一些限制，不能在已发送的数据之间插入内容

至于帕格，它是模板库，与将数据发送回客户端无关。您可以使用Pug为整个页面创建HTML，也可以只是其中的一部分。然后根据您的意愿发送来自帕格的输出

示例#1 下面我编写了一个简单的NodeJS演示，展示了如何分块发送HTML。每秒将发送新的块。10个区块后，将发送结束标记。每个区块一到达就应在浏览器中呈现

consthttp=require（'http'））
常数端口=3000
常量主机名='localhost'
const server=http.createServer（主）
主功能（req、res）{
res.setHeader（'Content-Type'，'text/html；charset=UTF-8'）
res.setHeader（'Transfer-Encoding'，'chunked'）
设chunksLeft=10
res.write（'分块响应演示'）
res.write（`Hello chunks！我将发送${chunksLeft}项。
`）
函数sendChunk（）{
chunksLeft-=1
res.write（`
条目
`）
如果（chunksLeft>0）{
setTimeout（sendChunk，1000）
}否则{
res.end（“”）
}
}
sendhunk（）
}
函数消息（）{
log（`listing on${hostname}:${port}…`）
}
侦听（端口、主机名、消息）

示例2 下面的代码展示了如何使用axios和pug库从外部API获取和呈现数据，使用上一个示例中的概念

consthttp=require（'http'））
常量axios=require（'axios'）
常量pug=require（'pug'）
常数端口=3000
常量主机名='localhost'
const server=http.createServer（主）
常量模板=
`doctype html
html
头
使用帕格和axios的标题分块响应
身体
h1你好，大块！
下面是从HTML下载并转换为HTML的示例数据`
常数表=
`ol
每个人都有自己的任务
li=t.title`
主功能（req、res）{
res.setHeader（'Content-Type'，'text/html；charset=UTF-8'）
res.setHeader（'Transfer-Encoding'，'chunked'）
res.write（泥渲染（模板））
axios.get（）https://jsonplaceholder.typicode.com/todos）。然后（回复=>{
res.end（pug.render（list，{todos:reply.data}））
}).catch（（）=>{
res.end（pug.render（'p错误：无法下载TODO！'））
})
}
函数消息（）{
log（`listing on${hostname}:${port}…`）
}
侦听（端口、主机名、消息）

更多信息：

---

谢谢。虽然这在我在问题中阐述的示例中并不直接适用，但它非常有洞察力。在我的示例中，使用Ajax从客户端发出请求，然后使用JavaScript将项目添加到列表中可能是最好的方法，对吗？通常选择在客户端使用Ajax，因为它提供了更大的灵活性，允许在任何需要的地方“注入”数据。这完全取决于您的情况（业务需求、代码库等）。如果您真的想渲染服务器端，这当然是可能的。将setTimeout with request切换到外部API，然后处理来自API的响应（例如使用pug编译），然后将结果传递到

res.write（）

以将其发送到客户端，然后使用

res.end（）

完成。另外，还可以从后端流式渲染无限的gif图像，例如：。太棒了！我喜欢这种方法。现在肯定有时间玩；-）我为您添加了第二个使用外部API和Pug模板库的示例，请欣赏。