Trong thế giới lập trình web hiện nay, các framework đã lần lượt thi nhau trình làng. Mỗi framework đều có những ưu điểm riêng để giải quyết một số vấn đề nào đó. Gatsby không phải ngoại lệ, đội ngũ Gatsby còn tự tin khẳng định đây sẽ là xu hướng trong tương lai 🧐.
Vậy tương lai của web development mà họ định nghĩa trông như nào? Kiến trúc, cách vận hành ra sao. Chúng ta cùng đi tìm hiểu tổng quan về Gatsby JS này nhé 🤩.
Gatsby là gì? 🤔
Gatsby là một framework mã nguồn mở, dựa trên ReactJs và GraphQL. Được tối ưu khả năng mở rộng của các trang web động (dynamically rendered sites) cùng với tốc độ của các trang web tĩnh (static-site generation).
ReactJS thì có thể bạn đã biết, đã quen thuộc với cái tên này rồi. Một library front-end rất phổ biển, được đông đảo lập trình viên sử dụng. Nếu ai đã làm quen với ReactJS rồi thì qua Gatsby thì rất dễ tiếp cận.
GraphQL là một ngôn ngữ truy vấn, cho phép bạn lấy dữ liệu để xử lý trên trang web. Khi chạy project thì mặc định trang http://localhost:8000/_graphql là nơi để query một cách trực quan, rất dễ sử dụng.
Kiến trúc JAMstack mà Gatsby đang xây dựng 🧐
JAMstack (Javascript – APIs – Markup) là một kiến trúc phát triển web hiện đại dựa trên JavaScript phía client, các API có thể sử dụng lại và Markup dựng sẵn. Gatsby được xây dựng theo JAMstack và được kế thừa rất nhiều ưu điểm từ kiến trúc này. Điển hình như:
- Hiệu suất tốt: Các page được tạo ra đều là các file html tĩnh, cho nên việc hiển thị hay tải trang trở nên rất nhanh. Các trang bình thường thì phải mất thời gian server query lấy dữ liệu trong database rồi mới hiển thị.
- Bảo mật cao: các page chỉ load các file tĩnh nên nó có tính bảo mật cao, hạn chế các cuộc tấn công nhằm vào cơ sở dữ liệu.
- Chi phí thấp, scale dễ dàng: Gatsby không cần server, nên bạn có thể lưu trữ toàn bộ trang web của mình lên CDN với chi phí thấp.
Gatsby hoạt động như nào? 🤠
Khi connect với các headless CMS và chạy chương trình. Gatsby sẽ lấy hết dữ liệu để dựng lên một lớp dữ liệu lớn tên là GraphQL Data Layer. Sử dụng GraphQL, tạo các câu query để lấy dữ liệu này và hiển thị ra màn hình. Gatsby hỗ trợ các cách render page như SSG, DSG, SSR. Sau đó các bạn có thể deploy lên server, cloud mà bạn muốn. Hoặc đơn giản và tối ưu nhất thì có thể đẩy lên Gatsby Cloud.
Rendering Options
Gatsby cung cấp cho chúng ta 3 sự lựa chọn Static Site Generation (SSG) – mặc định của Gatsby, Deferred Static Generation (DSG) và Server Side Rendering (SSR).
Static Site Generation (SSG)
Mặc định Gatsby sẽ render theo kiểu Static Site Generation này. Toàn bộ các page sẽ là các file html, css, javascript tĩnh được tạo ra tại thời điểm build. Vậy nó hoạt động như nào?
Đầu tiên, Gatsby tạo ra tất cả các tài nguyên(html, css, javascript, ảnh…) tại thời điểm build trên máy tính hoặc Gatsby cloud. Sau đó cung cấp các file tĩnh và được đẩy lên CDN. Lúc này, máy tính hoặc Gatsby cloud đang chạy tiến trình build thì có thể tắt đi, vì giờ chúng không cần thiết nữa.
Khi nhìn cách SSG hoạt động thì có thể thấy build server (ở đây đang là Gatsby Cloud worker) chỉ hoạt động trong lần đầu tiên và không phải hoạt động về sau nữa. Nghe có vẻ rất hay nhưng khi chúng ta có 1000 10.000 100.000 pages thì build server sẽ phải build tất cả các trang đó thành các file tĩnh. Điều này khiến cho thời gian build trở nên rất là lâu.
Chính vì thế, Gatsby cung cấp cho thêm 1 sự lựa chọn khác nữa đó là Deferred Static Generation.
Deferred Static Generation (DSG)
Cơ bản mà nói DSG khá giống SSG, nhưng DSG sẽ không build tất cả các trang web ở thời gian đầu giống như SSG. DSG cho phép developer tùy chọn trang được trì hoãn, khiến trang đó chỉ build khi có người dùng truy cập. Điều này sẽ rất tuyệt vời để điều chỉnh lại thời gian build của trang web.
Ví dụ cơ bản là bạn tạo một website tin tức, thường thì người dùng sẽ ít chú tâm tới các tin cũ, các tin lỗi thời. Nên không có lý do nào chúng ta build page đó mà không có người truy cập cả. Lúc này DSG phát huy tác dụng hơn bao giờ hết.
Với DSG thì luôn phải giữ cho build server chạy để nó có thể build page khi có người dùng truy cập đến trang.
Server-Side Rendering (SSR)
SSG hay DSG có thể xử lý đại đa số trường hợp của web development. Nhưng có một số case vẫn phải cần đến SSR.
Ví dụ, khi có người vào một trang bất kì, bạn muốn tính toán số lượt truy cập của cái trang đó. Thì lúc này, bạn nên sử dụng SSR là tốt nhất. Với SSR, bạn có thể gọi APIs từ các server khác, hay query vào DB để lấy và xử lý dữ liệu rồi hiển thị ra màn hình.
Ưu và nhược điểm 🎩
Ưu điểm 👈
Chúng ta có thể thấy Gatsby có rất nhiều ưu điểm được kế thừa từ JAMstack, điển hình như tốc độ tải trang, khả năng SEO tốt, bảo mật cao, chi phí hợp lý…
Ngoài ra các bạn có thể tham khảo những ưu điểm của Gatsby dưới đây
Nhược điểm 👈
Build time là một vấn đề lớn của Gatsby. Khi update content trên các headless CMS như WordPress thì bạn sẽ phải đợi khá lâu để Gatsby có thể build cho bạn. Nhưng Nếu bạn dùng Gatsby Cloud thì có giải pháp giúp build nhanh hơn trong khoảng dưới 1 phút. Họ gọi là Incremental builds nhưng bạn sẽ mất một khoản tiền để duy trì hàng tháng.
Tổng kết
Trong bài này, mình đã trình bày cho các bạn về kiến trúc, cách hoạt động, các cách render page và các ưu – nhược điểm của Gatsby 🥳🥳. Gatsby rất phù hợp và phát huy sức mạnh trong việc tạo các trang như trang tin tức, trang blog… Còn với web app thì Gatsby chưa thực sự phù hợp cho lắm.
Và đó là tất tần tật về Gatsby mà mình đã trình bày. Bạn có nghĩ Gatsby có trở thành tương lai của web development hay không? Cùng thảo luận ở phía dưới nhé 🥰!
