如何使用 Gatsby、React 和 GraphQL 编写速度极快的静态应用程序

欢迎在推特上关注我，我很乐意接受您对话题或改进方面的建议。/克里斯

TLDR；本文旨在介绍 Gatsby 是什么以及它解决了哪些问题。

在互联网的早期，一切都围绕着文档和指向其他文档的超链接展开。我们使用 HTML 标记语言创建这些文档。
很快，我们又有了其他增强用户体验的技术，例如 CSS 和 JavaScript。最初的网站都是静态的，即我们创建的文件，它们永远不会改变。后来出现了 AJAX 技术，它使我们能够根据用户交互或其他原因请求内容，页面可以突然发生变化。下一次革命性的变革是 SPA（单页应用程序）的出现。SPA 使我们能够创建始终保持运行状态的应用程序。它通过使用 JavaScript 来模拟多页面的效果。现在，我们拥有了不会在每次导航到新页面时出现闪烁的网页。事实上，我们拥有了像客户端应用程序一样快速流畅的应用程序。然而，所有这些速度都是有代价的。

这些单页应用程序存在一些问题，具体来说：

加载速度慢，因为它们包含大量需要从某个端点获取并渲染的内容，所以渲染需要时间。
与没有可调用端点的静态页面相比，单页应用（SPA）安全性较低。SPA 应用大量调用后端来获取和持久化数据。端点本身就容易受到攻击，因此需要加以保护。
可发现性：Web 的设计初衷是面向静态文档。AJAX 引入了一种新原理，即根据后端对内容的请求和客户端的标记，在客户端渲染页面。该页面仅在用户主动访问时才会存在。这意味着搜索引擎的网络爬虫无法索引你的页面。因此，任何使用 AJAX 或 SPA 框架构建的内容都不会出现在搜索引擎结果中。

这就引出了我们今天讨论的各种创新，旨在解决上述问题。为了提高网站的可发现性，人们发明了各种预渲染技术，以确保当网络爬虫访问时，我们的动态页面仍然存在。另一种方法是使用静态网站生成器。静态网站生成器是一种应用程序，可以帮助您创建静态内容，例如 HTML、CSS 和 JavaScript。它们自互联网诞生之初就已存在，旨在使文档编写过程更加快捷高效。近年来，它们的受欢迎程度显著提升，这也引出了 Gatsby……

参考

Gatsby 文档Gatsby 的官方文档。
Gatsby教程一套非常好的教程，将带你从Gatsby的入门到精通。
我开发的 Gatsby CLI 工具。这个 CLI 工具可以帮助你搭建脚手架、组件、页面和插件。

如果您想将 Gatsby 应用迁移到云端，这里还有一些链接。

《了不起的盖茨比》的来龙去脉

Gatsby 是一款静态网站生成工具。它是一个命令行工具，可以帮助您创建静态网站。Gatsby 是一款面向现代的静态网站生成工具。这意味着什么呢？这意味着如今我们创建静态网站时，希望能够基于标记和内容来创建页面。而我们所需的内容几乎可以来自任何地方。

如今的静态网站生成工具不仅需要处理 XML、JSON、YAML 等不同格式的内容，还需要能够从特定端点获取内容。这类工具需要开箱即用地支持多种文件格式和内容获取方式，或者至少需要设计成易于扩展，以适应不断变化的 Web 环境和新的文件格式。Gatsby 兼具两者优势，它能够开箱即用地支持多种格式，并通过 Web 请求获取数据。此外，它还配备了强大的插件系统，方便用户轻松添加更多功能。插件既可以作为模块下载，也可以自行编写并直接添加到 Gatsby 项目中。

Gatsby 核心技术

在 Gatsby 中，你编写的是组件。组件经过构建过程后会变成静态 HTML 文件。Gatsby 的模型是将组件与内置数据图中的内容配对。我们是如何做到的呢？这主要得益于一些核心技术：

