Gatsby Js là gì

Tạo website tĩnh là một kỹ thuật, xu hướng trong phát triển web không chỉ cải thiện tốc độ mà còn tối đa hóa bảo mật. Trong danh sách các framework tạo web tĩnh, Gatsby JS là một lựa chọn nổi bật. Gatsby JS đã trở nên phổ biến và phát triển mạnh mẽ với một hệ sinh thái phong phú. Đội ngũ của Fullstack Station đã đánh giá cao Gatsby Js, vì vậy chúng ta hãy cùng tìm hiểu về Gatsby JS là gì.

Gatsby Js là gì?

Gatsby Js là một nền tảng được sử dụng để xây dựng website và web app có hiệu suất rất cao. Gatsby Js sử dụng React và Graphql làm thành phần chính. Gatsby JS đã trở thành tên tuổi nổi bật và được chú ý nhiều hơn sau khi gọi vốn thành công với số tiền 15 triệu đô trong vòng gọi vốn Series A.

Bạn đang xem: Gatsby Js là gì

Tương lai của web chính là mobile dựa trên Progressive Web App (PWA). Với sự phát triển của Javascript, xu hướng JAM stack (Javascript + API + Mockup) đã ra đời. Điều này giúp việc phát triển website trở nên thú vị và đơn giản hơn với Gatsby Js.

Web tĩnh và điểm khác biệt của Gatsby Js

Tại sao lại cần web tĩnh?

Trong bài giới thiệu về Kỹ thuật lập trình website tĩnh, chúng tôi đã đề cập đầy đủ. Web tĩnh không hề xa lạ. Thực sự, mọi website “động” đều có cơ chế cache. Đối với website có nhiều lượt truy cập, việc sử dụng cache là cần thiết. Cache có nhiều cấp độ, từ cơ sở dữ liệu, đến object cache, fragment cache và cuối cùng là HTML cache. Và HTML cache chính là sản phẩm cuối cùng được tạo ra bởi Gatsby Js. Thư mục cache này thường được đồng bộ trên nhiều máy chủ khác nhau, giúp tăng tốc độ truy cập bằng cách bỏ qua xử lý mã code và thời gian I/O.

Một điều hài hước là chúng ta thường thuê các máy chủ mạnh mẽ để chạy các website nhưng phần lớn tài nguyên trong đó không được sử dụng cho mục đích cuối cùng. Điều này không chỉ lãng phí mà còn làm giảm hiệu suất tốc độ.

Điểm khác biệt của Gatsby JS

So với web động có cache

Web động tạo cache ở thời điểm chạy, điều này đòi hỏi phải duy trì một hệ thống máy chủ với đầy đủ cơ sở dữ liệu và các công cụ hỗ trợ đi kèm. Trong khi đó, Gatsby Js xây dựng tập tin tĩnh và máy chủ được sử dụng để xây dựng có thể được tắt. Điều này giúp tiết kiệm chi phí đáng kể.

So với web tĩnh thuần túy

Web tĩnh thuần túy tạo ra tập tin HTML cho mỗi liên kết. Do đó, nếu người dùng truy cập liên kết A và sau đó nhấn 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 cũng tạo ra HTML cho tất cả các liên kết nhưng đồng thời cũng tạo ra tập tin JSON chứa nội dung của tất cả các trang. Với Gatsby, khi truy cập vào trang A và nhấp vào liên kết B, chỉ tải tập tin JSON chứa nội dung trang B. Thông thường, tập tin JSON và các tập tin JS liên quan chỉ chiếm 30% so với một trang HTML hoàn chỉnh.

Xem thêm : "Chim Bồ Câu" trong Tiếng Anh là gì: Định Nghĩa, Ví Dụ Anh Việt

Ví dụ với trang web reactjs.org, khi truy cập từ trang chủ đến trang Documents (Getting Started), lượng tài nguyên cần tải chỉ chiếm 12KB trong khi trang HTML tải trực tiếp là khoảng 24KB (không tính các yêu cầu phụ trợ khác). Tỷ lệ tối ưu này đạt 50%.

Ưu và nhược điểm của Gatsby Js

Hãy cùng Fullstack Station tìm hiểu về ưu và nhược điểm của Gatsby Js.

Ưu điểm

Triển khai với chi phí thấp và dễ dàng: Việc tách biệt cơ sở dữ liệu và chỉ phục vụ hoàn toàn trên dữ liệu tĩnh giúp việc triển khai dễ dàng và có thể sử dụng bất kỳ máy chủ nào với chi phí thấp. Ví dụ, sử dụng Amazon S3 với mức giá 0.005$/1000 requests (PUT, COPY, POST, LIST), nếu có 100k trang, thì mất 100*2 *0.005 = 1$ cho việc quản lý và cập nhật mỗi ngày. Chỉ với 1 site có 100k trang thì chi phí cập nhật như vậy rất rẻ. (2 ở đây liên quan đến mỗi trang có 2 tập tin HTML+JSON).

Tốc độ cao: Gatsby Js là một framework để tạo web tĩnh (tương tự Jekyll) đã tối ưu tốc độ và bảo mật cho website. Quá trình chuyển đổi giữa các trang trong website cũng rất nhanh do tất cả các style, html và javascript đã được tải lần đầu tiên. Khi người dùng nhấp vào một bài viết trên trang web của bạn, nội dung mới sẽ được tải xuống dưới dạng JSON và hiển thị lên mà không cần tải lại toàn bộ trang. Việc cấu hình các plugin giúp tải ảnh theo tiến trình (progressive) và tải trước nội dung các liên kết có thể cần thiết cho người dùng giúp trang web có tốc độ tải nhanh.

SEO tốt: Gatsby Js thân thiện với các công cụ tìm kiếm vì mọi trang được tạo ra là HTML. Gatsby kết hợp cả cơ chế Client rendering và Server rendering nên luôn đảm bảo SEO tốt.

Hỗ trợ Progressive Web Apps: Website của bạn có thể được thêm vào màn hình chính của điện thoại di động và người dùng có thể sử dụng nó như một ứng dụng di động.

Đảm bảo an ninh: Với các tập tin chỉ là HTML và JSON, hệ thống sẽ an toàn trước mọi hình thức tấn công. Hơn nữa, bạn sẽ không cần phải lo lắng về việc ảnh hưởng đến người dùng khi cập nhật hệ thống (framework, ứng dụng, cơ sở dữ liệu…).

Xem thêm : Xúc tiến bán hàng là gì? 5 Phương tiện xúc tiến bán hàng hiệu quả!

Đơn giản: Bắt đầu với Gatsby rất đơn giản đối với những người đã quen thuộc với React, Graphql, Markdown… Gatsby mang lại những tính năng hay của React và Graphql.

Nhược điểm

• Gatsby Js chủ yếu dùng để tạo website tĩnh, vì vậy 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 có thể phát triển các giải pháp lai để tạo web động trong Gatsby Js.
• Hơi khó khăn đối với người chưa quen với React, Graphql.
• Thời gian build tốn nhiều thời gian: Với dự án ban đầu đã mất gần 2 giây để build, và cho các trang lớn từ 100k đến 1 triệu trang, thời gian build khoảng từ 10 đến 30 phút, chưa tính thời gian triển khai và đồng bộ hoàn toàn đến các edge (các node trong CDN). Tuy nhiên, vẫn có những cách để khắc phục, xem thêm các gợi ý của Fullstack Station.
• Chi phí chuyển đổi từ hệ thống hiện tại: Chuyển đổi sang sử dụng Gatsby JS có thể tốn kém. Chúng ta cần xem xét kỹ lưỡng giữa lợi ích của web tĩnh trong tương lai và chi phí chuyển đổi.
• Đối với WordPress hoặc nguồn dữ liệu khác, việc “hình ảnh trong bài viết” có thể không tận dụng được khả năng xử lý hình ảnh của GatsbyJs.
• Mất một số tính năng hay của các nền tảng khác. Ví dụ, WordPress kết hợp với OneSignal, mỗi khi có bài viết mới, sẽ tự động gửi thông báo cho tất cả người dùng đang theo dõi (subscribers).
• Triển khai cho người dùng bình thường vẫn khá phức tạp. Rất khó để sử dụng chức năng hẹn giờ đăng bài hoặc thậm chí chỉ là các cập nhật nhỏ.

Gatsby JS phù hợp với dự án web nào?

Dựa trên ưu điểm của Gatsby, Fullstack Station cho rằng nó phù hợp với các dự án web có ít thay đổi về nội dung và số lượng trang không quá lớn, khoảng 10,000 trang trở xuống. Có một rủi ro cho các trang tin tức khi cần xóa bài viết gấp, vì việc xây dựng, cache và triển khai không thể thực hiện nhanh chóng. Tuy nhiên, với việc chặn các liên kết gấp từ mạng, không gây vấn đề nào.

Phương pháp hoạt động

Khi chạy ở chế độ “develop”, Gatsby Js cơ bản là một create-react-app (CRA), thừa hưởng tất cả các tính năng của CRA như HOT RELOAD.

Sau khi đã build, bao gồm các tệp tin JSON, HTML, CSS, JS, hình ảnh… Chỉ cần đưa thư mục chứa các tệp tin này lên máy chủ là hoàn tất.

Một số CMS phù hợp với Gatsby

Hầu hết các CMS có thể hoạt động với Gatsby thông qua API (Restful hoặc Graphql). Việc sử dụng CMS phụ thuộc vào sự quen thuộc của bạn với CMS nào và tiện ích của nó. Nhưng quan trọng nhất, CMS phải cung cấp API để lấy nội dung.

Dưới đây là một số CMS phổ biến và có plugin hỗ trợ lấy nội dung (chuyển từ API thành Graphql data trong Gatsby):

• Netlify CMS
• Buttercms
• Ghost
• Contentful
• WordPress
• Strapi
• Prismic

Trước khi sử dụng Gatsby, hãy kiểm tra xem đã có plugin hỗ trợ không. Ví dụ, tìm kiếm từ khóa “wordpress” trên trang https://www.gatsbyjs.org/plugins/?=wordpress

Một số gợi ý từ Fullstack Station

• Gatsby giúp website hoạt động tốt và bền vững.

Bình luận

Nguồn: https://suphamyenbai.edu.vn
Danh mục: Wiki