为什么你应该使用 GatsbyJs 以及什么时候不使用它 感谢您的阅读,我是 Tharun Shiv,又名开发人员 Tharun

2025-06-04

为何应该使用 GatsbyJs 以及何时不宜使用它

感谢您的阅读,我是 Tharun Shiv,又名开发者 Tharun

什么是 GatsbyJS?

它是一款速度超快的 React 现代网站生成器。(网站是这样定义的)。其含义如下:

  • 速度真是快得惊人!相信我,任何访问你网站的人都会发出“哇”的赞叹!
  • 它是一个现代网站生成器:您可以使用它来构建网站
  • 对于 React 来说,是的,它与 React 一起工作。

有演示版吗?

是的,我的博客完全基于 GatsbyJs,你可以访问它来体验它的速度:https://www.tharunshiv.com

它基本上是如何工作的?

Gatsby 在构建过程中负责数据采集和文件获取。所有这些构建的数据随后用于生成运行超高速网站所需的 HTML、CSS 和 JavaScript 文件。静态渲染是 Gatsby 的核心。

为什么您应该考虑使用 GatsbyJs?

1. 速度

我在这篇文章中多次提到“快”和“速度”这两个词,无论你在哪里读到关于 Gatsby 的文章,这几乎都是相同的,因为它确实超级快。通过利用 Gatsby 的速度和 PWA 的强大功能,你将能够构建类似移动应用的体验,让用户感觉就像在移动应用中切换页面,而不是在网站上。

PWA 是一种渐进式 Web 应用。点击此处,了解如何通过 3 个简单步骤将任何网站转换为 PWA。

2.插件

Gatsby 官方网站上有很多非常实用的插件,您可以通过npm instalyarn add(将软件包安装到项目中的方式)来获取。一些有用的插件包括:

  • gatsby-plugin-manifest:使用此插件使您的网站可安装并成为 PWA
  • gatsby-plugin-offline:使用此插件使您的网站离线运行。
  • gatsby-plugin-google-analytics:使用此插件为您的网站使用 Google Analytics
  • gatsby-remark-embed-youtube:将 YouTube 视频嵌入您的网站

GatsbyJS 插件

还有更多令人惊叹的插件,您可以使用它们来有效地加快大部分工作并使您的网站看起来功能丰富。

3. 入门指南和模板

GatsbyJs Starter 提供了丰富的代码库和模板,只需克隆并修改内容即可。这样,你就可以像开发博客一样,快速高效地开发网站。文档非常友好,如果你想学习 Gatsby,我强烈推荐你从这里开始。

GatsbyJS 入门库链接

4. Jamstack 的崛起

Jamstack 是一种使用 JavaScript、API 和 Markup 构建网站的文化。他们主要关注如何使用这些技术构建无需管理服务器的网站,并在 CDN(内容分发网络)的支持下,解耦前后端。
使用 Gatsby 构建网站也体现了 Jamstack 的文化。这可以带来更佳的性能、更高的安全性、更经济、更轻松的扩展以及更佳的开发者体验。

5. 基于 ReactJs

由于它完全基于 ReactJs,因此您可以直接使用 ReactJs 现有的技术和组件。ReactJs 社区非常强大,拥有大量现有组件,只需点击一下即可使用。这是一个巨大的优势,因为您无需担心 GatsbyJs 的更新程度。

6. Markdown 易于使用

如果你使用过 dev.to,你肯定知道 Markdown 是什么。Markdown 是一种简单的语法,可以用来编写富文本。你可以在 Gatsby 中使用 Markdown,并将其转换为基于 Markdown 的博客。每次你需要写一篇新文章时,你只需要添加一个新.md文件并推送代码,就这么简单!是不是很简单?

7.搜索引擎优化

使用 GatsbyJs 可以让您的网站充分利用内部代码中使用的大量优化技术。这将提升您的网站在搜索引擎上的排名。此外,还有很多插件可以帮助您提升排名。

为什么你应该避开盖茨比?

1. 增加构建时间

随着网站内容的增加,构建时间也会增加。这不仅在开发过程中令人沮丧,而且在部署过程中也会浪费时间。因此,如果你想构建一个经常更改的网站,不建议使用 Gatsby。

2. 完全动态的网站

如果您的网站完全是动态网站,那么我建议您使用类似 Next.js 等优势技术。Gatsby 更适合博客、作品集、落地页和其他动态活动较少的网站。(如果我错了,请在讨论中随时纠正我)

如果您喜欢,请考虑订阅我的 YouTube 频道:https://youtube.com/c/developerTharun

非常感谢您的阅读,如果您有任何疑问或建议,请在讨论中告诉我。

作者:

感谢您的阅读,我是 Tharun Shiv,又名开发者 Tharun

塔伦·希夫

文章来源:https://dev.to/developertharun/why-you-should-use-gatsbyjs-and-when-not-to-use-it-oli
PREV
使用纯 CSS 创建加载旋转器。步骤 1 - HTML 步骤 2 - 添加基本样式。步骤 3 - 添加旋转动画
NEXT
PWA - 服务工作者生命周期变得简单 - 3 个简单步骤感谢您的阅读,我是 Tharun Shiv,又名开发人员 Tharun