React 和 React Router，你编写的是用 React 编写的组件。
Gatsby 的GraphQL还内置了一个数据图。这是一个内存数据图，您可以使用 GraphQL（GraphQL 查询语言）对其进行查询。GraphQL 通常用于与 API 端点进行交互，您通过 API 端点请求所需的确切数据。在 Gatsby 的上下文中，GraphQL 用于查询内存数据图，并将查询到的数据作为输入提供给所编写的组件。

我们的第一个 Gatsby 应用

那么如何开始使用 Gatsby 呢？首先，您需要下载一些必要的软件，例如：

Git，您可以从这里安装 Git 。
要安装Node.jsnvm ，请使用或从此页面获取安装程序。
gatsby-cli，即 Gatsby CLI，可以通过运行命令下载npm install -g gatsby-cli，也可以npx在需要时使用和运行。

要在终端中创建 Gatsby 项目，请键入以下命令：

gatsby new <project name>

替换<project name>成你选择的任意名称。

现在你应该已经创建了一个 Gatsby 项目。

输入以下命令启动开发服务器并查看您的 Gatsby 项目：

gatsby develop

接下来，我们要访问内存中的数据图。请在浏览器中输入以下地址：

http://localhost:8000/___graphql

创建包含数据的页面

现在我们已经成功搭建并运行了一个 Gatsby 应用，接下来让我们学习如何向其中添加一些数据。为此，我们将执行以下两项操作：

创建页面组件
定义并使用针对内置图的查询

创建页面

在目录下src/pages创建一个文件about.js，并添加以下内容：

import React from 'react';
import Layout from "../components/layout"

export default () => (
  <Layout>
    <div>About</div>
  </Layout>
)

使用以下命令启动开发服务器：

gatsby develop

将浏览器地址栏更改为http://localhost:8000/about，您应该会看到以下显示内容：

定义查询

接下来，我们将学习如何使用内置图表。请将浏览器地址栏更改为http://localhost:8000/___graphql。在左侧向下滚动浏览各个元素，直到选中以下内容：

在中间部分，现在应该已经为您创建了以下查询。

query MyQuery {
  site {
    siteMetadata {
      author
      description
      title
    }
  }
}

将其复制到剪贴板以便记录。

返回您的about.js文件，并将其内容替换为以下内容：

import React from 'react';
import Layout from "../components/layout"
import { graphql } from 'gatsby';

export default ({ data }) => (
  <Layout>
    <h1>{data.site.siteMetadata.title}</h1>
    <div>{data.site.siteMetadata.description}</div>
    <div>{data.site.siteMetadata.author}</div>
  </Layout>
)

export const query = graphql `
 query {
  site {
    siteMetadata {
      author
      description
      title
    }
  }
}
`

上面的代码执行以下操作。来自可视化环境的查询结果最终显示在页面底部。然后，data组件中引入了一个新的输入参数。该参数data被认为包含查询结果，并将结果布局在组件的标记部分。这里发生的情况是，在构建时，Gatsby 会针对树执行查询，并将结果输入到你的组件中。

演示 json 插件

Gatsby 最强大的功能之一在于它能够使用插件进一步扩展自身功能。在本演示中，您将学习如何：

安装并配置插件
创建一些 JSON 内容
将插件获取的JSON 内容渲染到内置数据图中。

安装插件

npm install gatsby-transformer-json

创建 JSON 内容

data在文件夹下创建目录src/。在该data/目录中创建文件products.json，并添加以下内容：

[{
  "id": 1,
  "name": "ngVikings"
},
{
  "id": 2,
  "name": "Microsoft Build"
}]

配置插件

在将内容导入内置图表时，我们始终需要做两件事：

获取内容的过程涉及从本地或远程端点获取数据。我们的内容存储在一个名为 `<content_name>` 的本地文件中products.json，我们有一个名为 `<plugin_name>` 的插件可以帮助我们从该文件中获取内容gatsby-source-filesystem。
一旦插件gatsby-source-filesystem帮助我们获取内容并从所有 JSON 文件中创建节点，我们就需要从 JSON 文件中提取数据，并将转换后的节点与这些数据一起添加到现有节点中。

