Gatsby 与 Next.JS——是什么、为什么以及何时？

这篇文章写了将近两年了，现在仍然有人在读——太棒了！可惜的是，文中很多内容已经过时了。

我写了这篇文章的新版本，更新至 2021 年。可以在这里找到 --> https://dev.to/jameesy/gatsby-vs-next-js-in-2021-what-why-and-when-2fae

好吧，首先，我跑题了，我超级喜欢这两个“框架”。我经常在 Twitter 或 Instagram 上对它们赞不绝口，然而，毫无疑问，每当我谈论这些工具时，我被问到最多的问题是，哪个更好？

我应该用 Next.JS 吗？不过我听说 Gatsby 挺好用的，或许我应该用一下？

所以我想我会进一步深入讨论这个问题，希望能让选择更加明确一些。

让我们战斗吧！

Gatsby 与 Next - 简介

那么，除了您以前听过但从未真正理解的流行语之外，Gatsby 和 Next 是什么呢？

用最基本的话来说，同样的方式，create-react-app将为您创建一个 React 项目的样板，这两个框架将为您创建应用程序奠定基础。

然而，它们已经分离出来create-react-app，因为它们不再被归类为样板，而是工具包，奠定基础，然后为您提供一套关于如何建造房屋的说明。

总结一下：

create-react-app- 奠定 React 项目的基础。剩下的就交给你了。

Gatsby & Next - 奠定 React 项目的基础。为您提供如何在其基础上进行构建的指导。

...

可是啊？奇怪？他们俩做的……竟然是同一件事？

有点。

乍一看，它们非常相似，因为它们：

提供样板应用程序。
生成性能极佳、可访问且 SEO 友好的网站。
开箱即用地创建单页应用程序。
拥有非常棒的开发体验。

但实际上，它们是有根本区别的。

服务器端渲染 vs 静态生成

好的，我们开始在这里讨论一些技术问题，所以请继续关注...这并不太糟糕！

Gatsby是一款静态网站生成器工具。静态网站生成器在构建时生成静态 HTML。它不使用服务器。

Next.JS主要是用于服务器端渲染页面的工具。每当有新的请求通过服务器传入时，它都会动态生成 HTML。

当然，两者都可以在客户端调用 API。根本的区别在于 Next 需要服务器才能运行。而 Gatsby 完全不需要任何服务器就能运行。

Gatsby 仅在处生成纯 HTML/CSS/JS build time，而 Next 在处创建 HTML/CSS/JS run time。因此，每次收到新请求时，它都会从服务器创建一个新的 HTML 页面。

我不会在这里深入探讨每种方法的优缺点，但如果您想了解更多，请查看这篇文章 - https://dev.to/stereobooster/server-side-rendering-or-ssr-what-is-it-for-and-when-to-use-it-2cpg

数据处理

这些工具之间的另一个根本区别是它们处理数据的方式。

Gatsby 告诉您如何在应用程序中处理数据。

接下来的决定权完全由您决定。

这到底是什么意思？

Gatsby 使用了一种叫做 GraphQL 的技术。GraphQL 是一种查询语言，如果你熟悉 SQL，它的工作方式与 SQL 非常相似。你使用一种特殊的语法，描述组件中所需的数据，然后组件会将这些数据返回给你。

当您的组件需要时，Gatsby 会在浏览器中提供该数据。

一个例子：

import React from "react"
import { graphql } from "gatsby"
export default ({ data }) => (
  <div>
    <h1>About {data.site.siteMetadata.title}</h1>
    <p>We're a very cool website you should return to often.</p>
  </div>
)
export const query = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`

在上面的例子中，您可以看到我们有一个查询需要获取title，然后title在组件内显示。太棒了！

Gatsby 还提供了丰富的插件，适用于各种数据源，理论上可以轻松集成多种数据源。一些数据源插件包括 Contentful、Wordpress、MongoDB 和 Forestry。这允许你将网站连接到 CMS 并从外部控制内容。

在进行生产构建时，不再使用 GraphQL，而是将数据保存到 JSON 文件中。

...好的，很酷。

另一方面，如何管理数据完全取决于你自己。你必须根据自己的架构来决定如何管理数据。

这样做的好处是，您不会被束缚于您可能想要或不想使用的任何技术。

那么我应该选择什么呢？

是否应该使用 Gatsby 或 Next 很大程度上取决于您的用例，因为它们确实都很棒。

何时使用 Next.JS

如果您有大量内容，或者您预计内容会随着时间的推移而大幅增长，那么静态生成的网页并非最佳解决方案。原因是，如果内容过多，构建网站会耗费大量时间。

当创建一个包含数千个页面的大型应用程序时，重建速度可能会相当慢。而且，如果点击发布后需要等待一段时间才能上线，这可不是一个完美的解决方案。

因此，如果您的网站内容会随着时间的推移而不断增长，那么 Next.JS 是您的最佳选择。

此外，如果您希望在访问数据方面拥有更多自由，Next.JS 值得一试。

值得一提的是，Next 的文档是我见过的最好的文档之一。它有一个交互式的介绍，会在你浏览内容时进行测试，确保你跟上进度 :) 太棒了！👏

何时使用 Gatsby

我倾向于（这是我的个人偏好）在构建小型网站和博客时使用 Gatsby。这个生态系统非常适合连接到 CMS（真的非常轻松），而且有一些很棒的指南教你如何开始使用它。

在我看来，Gatsby 的上手和运行都更容易，所以这一点值得牢记。同样，它的文档非常高水平，包含大量教程，方便你循序渐进地学习。

Gatsby 还附带一些“入门”模板，以及相对较新推出的“主题”，所有这些都使得快速启动和运行功能齐全的 Web 应用程序成为可能。

文章来源：https://dev.to/jameesy/gatsby-vs-next-js-what-why-and-when-4al5