承上篇 來源

What is server-side website programming?(part. 2)

Static sites 靜態網站

圖為靜態網站的結構。(來源:MDN)

即使有特定 request ，server 也只會給你一個「寫死的(hard-coded)」內容，這就是靜態網站。

如果 user 想連到網頁， browser 就會發送一個 HTTP GET 的 request 要求解析 user 所輸入的 URL，
server 接受到 request ，回覆帶有 HTTP status(上一篇提到的 200, 404 ...) & document(HTML, CSS, JS, 已經做好的 PDF 檔案或其他檔案) 的 response 給 browser

Dynamic sites 動態網站

有需求時，動態地產生呈現的內容。
一個動態的 HTML 頁面通常都是從 database 把資料插進 HTML 模板(HTML templates)裡面(比起使用靜態網站，這種做法對於存有大量內容的網站更有效率)
動態網站可以根據 user 提供的資訊或儲存的偏好產出不同的資料呈現，也可以在 response 有部分回應時執行其他動作(如社群網站常見的發送通知)
斜線部分我覺得好難翻，原文為：

and can perform other operations as part of returning a response (e.g. sending notifications).

支援動態網站的 code 必須可以在 server 上執行， "server-side programming(或稱後端腳本碼 back-end scripting)" 就是在寫這類的 code

Browser request 與 server response 如同靜態網頁結構圖
但不同於...

圖為動態網站的結構。(來源:MDN)

動態網站 request 會前往 (2) server-side code(圖中 Web Application)，
接著 server 會編譯(interpret)這個 dynamic request，
從 (3) db(database) 讀取需要的資料，把從 db 接收的資料插入 (4) HTML templates，
最後傳回前面生產出來的 (5)(6)HTML 作為 response

Server-side & client-side 不同之處

• 它們有不同的目的
• 通常用不同的程式語言(JavaScript 是個例外！)
• 在不同的作業系統下執行

Client-side 在 brower 上執行，且主要涉及網頁的呈現、渲染，包括 UI 元件選用、建造版型、連結、表單驗證...等等
Server-side 則是執行 response to request ，選擇要呈現的內容，回傳到 browser。負責包括驗證提交的資料、在資料庫儲存資料、接受來自資料庫的資料、發送 client 需要的資料

Client-side 由 HTML, CSS, JS 構成，幾乎甚至完全無法進入底層的作業系統。開發者無法掌控每一位 user 是使用哪個 browser ， browser 在跨瀏覽器有很大的兼容性得以支援
Server-side 可以由數個程式語言寫成，例如 PHP, Python, Ruby, C#, NodeJS ，甚至可以指定特定版本 (延伸閱讀可搜尋: NVM, node version manage)。它有完整的權限可以進入 server 作業系統。

開發者常使用 frameworks ， 它集合了 functions, objects, rules ... 來解決常見的問題，提升開發效率。

無論 client-side 或 server-side ， 各自的 frameworks 所使用範疇相當不同， client-side 簡化樣板及樣式， server-side 提供常見的網頁功能服務