静的コンテンツ、動的コンテンツの使い分けに関して

Question

静的コンテンツ、動的コンテンツ、CloudFrontに関連して質問です
現在私はNode.js + Expressを用いて、AWSの環境下で自身のブログサイトを作成しております。
その中で、コンテンツの実装方法について、以下質問です。

【質問】
ブログサイトは、1つ1つの記事は静的コンテンツが多数を占めている場合が多いと思います。
（私が今構築しているWEBサイトは、現状、だれが見ても同じサイトが表示されるものなので、そういう意味で静的コンテンツと考えています。）
★その場合、ヘッダ、フッターのような共通化したいHTMLの部分はどの仕組みを利用して設計・実装するのが良いでしょうか？
今私はEJSを用いた共通化を行っていますが、この場合、静的コンテンツではなくなる(毎度サーバがレンダリングしてHTMLを返却しているため)認識です。
jqueryなどの方法はあるみたいですが、タグにidを指定する必要があり、script,metaタグは共通化できないように見え、EJSのincludeよりも利便性が落ちるのでは？と考えています（←勉強不足の場合はご教示ください。）
ただ、現状の実装のままだと、毎度静的コンテンツに対して、オリジンサーバへのアクセスがあり、設計的にきれいではないと考えています（静的コンテンツはS3、キャッシュサーバを用いたアクセスが主流の理解のため）
一方で、CloudFrontは動的コンテンツのキャッシュも可能ということもあり、今後のアップデートを考慮して、現状のままでもよいのではないかと考えています。

Answer 1

私が今構築しているWEBサイトは、現状、だれが見ても同じサイトが表示されるものなので、そういう意味で静的コンテンツと考えています。）
その場合、ヘッダ、フッターのような共通化したいHTMLの部分はどの仕組みを利用して設計・実装するのが良いでしょうか？

Node.jsを使うのは同じですが、
訪問者がブラウザを使ってアクセスしてくる前にコンパイルして
生のHTML、JS、CSSファイルにしてしまってから配信する手法は考えられます。

その場合、NginxやCloudFront等のパワフルな静的コンテンツ配信の仕組みを強く使えるので
サーバーマシンの負荷軽減、捌けるユーザーの数に良い影響があるでしょう
(例えば記事がバズって、訪問者が押し寄せた時とかね)

ただまぁ「CloudFrontは動的コンテンツのキャッシュも可能」との事なので
設定などを見直してみたり弄ったりすればどうにかなる範疇の話でしょう。
優先順位としてはそこまで高くないんじゃないかと思います。

もし興味があるなら、EJS公式サイトを下にスクロールしていくと、
Node.jsのコードやCLIの指定方法が記述されているので、
これを元に静的ファイルを吐き出すようなスクリプトを組んで実行するのも良いと思います。

---

jqueryなどの方法はあるみたいですが、タグにidを指定する必要があり、script,metaタグは共通化できないように見え、EJSのincludeよりも利便性が落ちるのでは？と考えています（←勉強不足の場合はご教示ください。）

jQueryに限らないJavaScript全般の話になりますが、
WebブラウザがHTMLを読み込み描画する時、
「DOMツリー」を生成してメモリ上に展開します。
その後、画面を動的に動かしたかったらJavaScriptを使ってDOMツリーを編集してください、そうすればその変化に追従するよう画面を更新しましょう。
これがJavaScriptの存在意義になります。

記事を提供するブログサイトでこれは必要でしょうか？
Webページをスクロールしたら重要箇所に下線を引いてくれるような機能を作り込めば嬉しいかもしれないですね。
そういう付加価値という目線では役に立つかもしれませんが、根幹の所では不要です。

逆にGoogleが提供しているGmail、グーグルマップ等のサイトはJavaScriptの機能をフルで活用しなければサービスとして成り立ちません。
こういったWebアプリに属するサービスを創造するのにJavaScriptは強い味方となります。

---

【おまけ】

超どうでも良いですが、ブログ記事を書くのにEJSってどうなんでしょうね。
人間がHTMLを編集するのは中々精神力が削られる辛い作業だったりします。
開きタグと閉じタグの管理が忙しくて、根幹の記事に集中出来ないんですよね。

なのでMarkdownとかPugとかに移行出来るならそちらの方が良いと思います。

こういう路線で考えると色々選択肢があるんですよね。
一応下に参考記事を載せておきます。

• 静的サイトジェネレータ「Hugo」と技術文書公開向けテーマ「Docsy」でOSSサイトを作る - さくらのナレッジ
• 静的サイトジェネレーターの人気ランキング「StaticGen」 - JavaScript勉強会

StaticGenで紹介されてるNext.jsとかNuxt.jsとか
おまえらWebアプリ作るライブラリだろ全然別物じゃん感はありますが、調査の足しにはなるかと思います。

本質問を読んだ上の私の感覚だと、
Hugoが一番マッチしてそうだなと感じました(コンパイル速度は記事が増えれば増える程効いてくる)
Node.jsが良ければHexoとかVuePressとか良さそうですね。

Comments

[kangjoon]

miyabiさん、ご回答ありがとうございます。
また、確認が遅くなり大変申し訳ございません。

>Node.jsのコードやCLIの指定方法が記述されているので、
>これを元に静的ファイルを吐き出すようなスクリプトを組んで実行するのも良いと思います。
→ご教授ありがとうございます。確認してみます。

>超どうでも良いですが、ブログ記事を書くのにEJSってどうなんでしょうね。
>人間がHTMLを編集するのは中々精神力が削られる辛い作業だったりします。
>開きタグと閉じタグの管理が忙しくて、根幹の記事に集中出来ないんですよね。
→ご指摘の通りです。正直なところ、別の学習サイトにて、現況したのが、NodeJSとEJSでのサイト構築だったので、それを活かして今回作成してみたかっただけです（結果、よくない設計になっていますが、、）
それ以降の回答にてご教授いただいた方法について、調べてみて次回アップデート時に活用させていただこうと思います。

改めて、詳細にご教授いただき誠にありがとうございました。