🔥 หากใครกำลังสงสัยว่า 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 - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
csr ssr 在 Kewang 的資訊進化論 Facebook 的最佳解答
今年在 ModernWeb 分享的題目「pppr - 解決 JavaScript 無法被搜尋引擎正確索引的問題」,聽眾的回饋前幾天出來了。
雖然沒有 高見龍 大大突破圖表的那麼神 XDD,但也算是有達到自己的期待。其中聽眾的一些建議小編也會記下來,持續改進,期待明年的分享能夠讓大家更容易理解。
---
l 感謝以簡單易懂的方式,介紹CSR與SSR以及prerender
l 辛苦了~
l 給了前後端分離部署新的想法~
l 講解 CSR SSR 希望可以搭配 動畫 或 demo,流程圖無法清楚 SSR 為什麼這樣能運作
l 東西滿滿乾貨,但小弟太廢,當下跟不上QAQ,希望有人錄影
l 有點難吸收 但很實際
l 我目前使用的是 Angular Universal,不過我覺得大神透過 pppr 實作的 SSR 架構,效能上更佳,未來會嘗試採用這樣的 SSR 架構
l 謝謝
l 有點深,名詞帶回家當作業
l 講的非常好
l 謝謝
l 謝謝分享
l 沒什麼好說的
l 謝謝老師
l 有點卡...
l 講得有共鳴
l 感謝用心分享
l ppppppppppr
l 覺得講者技術很高深
l 講解得非常清楚,對CSR&SSR有更深的理解
l 謝謝分享PPPR~
l Good
l 讚
l 很清晰易懂
l 感覺用得到,感謝
l 實用,新手也很喜歡聽
l 很棒的分想,會讓人想試試 pppr!
l 謝謝分享!
l K旺大大講的內容雖然不是很懂,但在初學前端知識的我,了解到寫網頁會接觸到許多部份,透過前後端的配合,才能把網頁寫好寫完整,也會在空閒時間去深入了解pppr。謝謝大大。
l 嘸
l 讚
l GOOD
l great
l 後半部曲線突然升高了
l 感謝講者群在聊天室的補充
l 感謝
l 我是後端工程師,但是支援少部分前端,能學到SSR的技巧真是太好了
l 很棒的內容
l 內容實用
l 讚....讚不絕口
l 太難拉 聽到一半開始放空
l 講得稍微有些快 簡報都看不到ˊˋ
l 聽不是很懂,但原來可以這樣做,未來可以試看看
l 可!
l 有點困難(可能是因為公司平常是由後端在處理ssr的部分)
l 我沒用過
l 讚讚 強強滾
l 學習到一個新架構/想法,只是要一直改user agent就.......
l 普通
l 贊
l 最近常用javaScript 學到了許多知識 更上一層樓了
l 可以上傳這一位講者的影片檔嗎
l 一直都很喜歡Funliday,之前不知道有pppr可以使用,而且還這麼方便
l 之前有聽過偷米分享前端怎麼做SEO,今天聽K大分享,雖然很多地方懵懵懂懂,但是聽到了新東西,感覺很棒。
l 希望可以多一點老師露出的畫面(欸
l 放著當背景音樂聽,但這堂好像意外地很吸引人
#funliday #pppr #prerender #ssr
csr ssr 在 Kewang 的資訊進化論 Facebook 的最佳解答
這次在 Modern Web 分享的 pppr 就是之前在處理 SSR 所開發的一個後端套件,可以讓前端工程師不用改任何一行程式碼,純粹在後端就可以把這個難搞的問題完美解決。
內容包括 CSR 及 SSR 的比較,以及 pppr 在開發時所遇到的問題,以及如何解決這些問題。如果前端在處理 SSR 時遇到不少問題,可以來試試 pppr,一定會讓你節省不少時間!
#modernweb #pppr #funliday #prerender #ssr
csr ssr 在 是Ray 不是Array - 面試的時候SPA、CSR、SSR、MPA... 的美食出口停車場
面試的時候SPA、CSR、SSR、MPA 這幾個專有名詞很常見,如果可以的話還是會希望盡可能地去理解它會比較好唷~ https://hsiangfeng.github.io/other/20210529/2519649612/ ... <看更多>
csr ssr 在 SvelteKit Tutorial - 42 - SSR and CSR - YouTube 的美食出口停車場
Courses - https://learn.codevolution.dev/ Support UPI - https://support.codevolution.dev/ Support Paypal ... ... <看更多>