Hugo vs. Gatsby

JAMStack, viết tắt của JavaScript, API và Markup, là từ thông dụng mới nhất trong thế giới phát triển web. Nó nhằm mục đích giảm bớt sự phức tạp của hệ thống của bạn và giúp bạn cung cấp các ứng dụng tốt hơn trong thời gian ngắn hơn. Như với bất kỳ cải tiến mới nào trong công nghệ, có rất nhiều công ty cung cấp các tùy chọn JAMStack cạnh tranh. Làm thế nào bạn có thể chọn cái nào phù hợp với bạn?

Có hai loại trang web JAMStack chính: tĩnh, trong đó nội dung được tạo tại thời điểm xây dựng trước khi triển khai và được phục vụ trực tiếp khi người dùng tạo trang web; và động, trong đó máy chủ tạo nội dung và nội dung mỗi khi người dùng truy cập vào trang web của bạn.

Trong bài viết này, chúng tôi sẽ tập trung vào các trang web tĩnh và so sánh hai giải pháp phổ biến nhất: Hugo và Gatsby . Bạn sẽ tìm hiểu những ưu điểm và nhược điểm của từng loại và cái nào sẽ tốt nhất cho trường hợp sử dụng cụ thể của bạn.

Tại sao lại là trang web tĩnh?

Bạn có thể tự hỏi tại sao chúng tôi lại chọn tập trung vào các trang tĩnh thay vì động. Kiến trúc tĩnh cung cấp các trang web nhanh như chớp và hơn bất cứ thứ gì, các hệ thống ít phức tạp hơn với giao diện người dùng được tách riêng, nơi bạn có thể sử dụng dữ liệu từ bất kỳ nguồn dữ liệu nào.

Gatsby là gì?

Gatsby là một trình tạo trang web tĩnh tự mô tả như một “khuôn khổ mã nguồn mở dựa trên React để tạo các trang web và ứng dụng”. Nó có một hệ thống xây dựng hoàn chỉnh cho phép bạn sử dụng công nghệ web để tạo các tệp tĩnh. Bạn sẽ viết mã React để tạo trang web của mình và sử dụng dữ liệu thông qua một lớp GraphQL. Sau đó, Gatsby sẽ xây dựng trang web của bạn để tạo nhiều tệp tĩnh mà bạn có thể triển khai.

Hugo là gì?

Hugo tự mô tả mình là “khuôn khổ xây dựng trang web nhanh nhất thế giới”. Trình tạo trang web tĩnh này được viết bằng Go với ý tưởng về hiệu suất cao trong quá trình xây dựng. Hugo có ngôn ngữ mẫu dựa trên HTML cho phép bạn tạo trang web của mình. Nó cũng hỗ trợ Markdown và các ngôn ngữ khác thông qua các plugin.

Sự khác biệt chính là gì?

Khi so sánh hai công cụ, đây là những khía cạnh chính mà bạn muốn tập trung vào:

• Đường cong học tập
• Tài liệu
• Tốc độ, vận tốc
• Bảo vệ
• Uyển chuyển
• Mở rộng quy mô
• Giá bán
• Cộng đồng

Đối với một nhà phát triển, đường cong học tập là một khía cạnh quan trọng cần xem xét khi lựa chọn một công cụ; điều này sẽ giúp bạn xác định lượng thời gian bạn cần để cung cấp giá trị cho người dùng của mình.

Gatsby được xây dựng dựa trên ngôn ngữ “tạo khuôn mẫu” của React, vì vậy nếu bạn biết React và JavaScript nói chung, bạn đã sẵn sàng để bắt đầu làm việc với Gatsby. Bước tiếp theo trong đường cong này là hiểu cách làm việc với graphql . Gatsby sử dụng lớp graphql để thu thập các nguồn dữ liệu khác nhau từ các plugin khác nhau sẽ được sử dụng bởi mã React của bạn. Tuy nhiên, Gatsby cung cấp nhiều mẫu hoặc “trình bắt đầu ” sẵn sàng để sử dụng có thể giúp bạn tránh sự phức tạp của React và graphql.

Mặt khác, Hugo được xây dựng với cờ vây, nhưng bạn không nhất thiết phải biết cờ vây để sử dụng nó. Nếu bạn chọn sử dụng mẫu tạo sẵn, thì công việc của bạn sẽ chủ yếu liên quan đến tệp TOML để cấu hình và Đánh dấu cho tệp nội dung. Tuy nhiên, nếu bạn muốn tùy chỉnh trang web của mình hoặc xây dựng từ đầu, bạn cần biết cách viết các mẫu của mình bằng cách sử dụng hệ thống tạo mẫu của Go .

Vì vậy, đường cong học tập phụ thuộc vào mục tiêu của bạn:

• Bạn có muốn tùy chỉnh trang web của mình từ đầu không? Sau đó, nếu bạn đã quen với React, Gatsby sẽ là một lựa chọn nhanh chóng
• Bạn có muốn đứng dậy và chạy một cách dễ dàng? Hugo là một lựa chọn chắc chắn do có hàng trăm chủ đề bắt đầu nhanh chóng.

Mỗi khi bạn chuẩn bị bắt đầu một dự án với điều gì đó mới, bạn nên xem trạng thái của tài liệu về công nghệ đã chọn. Vì bạn thường phải tham khảo tài liệu chính thức để trả lời các truy vấn, bạn sẽ muốn nó dễ sử dụng và cập nhật.

Cả Hugo và Gatsby đều có tài liệu tốt giúp bạn nhanh chóng đến với hướng dẫn Bắt đầu nhanh tương ứng của họ để giúp bạn bắt đầu.

Gatsby có một hướng dẫn đầy đủ tính năng và hướng dẫn chuyên sâu giúp bạn tìm hiểu tất cả các sắc thái của khung công tác. Một cái nhìn đơn giản về tài liệu của Gatsby có vẻ đầy đủ nhưng cũng có thể gây choáng ngợp.

Tài liệu của Hugo có thể được coi là một bộ sưu tập hướng dẫn nhỏ hơn nhưng vẫn có nhiều thông tin chuyên sâu về hoạt động của khung.

Vì vậy, trong mặt trận tài liệu, không có người chiến thắng rõ ràng, và nó chỉ đơn giản là phụ thuộc vào sự quen thuộc của bạn với công nghệ.

Tốc độ, vận tốc

Một trong những điểm hấp dẫn của trang JAMStack là tốc độ, nhưng bạn cần phải chia khái niệm này thành ít nhất hai số liệu khác nhau. Tốc độ xây dựng và Tốc độ thời gian chạy.

Gatsby nói rằng khuôn khổ này "nhanh theo mọi cách quan trọng", trong khi Hugo giảng rằng chúng là công cụ nhanh nhất hiện có.

Xây dựng tốc độ thời gian

Vì chúng ta đang nói từ góc độ nhà phát triển và cả hai công cụ này đều tận dụng sức mạnh của hệ thống xây dựng để tạo các trang web tĩnh, nên tốc độ thời gian xây dựng là một số liệu tốt có thể là một phần quyết định của bạn.

Trong cuộc đua này, Hugo là người chiến thắng rõ ràng không nghi ngờ gì. Hugo được tạo ra để cung cấp “tốc độ chóng mặt” và chỉ mất khoảng 1 mili giây mỗi trang. Mặt khác, Gatsby phải mất một khoảng thời gian đáng kể để so sánh.

Build time speed will depend on the number of pages to generate and the latency of the data sources. An excellent way to compare this speed is just by having the same amount of markdown files as a source for both frameworks, with Hugo coming out on top every time.

Gatsby does offer incremental builds inside their cloud service that aim to provide better build times, but at the same time can lead to vendor lock-in.

Runtime Speed

Analyzing the runtime speed can be tricky and will depend on more variables than just the framework. But simply: Gatsby creates HTML pages from your React code to serve the essential app shell and then injects some JavaScript (including React library and any other 3rd party library) to continue the rendering process. This can be seen as slow since there is a JS bundle to load, but at the same time can be an advantage since through this process Gatsby offers other optimizations out-of-the-box such as: Progressive and responsive image loading, and inline critical CSS.

Hugo creates the static HTML pages from the Go templates and includes optional JS compiled with esbuild.

Here the comparison is challenging since simple load HTML and other static assets are fast for both solutions. Still, in some cases, the progressive enhancements offered by Gatsby can be useful or essential to a site, which gives it a slight edge.

Security

