Gatsby JS đang nổi lên như một giải pháp hàng đầu trong lĩnh vực phát triển web tĩnh, mang lại tốc độ vượt trội và bảo mật tối đa. Với kiến trúc dựa trên React và GraphQL, Gatsby JS không chỉ là một framework mà còn là một hệ sinh thái mạnh mẽ, được Fullstack Station đánh giá cao. Bài viết này sẽ cung cấp cái nhìn toàn diện về Gatsby JS, từ khái niệm cơ bản đến ưu nhược điểm và ứng dụng thực tế.
Mục Lục
Gatsby JS là gì?
Gatsby JS là một nền tảng mã nguồn mở được sử dụng để xây dựng các website và ứng dụng web với hiệu suất cao. Nền tảng này sử dụng React và GraphQL làm nền tảng cốt lõi. Sau vòng gọi vốn Series A thành công với 15 triệu đô la, Gatsby JS ngày càng khẳng định vị thế của mình trên thị trường.
Với sự phát triển của Javascript và xu hướng JAMstack (Javascript + API + Markup), Gatsby JS giúp đơn giản hóa và tăng tốc quá trình phát triển website, đặc biệt là các Progressive Web App (PWA) hướng đến trải nghiệm di động.
Web tĩnh và sự khác biệt của Gatsby JS
Tại sao lại cần web tĩnh?
Web tĩnh không phải là một khái niệm mới. Thực tế, hầu hết các website “động” đều sử dụng cơ chế cache để cải thiện hiệu suất. Cache, về cơ bản, là dữ liệu tĩnh được lưu trữ trong một khoảng thời gian nhất định.
Cache có nhiều cấp độ, từ cache cơ sở dữ liệu đến cache đối tượng, cache fragment (cache từng phần của trang) và cuối cùng là cache HTML. Cache HTML chính là sản phẩm đầu ra của Gatsby JS. Thư mục cache này thường được đồng bộ hóa trên nhiều máy chủ, giúp tăng tốc độ truy cập bằng cách bỏ qua quá trình xử lý code phức tạp và thao tác I/O tốn thời gian.
Điều trớ trêu là chúng ta thường sử dụng các máy chủ mạnh mẽ để chạy các website, nhưng phần lớn tài nguyên lại không phục vụ trực tiếp cho nhu cầu cuối cùng của người dùng. Điều này không chỉ lãng phí tài nguyên mà còn không tối ưu về tốc độ.
Sự khác biệt của Gatsby JS
So với web động có cache
Web động tạo cache tại thời điểm runtime, đòi hỏi phải luôn luôn duy trì một hệ thống máy chủ đầy đủ với cơ sở dữ liệu và các công cụ hỗ trợ. Ngược lại, Gatsby JS tạo ra các tập tin tĩnh sau khi build, cho phép tắt máy chủ build để tiết kiệm chi phí.
So với web tĩnh thuần túy
Web tĩnh thuần túy tạo ra các tập tin HTML hoàn chỉnh cho mọi liên kết. Khi người dùng truy cập liên kết A và sau đó nhấp vào liên kết B, toàn bộ tập tin HTML của trang B sẽ được tải xuống. Gatsby JS cũng tạo ra HTML cho mọi liên kết, nhưng đồng thời tạo thêm các tập tin JSON chứa nội dung của tất cả các trang. Với Gatsby JS, khi người dùng truy cập trang A và nhấp vào liên kết B, chỉ tập tin JSON chứa nội dung của trang B được tải xuống. Tập tin JSON và các tập tin JS liên quan thường chỉ chiếm khoảng 30% kích thước của một trang HTML hoàn chỉnh.
Ví dụ, trên website sentayho.com.vn, khi chuyển từ trang chủ sang trang Docs (Getting Started), các tài nguyên cần tải chỉ chiếm 12KB. Trong khi đó, nếu truy cập trực tiếp vào trang HTML này, dung lượng tải xuống là khoảng 24KB (chưa tính các request phụ trợ khác), cho thấy mức tối ưu lên đến 50%.
Mức độ tối ưu của Gatsby JS so với web tĩnh thuần túy
Ưu và nhược điểm của Gatsby JS
Ưu điểm
Triển khai dễ dàng với chi phí thấp
Việc tách biệt cơ sở dữ liệu và chỉ phục vụ dữ liệu tĩnh giúp việc triển khai trở nên dễ dàng hơn bao giờ hết. Bạn có thể sử dụng bất kỳ máy chủ nào với chi phí rất thấp. Ví dụ, với Amazon S3, chi phí là 0.005$/1000 requests (PUT, COPY, POST, LIST). Với một website có 100.000 trang, chi phí quản lý cập nhật mỗi ngày chỉ là 100 2 0.005 = 1$. Đây là một mức giá cực kỳ cạnh tranh, đặc biệt đối với các website lớn. (Con số 2 ở đây biểu thị mỗi trang có 2 tập tin HTML + JSON). Tham khảo thêm câu chuyện Escalade Sports: From $5000 to $5/month in Hosting With Gatsby để thấy rõ hơn lợi ích về chi phí.
Tốc độ vượt trội
Là một framework tạo web tĩnh, Gatsby JS tối ưu hóa tốc độ và bảo mật cho website. Việc chuyển đổi giữa các trang diễn ra cực kỳ nhanh chóng vì tất cả các style, HTML và Javascript được tải trong lần truy cập đầu tiên. Khi người dùng nhấp vào một bài viết, nội dung mới sẽ được tải về dưới dạng JSON và hiển thị, loại bỏ việc tải lại toàn bộ trang. Các plugin cho phép tối ưu hóa việc tải ảnh (progressive loading) và preload (tải trước nội dung của các liên kết tiềm năng) giúp website đạt tốc độ tối đa.
Tối ưu SEO
Gatsby JS thân thiện với các công cụ tìm kiếm vì các truy cập đầu tiên vào mọi trang đều là HTML. Gatsby kết hợp cơ chế Client rendering và Server rendering, đảm bảo SEO luôn ở trạng thái tốt nhất.
Hỗ trợ Progressive Web Apps (PWA)
Gatsby JS cho phép người dùng thêm website vào màn hình chính của điện thoại và sử dụng như một ứng dụng di động thực thụ.
Bảo mật
Với toàn bộ tập tin là HTML và JSON, hệ thống của bạn sẽ an toàn trước nhiều hình thức tấn công. Hơn nữa, bạn không cần phải lo lắng về việc gây ảnh hưởng đến người dùng khi cập nhật hệ thống (framework, app, database…).
Đơn giản
Bắt đầu với Gatsby JS rất đơn giản đối với những ai đã quen thuộc với React, GraphQL và Markdown. Gatsby JS kế thừa những tính năng tốt nhất của React và GraphQL.
Nhược điểm
- Đối với các website chuyên về nội dung tĩnh như sentayho.com.vn, việc triển khai hệ thống bình luận và tìm kiếm thường phải dựa vào các dịch vụ bên thứ ba như Disqus, Algolia, Facebook… Mặc dù bạn hoàn toàn có thể tự phát triển các giải pháp hybrid để tạo web động trong Gatsby JS.
- Gatsby JS có thể hơi khó khăn đối với những người chưa quen với React và GraphQL.
- Thời gian build có thể kéo dài, đặc biệt đối với các website lớn. Với một starter default, thời gian build có thể lên đến gần 2 giây. Với các site lớn khoảng 100.000 đến 1 triệu trang, thời gian build có thể dao động từ 10 đến 30 phút, chưa kể thời gian triển khai và đồng bộ hóa đến tất cả các edge (các node trong CDN). Tuy nhiên, có những giải pháp khắc phục mà Fullstack Station sẽ chia sẻ ở phần Tips.
- Chi phí chuyển đổi hệ thống hiện tại sang Gatsby JS có thể khá lớn. Bạn cần cân nhắc kỹ lưỡng giữa lợi ích mà web tĩnh mang lại trong tương lai và chi phí chuyển đổi.
- Với WordPress hoặc các nguồn nội dung khác, bạn có thể không tận dụng được khả năng xử lý hình ảnh của Gatsby JS.
- Mất đi một số tính năng hữu ích mà các nền tảng khác cung cấp. Ví dụ, với WordPress kết hợp với OneSignal, bạn có thể tự động gửi thông báo đến tất cả người dùng đang theo dõi (subscribers) khi một bài viết mới được xuất bản.
- Triển khai cho người dùng bình thường có thể phức tạp. Thật khó để sử dụng chức năng hẹn giờ xuất bản hoặc thực hiện các cập nhật nhỏ.
Gatsby JS phù hợp với dự án web nào?
Dựa trên những ưu điểm trên, Fullstack Station nhận thấy Gatsby JS phù hợp với các dự án web ít thay đổi về nội dung, số lượng trang không quá lớn (dưới 10.000 trang). Các trang tin tức có thể gặp rủi ro khi cần xóa bài khẩn cấp, vì thời gian build, cache và deploy có thể không đủ nhanh. Tuy nhiên, nếu có các phương án chặn link khẩn cấp từ lớp Network, vấn đề này có thể được giải quyết.
Phương thức hoạt động
Phương thức hoạt động của Gatsby JSCredit: Hackernoon
Khi chạy ở chế độ “develop”, Gatsby JS hoạt động như một create-react-app (CRA), kế thừa toàn bộ tính năng của CRA như HOT RELOAD.
Sau khi build, kết quả bao gồm các file JSON, HTML, CSS, JS, hình ảnh… Bạn chỉ cần tải thư mục chứa các tập tin này lên máy chủ là xong.
Một số CMS tương thích tốt với Gatsby
Đa phần các CMS đều có thể hoạt động với Gatsby thông qua API (RESTful hoặc GraphQL). Do đó, việc lựa chọn CMS nào phụ thuộc vào sự quen thuộc và tiện lợi của bạn. Hoặc bạn có thể sử dụng bất kỳ CMS tự phát triển nào, miễn là có API để lấy nội dung.
Tuy nhiên, các CMS sau đây khá nổi tiếng và có plugin để lấy nội dung (từ API chuyển về dữ liệu GraphQL trong Gatsby):
- Netlify CMS
- Buttercms
- Ghost
- Contentful
- WordPress
- Strapi
- Prismic
Trước khi sử dụng Gatsby JS, hãy kiểm tra xem đã có plugin hỗ trợ CMS bạn chọn hay chưa. Ví dụ, tìm kiếm với từ khóa “wordpress” trên trang sentayho.com.vn/plugins/?=wordpress.
Fullstack Station Tips
- Gatsby giúp website của bạn hoạt động tốt và bền vững.