Firebase数据更新时如何实现EJS自动重新渲染页面？

你的问题核心在于在HTTP GET路由里使用了Firebase的on('value')持续监听——HTTP请求是一次性的：当用户第一次访问/feedback时，服务器触发监听并返回渲染后的页面，但后续Firebase数据更新时，监听虽然会继续触发回调，但此时HTTP响应早已发送完成，服务器没法再主动给客户端推送新的页面内容，所以你看不到页面更新，只有控制台能看到数据变化。

修复步骤1：修正后端路由的监听方式 #

把路由里的on('value')换成once('value')，因为HTTP GET请求只需要获取一次当前数据即可，持续监听会造成不必要的内存占用，而且对单次请求毫无意义：

app.get('/feedback', (request, response) => {
  var appRef = firebase.database().ref().child('ApplicationList');
  // 用once替代on，只获取一次当前数据
  appRef.once('value', function(snap) {
    const appList = snap.val();
    console.log('appList', appList);
    const appNames = {};
    if (appList) { // 处理数据为空的边界情况
      const keys = Object.keys(appList);
      for(let i=0;i<keys.length;i++){
        appNames[keys[i]] = appList[keys[i]].longName;
      }
    }
    console.log('appNames = ',appNames);
    response.render('feedback.ejs', {
      pageTitle:'Feedback - Home',
      pageID: 'feedbackhome',
      pageName: 'Home',
      appNames
    });
  }).catch(err => {
    // 处理获取数据失败的异常情况
    console.error('获取数据出错:', err);
    response.status(500).send('服务器错误');
  });
});

修复步骤2：实现前端实时更新（如果需要） #

如果希望页面能实时展示Firebase的更新，不能依赖后端重新渲染，得在前端用Firebase客户端SDK监听数据变化，动态更新DOM。具体做法：

1. 在你的EJS页面中引入Firebase客户端SDK（根据你的Firebase版本调整）：

<!-- 在feedback.ejs的<body>末尾添加 -->
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-database.js"></script>

2. 初始化Firebase客户端（替换成你的项目配置）：

<script>
  const firebaseConfig = {
    apiKey: "你的API密钥",
    authDomain: "你的认证域名",
    databaseURL: "你的数据库URL",
    projectId: "你的项目ID",
    storageBucket: "你的存储桶",
    messagingSenderId: "你的消息发送ID",
    appId: "你的APP ID"
  };
  firebase.initializeApp(firebaseConfig);
</script>

3. 在页面中添加一个用于展示应用名称的容器：

<div id="app-names-container">
  <!-- 初始渲染的内容 -->
  <% Object.keys(appNames).forEach(key => { %>
    <div class="app-item" data-key="<%= key %>"><%= appNames[key] %></div>
  <% }) %>
</div>

4. 添加前端监听代码，实时更新DOM：

<script>
  const dbRef = firebase.database().ref().child('ApplicationList');
  // 监听数据变化并更新页面
  dbRef.on('value', (snap) => {
    const appList = snap.val();
    const container = document.getElementById('app-names-container');
    container.innerHTML = ''; // 清空现有内容
    if (appList) {
      Object.keys(appList).forEach(key => {
        const appItem = document.createElement('div');
        appItem.className = 'app-item';
        appItem.dataset.key = key;
        appItem.textContent = appList[key].longName;
        container.appendChild(appItem);
      });
    }
  });
</script>

这样，当Firebase的数据更新时，前端会自动监听并更新页面内容，不需要手动刷新页面。

内容的提问来源于stack exchange，提问作者bobby.dreamer