動的にサーバー側のコードなしですべてのページにヘッダーとフッターを含める

Question

私はWebアプリケーションを開発しており、サーバーサイドでHTMLを生成しないでクライアントを厳密にHTML/JS/CSSにしたい。

サーブレットコンテナは、ステートレス認証を使用してクライアントへのREST APIを提供するTomcatです。これにより、スティッキーセッションや一部の外部ストアのセッション管理を心配することなく、今後スケーリングを簡単に行うことができます。

現時点では、JQueryを使用して、ページの読み込み時にheader.htmlとfooter.htmlを動的に挿入しています。予想通り、ヘッダーとフッターが表示されるまでに時間がかかります。

ウェブサイトの各ページに静的にHTMLを置くことは別として、人々はオプションとして何をお勧めしますか？

Answer 1

1つのページのアプリケーションを作成することができるので、ヘッダーとフッターは同じままで、本文だけがコンテンツを変更します。

このような何か： https://jsfiddle.net/ArnoutPullen/0egv7rdL/1/

index.htmlを：どのような理由のためにD

<header> 
    Header 
    <li class="customers" title="Customers">Customers</li> 
    <li class="companies" title="Companies">Companies</li> 
</header> 
<div class="body">Body</div> 
<footer> 
    Footer 
</footer> 

main.js

$(document).ready(function(){ 
    $("li").click(function(){ 
    $(".body").html($(this).attr('title')); 
    //$(".body").load('customers.html'); 
    }); 
}); 

customers.html

customers