Bester Weg für statische Seiten zum "Einbetten" von bspw. einem Header

[Rolf B]

Hallo Samuel,

wenn Du Teile wiederverwenden möchtest, musst Du irgendeinen Tod sterben.

• In der IDE zusammenbauen

  • Es gibt Webseitengeneratoren, in denen Du die Stellen zum Einbinden der Templates markierst, und die Dir dann die statischen Seiten generieren.

• Beim Seitenabruf serverseitig zusammenbauen

  • mit SSI
  • low-level mit PHP oder einer anderen Programmiersprache
  • high-level mit einem Website-Framework, z.B. ASP.NET, JSP, Elixir

• Am Client zusammenbauen

  • mit JavaScript, handgeschnitzt oder verframeworkt (z.B. React)
  • mit Hilfe von <link rel="import" src="....html">

Eins aus dieser Liste gibt's leider nicht mehr. Und es hätte auch zu der Zeit, wo es das gab (Chrome 36-79), nicht ohne JavaScript funktioniert (siehe hier). Offenbar sieht niemand einen Grund dafür, das dynamische Zusammensetzen von Seiten als native Browserfähigkeit zu implementieren.

Grundsätzlich gibt es zwei Ansätze für komponentenbasierende Seiten-

1. Eine Rahmenseite enthält alle wiederverwendbaren Teile und bindet den individuellen Teil als Komponente ein (z.B. ASP.NET Masterpages)
2. Jede individuelle Seite enthält einen vollständigen HTML Rahmen und bindet die wiederverwendeten Teile ein (z.B. Header, Footer, Navigation).

Du scheinst Variante 2 anzustreben, aber die Variante 1 ist eigentlich die bessere, weil Du dann weniger Boilerplate-Kram zusammenschustern musst. Wenn Du das rein clientseitig erledigen willst, müsstest Du die Seite in dieser Art abrufen:

https://example.org/mysite/index.html?subpage3

Oder ähnlich. Und in index.html ist Code, der aus der Location den Querystring ausliest und die entsprechende Komponente nachlädt und in den Komponentenplatzhalter einsetzt.

Du kannst auch "schicke" URLs verwenden und die mittels mod_rewrite im Apache in die index.html umwandeln. Dann musst Du aber mittels Cookie mitteilen, welcher Seiteninhalt gewünscht ist (siehe Flag-Übersicht hier). D.h. der Server muss mithelfen - und dann würde ich eher anstreben, SSI zu verwenden.

Nachteilig an jeglicher clientseitigen Seitenkonstruktion ist allerdings, dass es zu einem FOMC kommen kann (Flash Of Missing Content), denn das Nachladen kostet ja Zeit. In einer Web-Application, die über einen Serviceworker gecached wird, ist das nicht so schlimm. Wenn die Inhaltskomponente vom Server kommt, musst Du den FOMC mit einer sinnvollen visuellen Wartemusik überbrücken. Solche Seiten sieht man durchaus öfters, diesen Kummer sind Seitenbesucher gewöhnt.

Rolf