Lazy load image trong NEXT, React
HTML-код
- Опубликовано: 5 фев 2025
- Việc tối ưu hiển thị hình ảnh là một việc chúng ta luôn phải làm trong các ứng dụng hiện đại ngày nay. Trong video này, chúng ta sẽ cùng tìm hiểu kĩ thuật để tối ưu hình ảnh trong React và NEXT
🔗 Link tham khảo 🔗
www.npmjs.com/...
blurha.sh/
📢 Liên hệ với mình tại 📢
Facebook: / holetex
Tiktok: / holetex
Github: github.com/hol...
Facebook cá nhân: / minhtung09
Email: holetex@outlook.com
Website: holetex.com
🤝 Tham gia làm hội viên của kênh này để được hưởng đặc quyền:
www.youtube.co...
mong anh ra khóa học nextjs ạ
đã xem và áp dụng được rất nhiều kỹ thuật của anh, mong anh ra thêm những kĩ thuật tối ưu nữa để cải thiện server, trải nghiệm người dùng, hơn hết là nâng cao trình độ và tay nghề cho các dev ạ
Toàn những nội dung hữu ích và rất thiết thực tính áp dụng cao. Tks anh❤
em đã từng xài blurhash nay vô tình xem clip thấy a có gợi ý luôn.
Rất thích các tip chia sẻ optimi của a😘😘😘😘
Video hay!
Nhưng phần anh nói về Image component của Nextjs có thể bổ sung thêm như sau. Cái component đó ko chỉ giúp mình thêm cái lazy attribute vào cái image (nếu vậy thôi thì xài cái component đó làm gì), mà nó còn giúp tự động điều chỉnh kích cỡ images dựa trên kích cỡ của thiết bị mà gửi cái requests tới cho "server". Ví dụ, nếu requests được gửi từ điện thoại, kích cỡ của images gốc sẽ được xử lý để phù hợp nhất với điện thoại (nhỏ hơn, chất lượng kém hơn tý vì màn hình nhỏ), tương tự với cái màn hình to hơn. Nói vậy là đơn giản hóa vì cái component này làm rất nhiều thứ để đạt được cái điều nói trên (đặt sourcset, size, ... tự động). Mình ghi "server" bởi vì thông thg nextjs app sẽ dc deployed lên trên vercel, mà vercel thì là theo kiểu serverless. Thì những hình ảnh sẽ được xử lý thông qua "serverless" đó (làm hình nhỏ lại, làm hình bự ra, ...) sau đó mới gửi đến users. Vậy nên khi sử dụng cái component này cần lưu ý là có thể bị vendor lock với vercel (em ko bít nó nếu deployed trên VPS thì nó sẽ như nào), mà vercel thì nó tính tiền như ăn cướp.
Mong anh ra khoá nextjs sớm nhất
Anh làm serri NextJs đi ạ. Chúc anh có nhiều sức khỏe
Mong a ra nhiều video hơn về tutorial
Anh Tùng hướng dẫn thêm các kỹ thuật tối ưu thời gian của Content Download đi ạ
4:28 trong lúc hình ảnh được load thì chưa có ảnh => mà chưa có ảnh thì làm sao nó làm mờ được nhỉ.
nó có 1 thuộc tính placeholderSrc đó bạn, đó có thể là hình ảnh độ phân giải thấp
@@holetex nếu vậy thì bên máy chủ cung cấp ảnh đó nó phải có ảnh chất lượng thấp để tải trước phải không bạn. Với lại mình có xem đoạn đó cũng thấy mỗi ảnh cũng được tải về 2 lần với cùng kích thước.
@@holetexv là đỡ phải thêm 1 cái hình cực nhỏ làm lazy img đúng k ạ
@ phần bạn đang hỏi là của thư viện bên ngoài React Lazy Load Image Component. Nếu bạn mở demo của nó lên sẽ thấy 1 hình luôn có 2 request, 1 request dùng cho placeholder là ảnh kích thước rất bé ~2,3 KB còn ảnh thực tế là request khác kích thước sẽ lớn hơn nhiều. Bạn tìm hiểu thêm trên docs của nó nhé
@@quangdo.vietnam nếu em xài thư viện React Lazy Load Image thì vẫn phải có 1 ảnh placeholder kích thước nhỏ em nhé. Em tham khảo thêm trên docs của nó nhé
Image của next cũng có placeholder mà
Cảm ơn anh đã chia sẻ. Em là dev Wordpress đã 8 năm. Anh có thể làm một series Headless WP + NextJs được không ạ?
Hiện nay 40% web đang sử dụng WP nên e nghĩ đây sẽ là một thị trường béo bở để cho những khách có nhu cầu chuyển đổi WP truyền thống sang Headless WP. Thank you a
Yes, mình cũng khá thăc mắc dụ này. Mình thấy có thư viện Frontity để hỗ trợ code React + Wp nhưng mình start log lỗi quá trời.
Hello anh, tiện làm về Next luôn a ơi, e thấy nói rằng Next chỉ khác React ở phần router thôi à a.
ui, không phải đâu em, nó có thêm 1 rừng feature mới em ạ. Từ giờ anh bắt đầu làm thêm content nhiều về Next, nó là tương lai của phát triển React em ạ
Next khó gấp 10 vạn lần react, bài toán client và server để seo thực sự nản. Chuyển qua php cho lành 😂
@@HieuTran-ej4yn nó khó khi bạn chưa nắm vững và phân biệt được client side và server side thôi, người học từ react qua chưa nắm vững được 2 khái niệm này thì tẩu hỏa nhập ma chưa nói đến việc sử dụng authjs