iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 3
1
Modern Web

還在想要買哪一堂線上課程嗎?培養看文件的習慣吧!用 MDN 文件學後端:NodeJS & MongooseDB系列 第 3

三日:伺服器端(server-side)的介紹(Static sites, Dynamic sites) , Server-side & client-side 不同之處

承上篇 來源

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 提供常見的網頁功能服務


上一篇
二日:軟體 , 伺服器端 ( server-side ) 的介紹 ( 前導 )
下一篇
四日:Server-side 能做哪些事
系列文
還在想要買哪一堂線上課程嗎?培養看文件的習慣吧!用 MDN 文件學後端:NodeJS & MongooseDB30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言