Question

我使用node.js和ejs作为我的模板，我包含了header.html，其中包含所有的html文件的所有库和样式文件。我遇到的问题是，当我在html文件之间切换时，它会重新加载所有的html，css和js（例如：home.html和about.html）。

如何缓存js和css文件，避免在渲染时重新加载它们？

是否有一种简单方便的方式（插件）来换出正文内容而不是每次为每个html文件重新加载header.html？

HTML文件（home.html和about.html）

<% include header.html %>
<body>
    <% include navbar.html %>
    <% include menu.html %>
</body>

为home.html和about.html配置文件

router.get('/', function(req, res) {
    req.getConnection(function (err, conn) {
        res.render('home', {data: rows});
    });
});

我需要在后端执行大量的查询，并且需要将数据返回到前端。

Answer 1

您要求做的是构建一个应用程序，该应用程序加载将保持静态的数据，同时根据用户交互或其他任何方式动态更改站点的某些区域。

这称为单页面应用程序（SPA https://en.wikipedia.org/wiki/Single-page_application），与此相关的主要技术是AJAX。有很多方法可以做到这一点，许多框架，如AngularJS，Knockout等，也可以帮助你做到这一点。

如果您通过服务器端代码加载新的页面状态，那么如果您希望以正确的方式实现此效果，则需要重构或最好重建您的体系结构。每次用户刷新页面时，必须将所有数据重新发送给用户，因此您必须重新发送整个视图（数据和dom节点脚本包括图像等）。在UI上执行。

你可以服务器缓存一些东西，甚至用户尚未访问过的客户端缓存页面...但是没有ajax，你真的无法解决每次你想要重新加载整个页面的事实更新。

有更多关于如何使用NodeJS构建这个版本的演示，而不是海洋中的鱼，但这里是我的SERP结果中最受欢迎的一个https://scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular。