Sau 2 tuần trải nghiệm vọc vạch GatsbyJs thì cuối cùng mình đã chuyển từ GatsbyJs sang WordPress :v. Có lẽ nhiều bạn sẽ nghĩ mình ngược đời khi Gatsby là tân binh đại diện cho xu thế JAM stack với nhiều công nghệ phía sau, còn WordPress là một CMS đã ra đời từ lâu. Lí do như thế nào thì mình sẽ giải thích chi tiết về GatsbyJs ngay sau đây.

Cho những bạn chưa biết thì GatsbyJs là một Framework được xây dựng trên ReactJs chủ yếu dùng để xây dựng nên một Static Web: Blog, thương mại điện tử, document,…

GatsbyJs

Điểm mạnh của GatsbyJs

Web load siêu nhanh

Vâng, chính đó là lời giới thiệu, điều tự hào của nhà sản xuất và cũng là thứ đầu tiên mình ấn tượng về GatsbyJs. Nếu Static Web thông thường load nhanh nhưng khi chuyển trang bạn vẫn phải load lại một trang web mới từ host thì giờ đây với ReactJs, bạn vẫn phải load :v. Nhưng điểm hay khi áp dụng ReactJs là bạn sẽ không bị hiệu ứng load một trang mới, điều này giúp GatsbyJs đảm tính năng cốt lõi chính là một Single Page Application. Vì thế khi thao tác trên website được xây dựng bằng GatsbyJs bạn sẽ có cảm giác như website được load ngay tức khắc.

Hỗ trợ SEO tốt

Vì là static site nên GatsbyJs cực thân thiện với các Search Engine như Google, Yahoo, Bing. Dẫu cho ngày nay Google đã có thể đọc được các website dạng Client Side Rendering nhưng theo mình vẫn còn khá hạn chế và không được thân thiện với SEO bằng Server Side Rendering hoặc Prerendering.

SEO tốt

Gatsby rất thân thiện với SEO

Code của bạn sẽ được tối ưu

Nếu như một website thông thường bạn sẽ phải lo lắng về tối ưu hình ảnh như thế nào, code splitting ra sao, chia router, components cho hợp lý thì GatsbyJs hỗ trợ bạn tận răng. GatsbyJs cung cấp cho ta một templete có cấu trúc rất dễ đọc cùng hàng ngàn plugin giúp bạn tối ưu ảnh, media, caching hầm bà lằng. Tất cả chỉ để sản phẩm đầu ra của bạn thật tối ưu.

Soạn thảo bằng Markdown cực dễ

Thật sự đây là lần đầu tiên mình soạn thảo văn bản, nội dung bằng Markdown. Và điều bất ngờ là nó rất dễ dùng, vì được thiết kế dành riêng cho developer nên bạn tự tay soạn được mọi định dạng nội dung mà các Rich Text Editor như TinyMce, CkEditor, Froara có thể làm.

Quản lý content đa dạng

Ngoài việc tạo content từ Markdown, bạn cũng có thể dùng API, hay CMS khác như WordPress để quản lý content của bạn. Việc này tạo ra nhiều sự lựa chọn cho các developer giúp bạn không chỉ phụ thuộc vào Markdown.

Deploy dễ dàng và chi phí thấp

Quá dễ dàng để tìm được một hosting để deploy GatsbyJs. Bạn có thể deploy lên Github, Gitlab, đặc biệt VercelNetlify thì chỉ cần push code là site tự động được build vì CI/CD đã được setup sẵn. Không cần build một server backend và databse đồ sộ, điều này rất tiện lợi cho những bạn muốn có một blog hay một website riêng một cách nhanh chóng.

Netlify

Blog trước đó mình lưu trữ tại Netlify và hoàn toàn Free

 

Chúng ta đi đến phần hạn chế nhé, khen vậy là đủ rồi 😈

Hạn chế của Gatsby

Tính mở rộng

Đây là điểm mấu chốt mà mình phải từ bỏ GatsbyJs và chuyển sang WordPress để làm website. Xét về khía cạnh hệ sinh thái WordPress lớn hơn rất nhiều khi so sánh với GatsbyJs. GatsbyJs không có backenddatabase nên mình khó đánh giá về các chỉ số website như SEO, views, comments, posts (Mặc dù bạn có thể tự build một server backend nhưng điều này quá tốn thời gian). Chính lý do này gây bất lợi cho việc phân tích và đánh giá website của mình rất nhiều.

Mở rộng

Mình không đánh giá cao khả năng mở rộng của GatsbyJs

Cũng vì không có backend nên nếu sau này website có mở rộng ra thì cũng khó khăn hơn. Điển hình như tính năng phân quyền user thì trên WordPress bạn setting cực đơn giản nhưng trên GatsbyJs phải nói là khó thực sự.

Caching với Service Worker hay gặp lỗi

Đây là con dao 2 lưỡi của GatsbyJs. Vì là static site nên Gatsby dùng Service Worker để cache website, điều này giúp cho website hoạt động không cần internet, giảm thiểu request server và tăng tốc độ load trang. Nhưng cache trên Service Worker này rất hay lỗi.

Có thể do máy mình hoặc vì lí do gì đó nhưng mình khá khó chịu với việc này. Nhiều lúc mình đã xóa sạch Service Worker trên trình duyệt, reset máy, reset internet nhưng website vẫn không chịu update lại, bực mình lắm luôn. Điều này xảy ra trên một số máy chứ không phải tất cả và tin vui là bạn có thể tắt tính năng này. Nhưng bạn phải cài một số plugin và một chút config để tắt nó, vì mặc định Gatsby tự động caching dữ liệu bằng Service Worker.

Vậy khi nào chúng ta nên dùng GatsbyJs

Nếu bạn dự định xây dựng một blog cá nhân nho nhỏ ít hơn 100 bài và không có dự định mở rộng thì GatsbyJs là sự lựa chọn không tồi. Hoặc đó là một site cá nhân giới thiệu bản thân, một trang giới thiệu sản phẩm dịch vu, một landing page thì Gatsby khá thích hợp cho việc này.

show case gatsbyjs

Một số website được làm bằng GatsbyJs trên trang của họ

Tóm lại thì những site nhỏ, không cập nhật thường xuyên và không có ý định mở rộng sau này dùng GatsbyJs khá tiện lợi. Nếu bạn để ý những showcase của GatsbyJs thì cũng toàn những site quy mô nhỏ, đây mới chính là điều mà GatsbyJs hướng tới.

Cảm ơn các bạn đã đọc đến đây, hi vọng các bạn thích bài viết này. Nếu thấy hay thì cho mình một like hoặc share bài nhé. Hẹn gặp lại ở bài sau.