jQueryでHTMLの共通部分をインクルードする懸念点 #HTML

概要

過去にRailsの様な全部載せフレームワーク使う場合を除き、簡素のプロジェクトを運営する際に、HTMLの共通部分を記述する際に、これってDRY原則的にメンテナンスが大変になるのではと考えjQueryを用いてインクルードさせてはいけないのかと考えたことが御座いました。Railsの様なフレームワークを用いれば、当然この様なことが可能になりますが、jQueryでインクルードを実現することが出来るのか？というのがアジェンダとなります。
この事象について私なりの見解を記述させて頂きます。

本論

HTMLのページ間で共有する要素がある場合、例えばヘッダーやフッター、ナビゲーションバーなどがそれに当たりますが、これらの要素をすべてのHTMLファイルに直接書き込むと、DRY原則的に、メンテナンスが大変になるのではと前述させて頂きました。そこで、これらの共通部分を別のHTMLファイルに抽出し、それを各ページに挿入（インクルード）することを考えました。

jQueryを使用すると、このような要素の挿入が非常に簡単になります。次のコードスニペットは、共通のヘッダーを各ページにインクルードする例を示しています。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script> 
    $(function(){
      $("#includedContent").load("header.html"); 
    });
    </script> 
</head>
<body>
<div id="includedContent"></div>
<!-- 他のコンテンツ -->
</body>
</html>

上記の例では、header.htmlは共通のヘッダーコンテンツを含むHTMLファイルとなります。そして、$("#includedContent").load("header.html") というコード行がこのファイルを読み込み、#includedContentというIDを持つdiv内に挿入します。

問題点

しかし、このアプローチにはいくつかの問題点があると考えます。

JavaScriptの依存性：ユーザーが何らかの理由でJavaScriptを無効にしていたり、ブラウザがJavaScriptをサポートしていない場合、共通コンテンツは表示されません。これは、特に重要な情報が含まれている場合、大きな問題となる可能性があります。
ページの読み込み速度：共通コンテンツを非同期にロードするため、ページ全体の表示が遅くなる可能性があります。これはユーザーエクスペリエンスに悪影響を及ぼす可能性があります。
SEO問題：一部の検索エンジンはJavaScriptを正しく解析できない場合があり、その結果、共有コンテンツがインデックスされない可能性があります。これは、ウェブサイトのSEOに影響を及ぼす可能性があります。

結論

先述させて頂いた内容より、私が知る限りでは、jQueryを用いてHTMLの共通部分をインクルードするのはかなりリスクがあると考え使用しないことに致しました。