配置源插件

打开文件gatsby-config.js，在plugins数组中添加以下条目：

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: `${__dirname}/src/data`,
  },
}

上述指令指示从指定目录加载数据，该目录${__dirname}/src/data由属性设置决定path。这意味着该data/目录就是存放 JSON 文件的目录。

配置转换插件

配置此插件只需确保 Gatsby 知道要调用它，并指定其名称。将以下内容作为条目添加到plugins数组中gatsby-config.js：

`gatsby-transformer-json`

现在的配置gatsby-config.js应该如下所示：

`gatsby-transformer-json`,
{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: `${__dirname}/src/data`,
  },
}

使用 JSON 数据创建页面组件

使用以下命令运行应用程序：

gatsby develop

在浏览器中导航至[此处应填写网址] http://localhost:8000/___graphql。请注意，JSON 数据是从 JSON 文件中获取并放入内置图表中的：

上面我们新增了两个条目allProductsJson。productsJson这两个条目略有不同。allProductsJson返回一个 JSON 数组，而productsJson返回一条记录。

向下钻取树状结构并选择属性。构建的查询现在应该如下所示：

将查询内容复制到剪贴板，以便记录下来。

query MyQuery {
  allProductsJson {
    edges {
      node {
        name
        id
      }
    }
  }
}

products.js现在在该目录下创建一个文件pages/，并添加以下内容。

import React from "react"
import Layout from "../components/layout"
import { graphql } from "gatsby"

export default ({ data }) => (
  <Layout>
    <h1>Products</h1>
    {data.allProductsJson.edges.map(edge => <div>{edge.node.id} {edge.node.name}</div>)}
  </Layout>
)

export const query = graphql`
  query {
    allProductsJson {
      edges {
        node {
          name
          id
        }
      }
    }
  }
`

上面我们添加了刚才记下的查询语句。在组件中，我们按如下方式布局查询的响应：

{data.allProductsJson.edges.map(edge => <div>{edge.node.id} {edge.node.name}</div>)}

它在浏览器中的渲染效果如下http://localhost:8000/products：

概括

总而言之，你学习了一些关于网络发展历史以及静态网站生成器起源的背景知识。你还了解了 Gatsby 如何解决现代 Web 开发中的一些问题。最后，你学习了如何创建和运行 Gatsby 应用，以及如何向应用中添加不同类型的数据。

文章来源：https://dev.to/itnext/how-you-can-use-gatsby-react-and-graphql-to-author-blazingly-fast-static-apps-2nn8

菜单

分享

如何使用 Gatsby、React 和 GraphQL 编写速度极快的静态应用程序

如何使用 Gatsby、React 和 GraphQL 编写速度极快的静态应用程序

参考

《了不起的盖茨比》的来龙去脉

Gatsby 核心技术

我们的第一个 Gatsby 应用

创建包含数据的页面

创建页面

定义查询

演示 json 插件

安装插件

创建 JSON 内容

配置插件

配置源插件

配置转换插件

使用 JSON 数据创建页面组件

概括

系统设计面试中的 19 种微服务模式

使用 React 和 AWS Amplify 实现无服务器架构第三部分：跟踪应用使用情况

模型-视图-控制器（MVC）模式到底是什么？DEV 全球项目展示挑战赛，由 Mux 主办：快来展示你的项目吧！

我在两年内从 PHP 开发人员晋升为高级 C#/.NET 开发人员。

了解 Docker：第 12 部分 – 传递构建参数

Yarn 和第三方 NPM 客户端的黑暗未来 DEV 的全球展示与讲述挑战赛，由 Mux 呈现：展示你的项目！

CSS DEV 的全球展示挑战赛“响应式字体”由 Mux 呈现：展示你的项目！

我是如何以学生开发者的身份免费获得 Tabnine Pro 的，你也可以！

五大顶级JS框架

从 Rector PHP 开始：利用自动化改进您的 PHP 代码