Loading content into index Vs. Loading header, footer & menu on every page?

Hello there, I'm new to this website.

So, here's my problem. I don't know what is the most recommendable and why in the following:

1. Loading my website pages/exteal-files into a "div-content" in my index file (like an iframe, but I prefer a div.)
or
2.Loading my header, footer and side-menu in each of my website pages. (Which it happens I have the 3 of them on the same file(index).

I've been been doing the first option. My website should always be 100% responsive, header, footer, side-menu and div-content are done flexboxes. And I need to maintain it this way, since if I update any of the them regarding width and height everything else will accommodate as well.


thanks for your time.