静的サイトと​動的サイト——そして​Reactや​Pythonは​どこで​働くのか

どの​Webページも​ブラウザには​HTML・CSS・JavaScript​（＝画面を​作る​3つの​基本部​品）と​して​届く。​本当の​分かれ目は​「その​HTMLを​いつ作るか」である。​静的サイトは​完成済みの​ファイルを​そのまま​送り、​動的サイト​（＝dynamic、​アクセスの​たびに​中身を​組み立てる​サイト）は​データベース​（＝データの​保管庫）から​中身を​差し込んで​HTMLを​その場で​作る。​Reactや​Pythonは​HTML/CSS/JSを​置き換えるのではなく、​それを​生成・操作する​道具である。

根本の​違い

• 静的サイト：ある​URLに​対し、​サーバーは​同じ​完成済みファイルを​返すだけである​——ディスク上の​文書を​読んで​そのまま​送り返す​（MDN）。
• 動的サイト：サーバーが​アクセスの​たびに​HTMLを​組み立てる。​多くは​HTMLテンプレート​（＝穴​あきの​雛形）に​データベースの​中身を​差し込む方式であり、​同じ​URLでも​利用者ごとに​違う​内容を​返せる​（MDN）。
• どちらでも​ブラウザが​受け取るのは​HTML/CSS/JSである​——違いは​「誰が​・いつ」​それを​組み立てるかに​ある。

Reactと​Pythonの​出番

• ブラウザが​そのまま​動かせるのは​HTML/CSS/JSの​3つだけであり、​ここは​何を​しても​変わらない。
• React​（＝リアクト、​Meta製の​JavaScript用ライブラリ）は、​画面の​HTMLを​「再利用できる​部品」と​して​組み立てる。​ブラウザ上で​その​場で、​あるいは​事前の​ビルド時に​生成し、​複雑な​UIを​手書きHTMLで​書かずに​済ませる。
• Python​（＝パイソン、​汎用プログラミング言語）は​多くの​場合、​動的サイトの​サーバー側で​働く​——データベースと​やり​取りし、​ログイン確認や​業務ロジックを​回し、​仕上げた​HTMLや​データを​返す。

では​動的サイトは​「SNSのような​もの」なのか

• そのとおりである​——SNS​（X・Instagram等）は​動的の​典型例で、​フィード​（＝流れてくる​投稿一覧）は​利用者ごとに​データベースから​生成される。
• ブログ・ドキュメント・個人の​ノートは、​利用者ごとに​違う​ページを​作る​必要が​普通は​ないため、​静的で​十分である。
• 第三の​道​（この​サイト）​：SSG​（＝Static Site Generator、​静的サイト生成器）が​公開時に​Reactを​一度だけ走らせて​全ページを​先に​作り​置きする。​Reactで​書く​快適さを​保ったまま、​届けるのは​素の​静的ファイルだけに​なる。

まとめ

届くのは​常に​HTML/CSS/JSである。​静的＝作り​置きの​ファイル、​動的＝アクセスごとに​生成、と​いう​違いに​すぎない。​Reactや​Pythonは​その​HTMLを​作る​ための​道具であり、​利用者ごとに​ページが​変わらないなら​静的を​選べば​よい​——そして​コンテンツ系サイトの​大半は​それで​足りる。

出典・参考

• Introduction to the server side — Static sites / Dynamic sites (MDN) — ドキュメント