🔥 หากใครกำลังสงสัยว่า Client-Side Rendering และ Server-Side Rendering มันแตกต่างกันยังไง? เหมาะกับการใช้งานแบบไหน วันนี้แอดสรุปมาให้เพื่อนๆ แล้วจ้า ไปอ่านไปเลย!!
.
✨ Client-Side Rendering (CSR) - การแสดงผลฝั่ง Client
การทำงานของมันคือเมื่อเราสร้างเว็บด้วย React, Angular, หรือ Vue จะมีการทำงานแบบ SPA (Single Page Application) คือในช่วงแรกที่ผู้ใช้เปิดเว็บมา มันจะมีแค่คำสั่ง HTML พื้นฐาน หรือแสดงแค่ Template การแสดงผลเนื้อหาเบราว์เซอร์จะทำการส่ง Request ให้ Server ก่อน จากนั้นจะดึง Code JavaScript ออกมา และแสดงผลเนื้อหาต่างๆ ให้กับผู้ใช้ได้เห็นนั่นเอง
.
👍 ข้อดี
ง่ายต่อการเขียน Code
แสดงผลอย่างรวดเร็ว (ยกเว้นการ Request ครั้งแรก)
เป็นการทำงานแบบแยกส่วน
.
👎 ข้อจำกัด
ไม่ค่อยรองรับ SEO
มีความซับซ้อน
.
🙋 เหมาะกับ: เว็บไซต์ที่ต้องการโต้ตอบกับผู้ใช้อยู่บ่อยครั้ง และมีการเข้าใช้งานแบบนานๆ
.
✨ Server-Side Rendering (SSR) - การแสดงผลฝั่งเซิร์ฟเวอร์
การแสดงผลฝั่งเซิร์ฟเวอร์จะแสดงผลทุกครั้งที่มีการ Request ซึ่งเซิร์ฟเวอร์จะทำการรวบรวมข้อมูลที่อยู่ในฐานข้อมูลและส่งข้อมูลที่ได้ไป Render เป็น HTML Template จากนั้นจะถูกส่งไปยังเบราว์เซอร์เพื่อแสดงผลให้ผู้ใช้เห็น
.
👍 ข้อดี
รองรับ SEO
ง่ายต่อการเขียน Code
ทำงานแบบแยกส่วน
.
👎 ข้อจำกัด
มีความซับซ้อน
.
🙋 เหมาะกับ : เว็บไซต์ที่แสดงผลเนื้อหา โดยที่ไม่มีการโต้ตอบกับผู้ใช้
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
同時也有10000部Youtube影片,追蹤數超過2,910的網紅コバにゃんチャンネル,也在其Youtube影片中提到,...
「client-side rendering」的推薦目錄:
client-side rendering 在 BorntoDev Facebook 的最佳貼文
🔥"ทำเว็บสักพัก จะเจอคำถามว่าจะเลือกอย่างไรดีระหว่าง Client Side , Server Side หรือ Pre-renedering ดีนะ !?"
.
โดยบทความนี้อยู่ในในเว็บไซต์ dev.to เขียนโดย Duomly ได้อธิบายไว้ง่ายมาก ๆ มีภาพประกอบอีกด้วย ซึ่งมีข้อดี ข้อเสียของแต่ละรูปแบบครบถ้วนเลยนั่นเอง <3
.
สนใจอ่านคลิกที่นี่ได้เลยคร้าบ > https://dev.to/duomly/server-side-rendering-vs-client-side-rendering-4c5g
.
#borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
client-side rendering 在 Kewang 的資訊進化論 Facebook 的最讚貼文
這一系列文總共有三篇,這是最後一篇。
Funliday 重磅推出新的 prerender 套件 pppr!這是一個 zero config 的 express middleware,只要 npm install pppr,然後在 app.js 裡面加一行 app.use(pppr()) 就可以直接拿來用了。
---
原本在使用 prerender.io 這個套件有時候會出現 504 timeout 的問題,後來發現這個套件用的是比較底層的 API (Chrome DevTools Protocol, CDP),研究它的原始碼後發現 render HTML 的 timeout 判斷上有些怪怪的,本來想試著去改這塊,但對 CDP 不熟,所以用 puppeteer 重寫一套 prerender service,pppr 也就應運而生。
簡單先解釋一下,puppeteer 是基於 CDP 封裝後成為比較容易使用的 API。因為 client side rendering (CSR) 的流行,所以現在要做網路爬蟲的話,愈來愈多會選擇用 puppeteer 來處理。這裡來分享一下在開發 pppr 的時候,有哪些東西要注意的。
1. 把 URL 放到像是 50 人的 LINE 熱門群組,prerender 會遭到大量的 request,因為每個使用者接收到這個訊息之後,因為要顯示 og data,所以就會去打一次 prerender。這裡姑且先稱之為 OG-DDoS 好了 XD,所以一定要做 cache,讓第一個 request 把 HTML 產生出來之後就放到 cache 裡面。然後可以用 LRU cache 來處理,因為這類 URL 都是短時間會被大量使用,之後就很少被用了,用 LRU cache 剛剛好。
1-1. 其實這一段實作還有一些問題,如果在第一個 request 還沒產生出 HTML 之前,第二個同樣 request 就進來了,這樣子 cache 可以說是根本沒作用,還要再找時間來處理 lock 機制才行。
2. 每一個 request 要新開一個 page 才行,如果沒有每個 request 都開新 page 的話,會造成 A request 還沒處理完,B request 就用同一個 page 做 render,這樣子 A request 就會 504 timeout 了。所以一定要記得每個 request 都要新開 page。
3. 因為 headless chrome 的 user agent 就叫做 HeadlessChrome,為了避免在 render 的時候會出現意料外的狀況,保險一點還是把 HeadlessChrome 改成 Chrome 會比較好。
4. 注意 redirect。因為 expressjs 跟 puppeter 是兩個不同的 context,對於 redirection 來說,expressjs 會回傳 3xx 系列的狀態碼,但 puppeteer 則會直接執行完成。所以把 puppeteer 放在 expressjs 裡面執行的話,必須要處理 redirect chain,讓 expressjs 能回給 client 正確的狀態碼才行。
5. pppr 因為是發想自 prerender.io,所以 interface 也一樣是 /render?url=https://example.com。 但有時候原始的 url 後面會包含 query string,所以 expressjs 要用 URLSearchParams 另外做些處理,才能取得完整的 url。
開發 pppr 基本要注意的事項大概就這樣,總之記得給星,有任何問題歡迎發 issue 跟 pr 喔!
#pppr #prerender #funliday
client-side rendering 在 コバにゃんチャンネル Youtube 的精選貼文
client-side rendering 在 大象中醫 Youtube 的最佳貼文
client-side rendering 在 大象中醫 Youtube 的最佳解答
client-side rendering 在 [Day 14] Server-Side-Rendering - (1) - iT 邦幫忙 的相關結果
在講Server-Side-Rendering 之前,我想先談談與之相對應的概念: Client-Side-Rendering (CSR)。在前端框架(React、Vue、Angular)盛行後,SPA ... ... <看更多>
client-side rendering 在 Client-side vs. Server-side vs. Pre-rendering for Web Apps 的相關結果
Client -side rendering allows developers to make their websites entirely rendered in the browser with JavaScript. Instead of having a different HTML page per ... ... <看更多>
client-side rendering 在 Client-side Render 和SSR 的差別 - Noob's Space 的相關結果
Client -side Render 和Server-side Render (以下簡稱CSR、SSR)最主要的差別,就在於有了資料後要在前端渲染還是在後端渲染。 ... <看更多>