作者WalkingIce ( 殺手哥吉拉 13)
看板Web_Design
標題Re: [請益] 網頁技術是如何實現動態生成大量的html
時間Sat Jun 17 16:17:16 2023
※ 引述《xxzrainy (rainy)》之銘言：
: 各位前輩好，小弟目前自學網頁半年，若用語有任何不當還請海涵並指正。
: 最近在練習如何做出一個評論/QA常見問題的區塊。
: 如果是少量的評論，直接替換HTML標籤裡的文字就好。
: 主要是想請教，是什麼樣的技術可以一直動態生成數以百計的評論呢？
: 以我半年的學習角度會讓我聯想到word裡面的合併寄件功能，不知道兩者有無聯繫。
: 懇請各位前輩指點迷津了，謝謝。
我嘗試用比較簡略的方式解釋一些基本的概念，因此有些細節並不是真正
運作的情況，等到你更進階的時候，再去理解細節吧
先簡略地解釋開網頁的時候，Client 跟 Server 的關係
此時 Client 就是你的瀏覽器 Browser，Server 可能是 gmail 或是內容農場
所謂「開網頁」最簡略的講法就是「用瀏覽器下載一個檔案，再顯示該檔案」
有點像是你從別顆硬碟(server)透過 USB 線(網路)拷貝(下載)圖片(html檔)
然後用看圖程式(Browser)打開該檔案
Browser --- REQUEST --> Server
Browser <-- Response(html) --- Server
(中間還有一些 HTTP header 之類的細節就暫時不管它)
Browser 收到 html 之後會發現「喔！我看得懂這一堆亂七八糟的英文字耶！」
同樣的 html 檔案，用文字編輯器打開來，會看到 <body background="red">
等等之類的英文字；用 Browser 的話，它會用比較特別的方式去解讀這串文字
譬如說把畫面上的背景填上紅色，或著在最上方用黑色超大粗體填上 PTT 幾個字
這個「把 html 檔案畫成人眼看到的樣子」就叫 render
(render 的意義很廣，譬如說 server side rendering 就不同於此，先不管它)
User ---操作---> Browser ---Request---> Server
User <--render-- Browser <--Response--- Server
回到你一開始的問題
> 什麼樣的技術可以一直動態生成數以百計的評論呢？
有幾個地方可以達成這件事情
1. Generate server response
既然 server 是回傳一個 html 檔給 client，我們可以在回傳的內容上面做手腳
譬如原本要回傳
<div>
<div> 5/1 的天氣很好</div>
</div>
可以用程式去生出 10 個類似的文字與日期，讓 server 回傳
<div>
<div> 5/1 的天氣很好 </div>
<div> 5/21 的天氣不好 </div>
....
<div> 5/41 的天氣很好 </div> // bug!
</div>
至於怎麼產生，取決於你怎麼實作 server。就是推文內鄉親說的 asp php..etc
除了在 server 端撈資料庫，配合自己寫演算法產生內容之外，還可以做一些事
譬如跑去接 ChatGPT，產生更多像人類的回應，使得內容農場(誤)看起來更有人氣
2. Client generate rendering result
以前的 Browser 比較單純，真的只是單純地顯示 html 的內容。但是 JS 相關技術
進步之後，開啟了這幾年的大前端時代。現在 Server 回傳的 html 檔常會夾帶一些
JS code，讓 Browser render page 的同時也執行該 js script
這些 JS script 可以送 request 給其他 server，也能替換 render 的內容，譬如
按下 F12，在 cosole 裡面惡搞自己的頁面
document.getElementsByTagName('body')[0].innerText = "XD"
既然有了這招，那也能替換頁面裡面的內容，配合你寫的邏輯去更改評論
當然也可以去接 ChatGPT 動態修改顯示的內容。所以推文另有鄉親提到 AJAX, JS
通常會把 1 說成在 server side 做這件事，會把 2 說成在 client side 做
再拿前面的硬碟拷貝來比喻。1 就是你有顆神奇硬碟，根據你的興趣傳回不同的圖片
2 則是這顆神奇硬碟總是傳回相同的圖片，但是會另外傳個 plug-in，讓你的看圖
程式執行這個 plug-in 去修改圖片
因為你的提問，字面上看起來是在最末端的 User 看到的內容，所以兩種方向皆可
但是實務上來說，在 Server side 做會比較合理。直接在 server side 生出一堆
假評論，存進資料庫裡面。每次有人打開該文章就直接進資料庫撈。這樣每個開該
頁面的人都會看到同樣的東西，Server 負擔也比較小 (用資料庫的硬碟空間換 CPU
執行時間)
該頁面可能一開始只顯示 20 則評論，等到 User 點下「請長官再多訓勉幾句」之時
才透過 JS 去跟 server 多撈一點資料，動態更新頁面上的部分內容
這就是另一位鄉親提到的 AJAX 詳細用法
隨著你更深入地探索，未來的問題可能會更複雜，解法可能會更....多采多姿？
或許提示你的開發環境(ie: 用哪些前端、後端 framework)，鄉親們可以更容易
推測你遇到的困難點在哪裡，幫忙減少一些冤枉路
--
有一天小明跟朋友打牌，有張牌不小心掉進水裡。此時女神出現了
女神：「你掉的是這張紅中，還是這張白板？」
小明：「都不是，我掉的是青發。快還我吧大嬸，我缺那張就聽牌了」
女神：「.................(不爽)」
「你真是誠實的好孩子，紅中跟白板都送你吧」
於是小明就相公了。
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 110.233.253.80 (日本)
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1686989845.A.68B.html
1F：推 nottt: 難得的長文推一下，雖然原po不知道還會不會回來看 06/17 22:37
2F：推 kyoe: 認真 06/19 11:41
3F：推 xxzrainy: 我是原po 沒想到竟然能夠被這麼認真的回文 目前正在積 07/17 19:21
4F：→ xxzrainy: 極學習中 網頁的技術讓我感覺到學海無涯 07/17 19:21
5F：推 xxzrainy: 目前使用的開發環境也不過是用vsCode寫寫自己有興趣的程 07/17 19:23
6F：→ xxzrainy: 式碼 實在是還有很長一段路要走XD 07/17 19:23
7F：→ WalkingIce: 加油！ 07/24 07:11