Gatsby: framework React cho web tĩnh
/gatsby
Gatsby vẫn là lựa chọn thật sự cho developer React muốn xây site nội dung, không phải framework đã hết thời — các mặc định về hiệu năng như code splitting, tối ưu ảnh, prefetch hoạt động sẵn mà không cần chỉnh tay. Điểm đánh đổi chính: lớp dữ liệu GraphQL và cấu trúc monorepo Lerna là những khái niệm thêm mà một developer đơn lẻ phải học ngoài React.
Gatsby là gì
Gatsby là framework React mã nguồn mở để xây website biên dịch sẵn thành file tĩnh tại thời điểm build, với tùy chọn chuyển từng trang sang render trễ hoặc render phía server. Gatsby dùng source plugin để lấy dữ liệu từ file Markdown, CMS headless như Contentful hay WordPress, hoặc REST và GraphQL API, rồi expose tất cả qua một lớp truy vấn GraphQL duy nhất trong component React.
Các tính năng cốt lõi của Gatsby
- ✓Một lớp truy vấn GraphQL duy nhất đứng trước mọi nguồn dữ liệu — file Markdown, CMS headless chẳng hạn như Contentful hay WordPress, hoặc endpoint REST/GraphQL API — nên component trang query theo cùng một cách bất kể nội dung thực sự đến từ hệ thống nào.
- ✓Chọn kiểu render theo từng trang: Static Site Generation, Deferred Static Generation, hoặc Server-Side Rendering, thay vì áp một chiến lược cho cả site.
- ✓Code splitting, tối ưu ảnh, inline critical CSS, lazy loading và prefetch tài nguyên đều chạy tự động lúc build.
- ✓Kết quả build là một React app thật sự, không phải HTML tĩnh thuần, nên trang có thể hoạt động như dashboard hay flow e-commerce, không chỉ bài blog.
- ✓Site sau khi build không cần server để chạy — chỉ là file tĩnh, đưa lên CDN nào cũng được.
- ✓Bản thân repo là monorepo quản lý bằng Lerna, publish nhiều package riêng lẻ lên npm.
Bạn có thể xây gì với Gatsby
- •Site nội dung — blog, trang marketing — lấy dữ liệu từ Markdown hoặc CMS headless.
- •Storefront e-commerce và dashboard có đăng nhập, vì Gatsby build ra một React app đầy đủ.
- •Site nhiều nguồn dữ liệu (vừa CMS vừa REST API chẳng hạn) mà bạn muốn dùng chung một query GraphQL.
- •Site muốn host trên CDN với chi phí server gần như bằng 0, giống ví dụ dùng Netlify trong README.
Cài đặt Gatsby và khởi tạo project
Chạy `npm init gatsby` để khởi tạo project (README đặt tên ví dụ là My Gatsby Site), sau đó `cd my-gatsby-site/` và `npm run develop` để chạy dev server. Vậy là xong toàn bộ setup — không cần bước build riêng trước khi bắt đầu chỉnh sửa.
Xây dựng site Gatsby đầu tiên của bạn
Khi `npm run develop` đang chạy, site phục vụ tại `http://localhost:8000`. Mở thư mục project trong editor và sửa `src/pages/index.js` — trình duyệt tự cập nhật ngay khi bạn lưu file. Từ đó README dẫn tới tutorial chính thức và thư mục plugin để gắn thêm nguồn dữ liệu thật.
Điểm mạnh
- ✓Một interface GraphQL duy nhất bất kể trang nào lấy dữ liệu từ nguồn gì — Markdown, CMS, hay API.
- ✓Phần hiệu năng (code splitting, tối ưu ảnh, prefetch, critical CSS) chạy tự động, không phải checklist phải tự làm tay.
- ✓Kết quả build là React app đầy đủ, nên dashboard hay trang e-commerce hoạt động giống hệt trang blog.
- ✓Chọn kiểu render theo từng trang (SSG, DSG, SSR) thay vì một đánh đổi áp cho cả site.
- ✓Giấy phép MIT — dùng thương mại không tốn phí, không ràng buộc copyleft.
Hạn chế và đánh đổi của Gatsby
- △Lớp GraphQL là trung tâm của cách Gatsby hoạt động, nên chỉ lấy nội dung đơn giản thôi cũng phải viết query GraphQL — thêm một khái niệm ngoài React.
- △Repo này là monorepo Lerna publish nhiều package riêng lẻ, nên theo dõi version tương thích khi upgrade tốn công hơn một thư viện một package.
- △Static Site Generation vẫn là mặc định: thay đổi nội dung không hiện ra cho tới lần build kế tiếp, trừ khi trang đó chuyển sang Deferred Static Generation hoặc Server-Side Rendering.
Các lựa chọn thay thế Gatsby
Câu hỏi thường gặp
Có — framework này nằm trong tổ chức gatsbyjs trên GitHub, các source plugin và hệ sinh thái plugin vẫn hoạt động. README không nói gì về nhịp độ phát hành hay roadmap ngoài điều đó, nên tự kiểm tra hoạt động commit gần đây nếu tốc độ phát triển quan trọng với quyết định của bạn.
Gatsby phát hành theo MIT License, nên bạn build và ship site hay app thương mại bằng Gatsby mà không tốn phí hay phải mở mã nguồn dự án của mình, giấy phép đầy đủ nằm ngay trong repo.
Gatsby đưa mọi nguồn dữ liệu — Markdown, CMS, API — qua một lớp GraphQL lúc build, còn Next.js lấy dữ liệu theo từng trang bằng JavaScript thuần và kết hợp static generation, server rendering, incremental regeneration mà không bắt buộc GraphQL. Mô hình theo từng trang của Next.js linh hoạt hơn ngay từ đầu; lớp GraphQL của Gatsby đáng giá khi site gộp nhiều nguồn dữ liệu vào một chỗ.
Xây gì đó vượt quá một trang tĩnh đơn giản trong Gatsby đồng nghĩa phải viết query GraphQL để lấy nội dung từ Markdown, CMS, hay API, nên biết chút GraphQL là không tránh được. Copy query từ starter có sẵn đã giải quyết phần lớn việc mà không cần hiểu sâu, nhưng cú pháp query thì vẫn phải đụng tới.
Không — framework mã nguồn mở trong repo này build theo cùng một cách bất kể bạn host output ở đâu, và README không gắn nó với bất kỳ nền tảng hosting cụ thể nào. Bất kỳ static host hay CDN nào phục vụ được output build đều dùng được.
Tài liệu chính thức của Gatsby có hướng dẫn riêng để migrate site từ v4 lên v5, cùng các hướng dẫn cũ hơn cho v3 lên v4 và v2 lên v3, nên nâng cấp một site Gatsby có sẵn đã được ghi rõ. Migrate một site xây bằng framework khác sang Gatsby thì các hướng dẫn này không đề cập và không được ghi rõ.
Vấn đề mà Gatsby giải quyết
Khi nội dung một site nằm rải rác ở nhiều nơi — CMS, file Markdown, vài API khác nhau — cách làm thông thường là viết riêng một đường lấy dữ liệu cho từng nguồn rồi tự ráp lại. Gatsby giải quyết việc này bằng một schema GraphQL duy nhất mà các source plugin đổ dữ liệu vào, nên component chỉ cần query một interface, bất kể nội dung thật sự nằm ở đâu.
Ai nên thử — và ai nên bỏ qua
Hợp lý với developer React đang xây site nội dung — blog, tài liệu, trang marketing, storefront nhỏ — lấy dữ liệu từ nhiều nguồn, nơi một lớp GraphQL chung thật sự giảm việc thay vì thêm việc. Không hợp với site brochure hai trang (một SSG thuần hoặc Next.js không cần GraphQL đơn giản hơn), hoặc với ai chọn Gatsby chỉ vì Gatsby Cloud quản lý build hộ, vì dịch vụ đó đã ngừng.
Repo liên quan
Chưa chắc gatsby có hợp với bạn?
Để ChatGPT, Claude hoặc Perplexity tìm hiểu giúp — bấm bên dưới và xem AI nói gì về gatsby.