はじめに

Express を勉強していて、「動的」と「静的」の違いによってコードの書き方が変わることに混乱したため、自分の備忘録としてまとめました。
※Udemyや独学で勉強している方の基礎固めになれば幸いです。
独学初心者のため、考え方に相違がある場合はご指摘いただけると幸いです

動的ファイルと静的ファイルの違いとは？

Expressでは、「ファイルの提供方法」によって動的・静的に分かれます。
どちらを使うかは、ページの内容が変わるかどうかで判断！
下記で覚えるとイメージしやすかったです。

	例	特徴
静的ファイル	会社概要ページ（about.html）	事前に作成されたHTMLをそのまま配信
動的ファイル	検索結果ページ（search.ejs）	ユーザーごとに異なるデータを埋め込んで生成

それぞれの特徴を詳しく見ていきます。

静的ファイル
.html や .css など、あらかじめ作成されたファイルをそのまま表示する
express.static("public") を使って提供する

例：静的なページ（about.html）を配信

app.use(express.static("public"));  // publicフォルダの中身を静的ファイルとして提供

▼ 静的ファイルの構成

/my-express-static
 ├── public              // 静的ファイルを格納するフォルダ
 │    ├── about.html     // 固定ページ（静的ファイル）
 │    ├── styles.css     // CSSファイル
 │    ├── script.js      // クライアント用のJavaScript
 ├── index.js            // Expressサーバーファイル
 ├── package.json        // Node.jsプロジェクト設定

動的ファイル
サーバーでデータを埋め込んで HTML を生成する
テンプレートエンジン（EJS など）が必要
res.render("search", { results }) でデータを渡して表示する

例：検索結果ページ（search.ejs）を動的に表示

app.get("/search", (req, res) => {
  const results = ["Apple", "Banana", "Cherry"];  // 検索結果のデータ
  res.render("search", { results });  // search.ejs にデータを渡して表示
});

▼ 動的ファイルの構成

/my-express-dynamic
 ├── views               // 動的ファイル（EJSテンプレート）を格納するフォルダ
 │    ├── search.ejs     // 検索結果ページ（動的ファイル）
 ├── index.js            // Expressサーバーファイル
 ├── package.json        // Node.jsプロジェクト設定

💡まとめ

「サーバーからデータを取得・更新するなら動的、それ以外は静的」と考えると理解しやすかったです。