โลกของ Web App มี Cache อยู่ตรงไหนบ้าง ?
HTML-код
- Опубликовано: 25 июл 2024
- ☕️ สนับสนุนช่องเราด้วยการสมัครสมาชิกช่องทางนี้ได้เลย
/ @mikelopster
ฟังไมค์สัปดาห์นี้ เราจะมาพูดถึงเทคโนโลยีอย่าง cache กันว่า มีส่วนช่วยในการ load web application ของเราในจุดไหนได้บ้าง โดยในหัวข้อนี้เราจะพยายามกระจายเล่าการดึงข้อมูลในแต่ละจุดเพื่อให้ทุกคนเห็นภาพการใช้งาน cache มากขึ้น โดยเราจะเล่าถึง cache ทั้งหมด 5 จุดคือ
1. Browser cache
2. Service worker
3. CDN
4. Web server cache
5. Database cache
สำหรับใครที่จะหาไอเดียในการ improve การ load ของ web app ของตัวเองอยู่และยังไม่มีไอเดียว่าจะใช้งาน cache จุดไหนบ้าง มาลองฟังกันได้ในฟังไมค์นะครับ เผื่อจะเป็นไอเดียให้กับทุกคนได้น้า 😁
หัวข้อ
00:00 แนะนำ Session
01:22 หลักการทำงานเว็บไซต์ทั่วไป (แบบ ไม่มี cache)
03:55 Cache คืออะไร / ช่วยอะไรบ้าง / หลักการทำงาน
06:31 จุดที่ 1 Browser cache
08:36 จุดที่ 2 Service worker
12:14 จุดที่ 3 CDN
17:27 จุดที่ 4 Web server cache
21:40 จุดที่ 5 Database cache (ที่ Application)
25:15 ลำดับการใช้ cache และ สรุปเนื้อหาทั้งหมด
ใครมีข้อสงสัยเพิ่มเติม มาพูดคุยแลกเปลี่ยนความรู้กันได้ที่
Facebook page: / mikelopster.dev
Website: mikelopster.dev
พิกัดของด้านหลัง : shope.ee/8A54c8cfkf 
Наука
![NUXT [CRUD] FULLEP คลิปเดียวจบ](/img/1.gif)
อธิบายได้ดีมากเลยครับ ขอบคุณครับ
แน่นมากครับ ขอบคุณครับจารย์
ขอบคุณครับ อธิบายเนื้อหาให้เข้าใจง่าย ฟังเพลินๆ พร้อมมีตัวอย่าง case study ให้ด้วย ติดตามครับ เลิฟๆ❤
คลิปมาทุกวันเลยครับ ดูไม่ทัน ขอบคุณครับ
เป็นช่องที่อธิบายภาพกว้างได้จาก case จริง ทำให้เห็นภาพการใช้งานได้ดีทากคับ
ขอบคุณมากคับ
ฟังเพลินดีครับ
ดูครั้งเเรกติดตามเลย
สุดยอดเลย เพิ่งเคยเห็นคนอธิบายภาพกว้างได้ละเอียดครอบคลุมขนาดนี้
Service worker ใช่อันเดียวกับ cloudflare worker ไหมครับ เห็นมี js เหมือนกันตามที่สอนเลย แต่อยู่บน cf หรือ cdn
ไม่เหมือนกันนะครับ Service Worker คือตัวที่ใช้ run background process ที่ทำงานบน Browser โดยเฉพาะ
แต่ถ้าเป็นโจทย์ของ Cloudflare worker จะทำงานบน cdn cloudflare เป็นหลักนะครับ
การ cache ของ next js อยุ่ในระดับของ web server หรือเปล่าครับ
จริงๆ cache ของ next.js น่าจะเรียกว่าอยู่ในระดับของ Application cache มากกว่าครับ เพราะ cache นั้นจัดการผ่าน node.js (ที่เป็น BE ของ Next.js) ในการจัดการเกี่ยวกับ Content / API Response / Server render
แต่ถึงอย่างนั้นโจทย์ cache ของ Next.js ก็ถือว่าครอบคลุมมากและครับ จนสามารถใช้ cache ของ next.js ในการจัดการเพียงตัวเดียว โดยไม่ต้องใช้ web server cache ก็ได้นะครับ 😁
พี่แพลนจะสอนk8sมั่งไหมคะ😊
มีอยู่ใน plan แน่นอนครับ 😁
ฟังคราฟ ( ช่วงนี้ช่องโตไวจริงนะครับ ) ลงคลิปรัวจัดๆตามแทบไม่ทัน
ต้องวิ่งหน่อยนะ อยู่ช่องนี้ 😂
@@mikelopster 🤣 แต่ก่อนช่วงค่ำจะอ่านหนังสือ แก้โจทย์ นิดหน่อย ประมาณ 2 ชั่วโมง ตอนนี้เพิ่มเป็น 3ละครับ
Nginx หน่อยครับพรีๆๆๆ
ขอไปคิดนิทานเรื่องนี้ก่อนครับ ว่าจะเล่าออกมาเป็นแบบไหนดี 😂
สรุปช่องลงคอนเทนต์วันไหนบ้างครับ ทำไมเหมือนเห็นคอนเทนต์ใหม่ๆลงทุกวันเลย 😅
ช่องเรามี 3 ช่วงครับ (เดี๋ยวผมว่าจะหาวิธีประชาสัมพันธ์อีกที 😅)
- วันจันทร์ = ช่วงฟังไมค์ (เน้นเล่า ไม่มี code)
- วันพุธ = ช่วงลองไมค์ (เน้น code เล่าบ้าง)
- วันเสาร์ = ช่วง Course (เน้นสร้าง Course ตาม timeline ของ course ที่ปักไว้)
เหงาๆวันไหนก็เจอเราได้เรื่อยๆครับ 😆
@@mikelopster อย่างงี้นี่เอง ติดตามยาวๆไปครับ ช่องอะไรภาพปกเป็นแมว แต่ชื่อช่องเป็นกุ้ง น่ารักจริงๆ ☺
ลงคลิปถี่มาก อย่าหักโหมนะครับ แต่รอ Nuxt กับ Next อยู่นะครับ😂
Nuxt ดูได้จากคลิปนี้เลย จริงๆภาพรวมของการใช้งาน Nuxt ทรงๆนี้เลยครับ
ruclips.net/video/FSomc5aOgKE/видео.html
ส่วน Next เจอกันพรุ่งนี้ครับ 😁
อีกหนึ่งงานที่บางทีทำให้ปวดหัวเพราะติดแคช 🤣
การติด Browser Cache คือ ปรัชญาอย่างหนึ่งในชีวิตของ Frontend developer เลยครับ 😂
เลยทำให้ผมติด เวลารีเฟรชหน้าเว็บจะกด ctrl+shift+r ตลอดเลย ไม่ว่าเว็บไหน 🤣@@mikelopster
วันนี้เนื้อหาเข้นข้นมากคราฟต์