Both offer security as one of their selling points; Gatsby advertises that since they generate static HTML at build time, there is no server, avoiding malicious requests, DDOS attacks, or data exposures. But, the same is essentially true for any other static site generator.

You could argue that since Gatsby heavily utilizes JavaScript, then a security issue could arise based on the number of unknown and uncontrolled npm packages involved.

Hugo has a documentation section to talk about the security model they offer. General Data Protection Regulation (GDPR) is an EU law on data protection and privacy, and Hugo describes in detail how to configure your site to meet the regulations.

But in general words, an SSG holds its weight in terms of security from holes that can arise from 3rd party issues. As an example, this is a comment from a vulnerability issue found in postcss, which states:

The issue is not critical (it can affect only online tools like CodePen…)

So in terms of security, you can consider that both frameworks have similar or even equal security features.

Flexibility

What is the level of customizability that each framework offers? Do Gatsby and Hugo let you create what you want, or are there limitations on design?

Here, both frameworks offer full features on customization; Gatsby allows you to create any component you wish with React and any UI library or CSS solution you prefer: tailwind, emotion, or just plain old CSS. Hugo is also free of design opinions, so you are free to implement any UI you wish with the tools available: Go templates and any CSS framework.

Both solutions are equally flexible, so it just depends again on what framework you are more familiar with: React for Gatsby, or Go for Hugo.

Scalability

Scalability is the ability of the framework to handle large and growing sites. Both solutions have their own take on how to confront the challenge.

Gatsby is known for a slow-building process that creates many different pages, so it can be tedious to work with big sites. They even have an entry in the documentation to address this topic in particular.

They mention that they have acknowledged that Gatsby has scaling issues when the application has more than 100K pages or when the graphql queries are too large. There’s even a GitHub issue about scalability where the engineering team recollects benchmark data.

One way they offer to solve this building scalability is with their cloud system, but this is an imperfect solution.

On the other hand, Hugo prides itself to be blazing fast for building thousands of pages, so we can say (again) that Hugo here is a winner if we’re looking purely at scalability of build.

But static sites are built, or updated, way less often than they are read, so the other important point on scalability is how well they behave under heavy load.

The JAMStack is, by default, almost infinitely scalable. Since SSG pre-render the assets, the Time to First Byte (TTFB) is minimal. Also, the files can be served through a CDN and be available almost instantly for the user (and use the great HTTP caching capabilities to make it even faster), therefore lowering the server requirements. Hugo and Gatsby fall into this category of frameworks, so their scalability features are on par. Still, if you consider the built time an essential metric for your scalability needs, then Hugo has the advantage.

Price

Another essential aspect to consider when reviewing tools for your marketing site (or any site for that matter) is price.

Both Gatsy and Hugo are free and open-source. You can download them and use them for free, and the only cost you’ll have to worry about is deployment.

To deploy a site built with Hugo or Gatsby, check some CDN services like AWS, Netlify, or Vercel. Most of these services have a free tier to enable you to start as fast as possible. The other possible cost is related to your data store or CMS, which depends on the service you are using.

So as both frameworks are free, this one is a tie.

Community

With every tool or technology, having an active community can be a huge bonus, particularly if you run into an issue that’s not covered by documentation. In this case, Gatsby is a clear winner, with a thriving and growing community complete with global events and conferences.

Conclusion

Cả Gatsy và Hugo đều làm rất tốt trong mọi hạng mục quan trọng để so sánh, với Gatsby tạo ra một lợi thế rất nhỏ trong khía cạnh cộng đồng. Tuy nhiên, tôi nghĩ tất cả đều phụ thuộc vào kinh nghiệm của nhóm phát triển của bạn: nếu nhóm của bạn đã có kinh nghiệm với javascript và React, thì Gatsby là một lựa chọn tuyệt vời để bắt đầu ngay lập tức và nếu JavaScript không phải là công cụ bạn có, thì đường cong học tập của Hugo sẽ thấp hơn, vì vậy nó có thể là một sự thay thế tuyệt vời.

Muốn có ý tưởng cho bài đăng blog tiếp theo của bạn?

Bắt đầu các nỗ lực tiếp thị nội dung của bạn. Tải xuống danh sách hơn 50 ý tưởng chiến thắng của chúng tôi cho blog của công ty bạn ngay hôm nay.

Tải ngay!