I am trying to use HTML Templates. Adding them to the main page works.
But as there is a possibility that there will be hundreds of templates it may be overwhelming to store and manage in a main page. I wonder if there is a possibility to store them in local files and load them when needed?
The goal is to only have ONE main page and populate content using HTML Templates.
Well originally a technology called HTML Imports (as part of web components) would do the trick here. However, that part of web components never really took off and instead is opted for as part of the build process (like using webpack for instance). Is that something you can do? Where you have it build the HTML files using the templates in separate files before posting or are you trying to do something more dynamic at run time of the page?
If I interpret your answer correct, you mean “let the server do the job”? If this is what you mean, this is what I already have done.
But using SSR I have found no way other than repeat all content every time. Which means that the page (navigation) is “flickering”.
By letting the server render the semi static parts (navigation) and Javascript do the dynamic parts (content) I hope that the flickering will reduce.
Using HTML Templates “the normal way in the head tag” works, but Imagine 100 big templates in the <head> tag…
<head>
<template id="tsk">
<p>Task</p>
</template>
<template id="prefs">
<p>Prefs</p>
</template>
</head>
This is the reason why I am searching for a way store the dynamic parts on local disc, and load them on-the-fly when they are needed. Why load 100 templates if you only need one singe page?
Or do I have to use a database to store the templates? Any tip is welcome…
Well not necessarily the server, I am talking about bundlers or packagers. Like webpack. You can run them on your machine, they read the local files, build the HTML pages statically and then you would just have to upload the HTML files to the web server. You could also use things like Gatsby I assume (though I never really used that)
I had a quick look at this, but I did not quite understand how I can use this dynamically. How I can load a page when needed? Any example or link like my simple attempt?
Some resources…
Be sure to actually read everything as there are some minor changes with modern versions and even an alternate usage case presented with interpolation. This may seem a bit heavy handed at first, but if you are going to have a big project, this solution may work nicely for you.
In essence, you create your HTML “partials”, you then include those partials in other HTML files. Run webpack with the HTML plugin and it will build out the final “bundled” HTML file. That file will then be straight HTML which you can upload to any host or run locally
Hm but using a bundler would also include all the (possibly unneeded) templates from the start, so to really make a difference you’d need to make sure to only lazy load them on demand… it’s been a while since I’ve been working with webpack though, there might well be a plugin to take care of this. :-)
Anyway, you can just fetch them with vanilla JS too… something like this:
async function loadTemplate (filename) {
const res = await fetch(filename)
const text = await res.text()
document.body.insertAdjacentHTML('beforeend', text)
return document.body.lastElementChild
}
Promise.all([
loadTemplate('prefs.template.html'),
loadTemplate('task.template.html')
]).then(templates => {
templates.forEach(el => {
// Do something with the templates
const content = el.content.cloneNode(true)
document.body.appendChild(content)
})
})
Thanks for the link. I tried to install webpack html loader and got tons of errors (on Mac). So I guess it is not the simplest way to achieve “load on demand”.
Thanks for the snippet. I tried this code but it only reloads the current main window twice. I have found no way to actually load the desired html file from local disc. I think it is impossible.
Well in order to use AJAX you need a server, you can’t load from your file system directly if that’s what you’ve tried.
So the Javascript have to call the backend to serve an html file? Possible?
I may be misunderstanding but that sounds like you are talking about html frames where the main parts of the page are static but only the content frame changes.
That was how everybody built sites in 1999 but was a very bad idea and nobody does it now.
If you only have one main page and the rest is dynamically added then you don’t really have a site as such.
There is my problem. I do NOT have ONE main page - yet. 
My goal is to achieve this in some way. The current solution I repeat the navigation on every page. This is causing annoying flickering as it reloads the entire page.
So my question could also be “How do I avoid flickering”?
All sites do that (unless they are one page sites)
Select an item from the Sitepoint menu and see what happens. Indeed on my slow connection it takes several seconds to load.
If it’s just a small site with a few pages you could just swap the content dynamically but for normal sites it’s not the best idea. Each page should really be it’s own page.
Yes, that’s the way
Unless you dynamically load your other content then you cannot avoid the flicker which is just the page reloading. I’ts something users expect when they go to a new page. It sounds to me as though you are talking exactly about the way that css frames work and they were deprecated because they were a bad idea to start with.
If you only have one page but you call in 1 of 100 templates when called for then how do you link to that page from outside? How do screenreaders see your site and how do search engines index the site? How do the back and forward browser buttons and history work? There are so many issues with that kind of behavior I don’t believe its worth the effort unless its just a few pages that you could call in a tab content section.
This is what MDN says about it.
The problem with too much JavaScript
The problem often comes when people rely on JavaScript too much. Sometimes you’ll see a website where everything has been done with JavaScript — the HTML has been generated by JavaScript, the CSS has been generated by JavaScript, etc. This has all kinds of accessibility and other issues associated with it, so it is not advised.
As well as using the right element for the right job, you should also make sure you are using the right technology for the right job! Think carefully about whether you need that shiny JavaScript-powered 3D information box, or whether plain old text would do. Think carefully about whether you need a complex non-standard form widget, or whether a text input would do. And don’t generate all your HTML content using JavaScript if at all possible.
I’m not trying to put you off but I think you need to think long and hard about this first
The finished application may contain about 100 pages with several sub pages. So we are talking about maybe 1K sub pages. Flickering may be annoying. Who knows.
But. I may got it all wrong. I am just in the beginning of the journey. Two step forward and one step back.
Thank you for your feedback.
In the end it’s your site so you weigh up the pros and cons and go with what works best for you. We all have different opinions which is fine as long as they are well meant.
Good luck
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.