Combine multiple html pages with repeated elements: php, js, iframe or other?

Question

There are several methods to combine multiple html pages into a website with repeated elements, eg a header or navigation menu.

Repeated elements' code should not be repeated in every html and shouldn't be reloaded every time a new page is loaded.

I'm new to web development and wondering which would be a better practice. I'm not looking for opinions, but rather reasoned arguments from experienced web developers as to what would be a a best practice to tackle this.

My current favourite is the html iframe tag: https://www.w3schools.com/tags/tag_iframe.ASP

client side, using js, in particular jquery like so: https://stackoverflow.com/a/18712605

server side using Php like so: https://stackoverflow.com/a/3809687

Answer 1

If you are not using any framework i think PHP solution is simpler and is going to have better performance. Using jQuery just for this one thing will slow your page more, if you are not using jQuery elsewhere.

Answer 2

It depends, you can do everything front-end (js) or back-end (php). The front-end will be compiled on runtime, so you can refresh only what needs to be refreshed. When you do it backend, the whole page will be build and be send to the client, no matter what parts of the page you reuse. For small chenges you can do an ajax call to fill certain data.

Answer 3

I would say the second method is preferred because not all websites require a backend while every website has a frontend (at least speaking generally). You can implement the header with JS in different ways depending on the framework you use.