Trong thời gian vừa rồi wordpress.org đã cho ra mắt phiên bản cập nhật mới 5.4 của WordPress. Với nhiều tính năng nổi trội, chẳng hạn như cải thiện được tốc độ thực hiện tác vụ, load trang bên trong dashboard.
Cải tiền một số tính năng trên Custom Gutenberg Blocks,… Và như các bạn cũng thấy thì WordPress hiện tại đã là một CMS Headless, điều đó giúp chúng ta có thể liên kết WordPress với nhiều nên tảng khác nhau như Angular, Vue, React, Gatsby, Next,… Thì với bài nay mình giới thiệu với các bạn về Gatsby JS.
Gatsby Js là gì ?
Gatsby là một “static site generator” được build từ core ReactJS. Về cơ bản nó cũng không khác gì các web viết bằng React Js, với nền tảng Gatsby thì chúng ta sẽ viết code bằng JavaScript. Rồi khi build nền tảng sẽ bundle thành các file HTML, CSS,JS còn database lấy từ api sẽ được lưu vào file Json. Bạn có thể deploy lên bất kỳ hosting website tĩnh.
Mình thì xài Netify kết hợp với Github để đẩy web lên. Do Netify tương trợ web hook để khi các bạn publish bài viết từ dashboard WordPress. Thì Netify sẽ tự động thực hiện lệnh để build lại trang web và public trên hosting.
Cách viết một blog bằng Gatsby có thể làm như sau: viết bài blog bằng định dạng md(markdown), cho nó vào thư mục posts, bundles lại rồi đẩy lên hosting. Hoặc bạn có thể kết hợp với CMS khác như WordPress, Drupal, Contentful,… bạn cũng có thể kết hợp bằng một số CMS bạn tự build miễn có api để query dữ liệu là được.
Ưu điểm của Gatsby JS
Nếu như ai đó hỏi mình ưu điểm của Gatsby là gì? Thì điều đầu tiên mình nghĩ đến là tốc độ và hiệu suất, nền tảng tương trợ tốt, SEO Optimizer và cuối cùng là PWA(Progressive Web Apps).
- Tốc độ và Hiệu suất: như mình đã nói Gatsby là một framework được xây dựng từ core React JS. Và đặc biệt hơn là một framework để làm web tĩnh, từ những lý do đó tốc độ load web sẽ nhanh hơn những trang khác. Độ bảo mật cũng cao hơn, nếu các bạn tiêu dùng một trang web viết bằng Gatsby.
Bạn sẽ nhận thấy việc chuyển qua lại giữa các trang trong website cũng rất nhanh do tất cả các style, html và javascript sẽ được load trong lần tải đầu tiên. Khi người dùng ấn vào một bài viết trong trang web của bạn, nội dung mới sẽ được tải về dưới dạng JSON và hiển thị lên.
Không cần load lại toàn bộ trang, việc cấu hình các plugin cho phép tối ưu việc tải ảnh. Và preload (tải trước nội dung của các link người dùng có thể ghé qua) sẽ cho trang web của bạn một tốc độ cực cao.
Đây là kết quả mình chụp được từ một trang viết bằng Gatsby
- Nền tảng tương trợ tốt: cũng giống như WordPress thì Gatsby có hệ thống plugin vô cùng đa dạng hộ trợ tối đa các dev.
- SEO Optimizer: Như mình nói ở ý trên Gatsby có hệ thống plugin đa dạng, nên Gatsby có các plugin tương trợ chọ việc SEO rất tốt.
- PWA(Progressive Web Apps): Gatsby cung cấp plugin để chuyển trang web của bạn thành từ SPA sang PWA. Giúp trang web của bạn có thể tải về thành ứng dụng trên desktop lẫn trên mobile.
Nhược điểm của Gatsby JS
Nền tảng nào cũng có nhược điểm của nó, Gatsby cũng vậy. Theo mình thì nó sẽ có một số nhược điểm sau:
- Khó tiếp cận: sẽ rất khó khăn để tiêu dùng và tiếp cận nếu như bạn chưa lập trình bao giờ.
- Vì Gatsby là một framework web tĩnh nên việc thay đổi nội dung sẽ có vài mặt hạn chế. Nhưng các bạn cũng đừng quá lo lắng vì mọi việc đều có cách giải quyết và khác phục. Mình sẽ nói rõ hơn ở các bài sau
Những gì bạn cần khi học Gatsby và WordPress
- Biết cài Node JS và sự dụng cơ chế npm để install các package
- Có kiến thức cơ bản về React JS như: React props, React states, giao tiếp api trên nền tảng React,…
- Có kiến thức về WordPress như: Custom field, Custom Post Type, WordPress Api,…
Kết luận:
Nhưng vậy hôm nay mình đã giới thiệu cho các bạn sơ lượt về gatsby và những thứ gatsby có thể làm được. Những bài viết sau mình sẽ giới thiệu sâu về cách kết hợp giữa gatsby và wordpress nhé.
Càm ởn các bạn
Trả lời