cache and avoid reloading html,css, and js files
Question
I am using node.js and ejs for my template, and I included the header.html which contain all the libraries and style files, for all my html files. The problem that I have is that it reloads all the html, css, and js when I switch between html files (eg: home.html and about.html).
How can I cache the js and css files and avoid reloading them when I render?
Is there a easy and convenient way (plugins) to swap out the body content and not reload header.html every time for every html files?
HTML files (home.html and about.html)
<% include header.html %>
<body>
<% include navbar.html %>
<% include menu.html %>
</body>
Route files for home.html and about.html
router.get('/', function(req, res) {
req.getConnection(function (err, conn) {
res.render('home', {data: rows});
});
});
I need to perform alot of querys in the back-end, and needs to return the data to the front-end.
1 answers
solution1
1 2015-06-17 01:50:08
What you are asking to do is build an application that loads data that will remain static while certain area(s) of the site a dynamically changed based on user interaction or whatever.
This is called a single page application (SPA https://en.wikipedia.org/wiki/Single-page_application ), and the main technology involved with this is AJAX. There are many approaches to doing this and many frameworks such as AngularJS, Knockout etc that help you do this as well.
If you are loading new page states via server-side code then your architecture will need to be refactored or preferably rebuilt if you wish the achieve this effect the right way. Every time your user has a page refresh, all of the data must be re-sent to the user and because of this you will have to resend the entire view (data and dom nodes script includes images etc..) with each update you wish to perform on the UI.
You may server cache some things, or even client cache pages that the user has not been to yet... but without ajax there is really no way around the fact that you must reload the entire page each time you wish to make an update.
There are more demos of how to build this with NodeJS than there are fish in the ocean, but here the most popular one on my SERP results https://scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.