如何在 SSR express 应用上实时更新内容答案

【问题标题】：How to live update content on SSR express app如何在 SSR express 应用上实时更新内容
【发布时间】：2022-10-18 17:22:18
【问题描述】：

我有一个功能齐全的社交媒体应用程序和一个使用 Express、Pug 和 JavaScript 制作的服务器端渲染的 API。

例如，当我对帖子发表评论时，会添加评论，但我必须手动重新加载页面才能显示。

我想知道是否有一种方法可以显示和更新内容而无需使用 JS 重新加载页面？

或者我应该让应用程序客户端呈现反应？

这是应用程序的链接https://github.com/Fedechini/kleory

【问题讨论】：

您的代码中的哪里是您用来将评论插入数据库的发布路线？我似乎在commentController 中找不到它。
嘿！它在commentController 的第28 行。

标签： javascript node.js mongodb express pug

【解决方案1】：

是的，您必须使应用程序客户端呈现。在模板引擎中，你不能使用反应钩子，我的意思是你必须使用useState, useEffect 来加载 cmets 而不加载页面。

【讨论】：

【解决方案2】：

如果您不想刷新页面，则必须使用 Ajax 提交新评论，并且要在页面中显示新评论，您需要使用带有客户端脚本的动态 Html。

它应该类似于以下内容，但在 JSFiddle 中不起作用：

const submit = () => {
  const data = { comment: document.getElementById("text").value };
  fetch("/123/comments", { method: "POST", 
     body: JSON.stringify(data),
     headers: { "content-type": "application/json"}}
  ).then(resp => resp.json().
     then(comment => {
       document.getElementById("comment").innerText = comment; }).
     catch(err => {
       console.log("error");
     }
  ).catch(err => {
      console.log(err);
    })
  );
}

<label>Comment:
 <textarea id="text"></textarea>
 </label>
 <button onclick="submit();">Submit</button>
 <p>Comment:
   <span id="comment"></span>
 </p>

用户单击提交按钮时的步骤摘要：

从<textarea> 中提取下一条评论的值。
调用fetch（仅在新浏览器中）调用以执行异步 Http POST 请求，将新评论发送到您的后端以插入到您的数据库中。
/:postId/comments 函数应返回 Json 响应，新评论已成功插入。
fetch 回调从后端接收新插入的评论，并将其显示在<span> 元素中。

【讨论】：