Gatsby JS là gì? Tìm hiểu cơ bản về Gatsby.js

Ngày đăng: 25 - 04 - 2020 Lượt xem: 1739 lượt

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 hỗ 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.

Gatsby-js-la-gi

Ư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 hỗ 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 sử 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.

 

 

gatsby-js-show-case

Đây là kết quả mình chụp được từ một trang viết bằng Gatsby

  • Nền tảng hỗ trợ tốt: cũng giống như WordPress thì Gatsby có hệ thống plugin cực kỳ đ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 hỗ 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 để sử 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,…

Tổng kết:

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

5 1 vote
Đánh giá bài viết

Nhận thông báo
Nhận thông báo cho
guest

0 Góp ý
Inline Feedbacks
View all comments

Bài viết liên quan

Thêm pagination và sidebar vào archive template trên Gatsby

Thêm pagination và sidebar vào archive template trên Gatsby

05 - 06 - 2020

Trong bài trước mình cùng mọi người cách tạo archive template trên Gatsby. Bài viết lần này mình và các...

Làm Archive template trên Gatsby

Làm Archive template trên Gatsby

02 - 06 - 2020

Trong bài trước mình cùng mọi người làm  sidebar cho page template trên Gatsby. Thì với bài viết này chúng...

Thêm sidebar vào page template trên Gatsby

Thêm sidebar vào page template trên Gatsby

27 - 05 - 2020

Trong bài trước mình cùng mọi người làm  page template trong Gatsby. Thì hôm nay mình tiếp tục hướng...

Làm Page template trên Gatbsy

Làm Page template trên Gatbsy

25 - 05 - 2020

Trong bài trước mình cùng mọi người luyện tập sử dụng custom field từ WordPress để render phần tin...

Render Tin tức mới của homepage trên Gatsby

Render Tin tức mới của homepage trên Gatsby

18 - 05 - 2020

Trong bài trước mình cùng mọi người luyện tập sử dụng custom field từ WordPress để render sang giao...

Render slider và CTA images của homepage trên Gatsby

Render slider và CTA images của homepage trên Gatsby

17 - 05 - 2020

Trong bài trước mình đã hướng dẫn các bạn render footer từ WordPress sang Gatsby. Nói đơn giản là các...

0
Would love your thoughts, please comment.x