在构建时使用 gatsby 和 netlify 获取数据后，将 api 数据保存在客户端上

Question

Gatsby 和 Netlify 的新手，但我有一个问题在其他地方找不到答案，可能是因为这是错误的方法。

我正在为需要显示最新 day/week/months 数据的动画视图的客户构建天气应用程序，这需要对不同分辨率的数据向天气 API 发出多个请求然后基本上使用 setInterval 将其插入可视化。

我突然想到，与其在客户端发出所有这些请求，我还可以在构建时通过计划构建获取所有数据，并每天使用这些更新后的数据静态地为页面提供服务，这样可以节省 API 并降低成本。

问题是 gatsby 假设你想用获取的数据生成 html 并使用 createPages 但在这里我只想将数据存储为 js 包中的 json 以便在客户端上呈现。

有没有办法将构建时间获取和格式化的数据放入 json 或类似的并静态服务以在客户端呈现？

Answer 1

你用 jamstack 标签标记了这个问题，你的方法完全符合这个方法。

Is there a way to put the build time fetched and formatted data into json or similar and serve statically for rendering on the client?

是的。

构建显示天气数据的 React 代码。
建立你的天气数据json。
仅使用您的天气数据中的变量json。

简单示例：

import data from "./data/weatherData.json"

const WeatherApp = () => {
  return (
    <Layout>
      <h1>{data.title}</h1>
      <div>{data.rain}</div>
      <div>{data.temperature}</div>
    </Layout>
  );
};

为了填充天气数据，您可以构建一个复杂的 GraphQL 查询，以完全按照您需要的方式获取所有数据。

另一种方法是构建您自己的 API，例如使用 AWS lamba 或类似的无服务器免费服务，并使用它来提供您的天气数据。这样你就不需要触发 gatsby build.

在构建时使用 gatsby 和 netlify 获取数据后，将 api 数据保存在客户端上

Persisting api data on client after fetching at build time with gatsby and netlify

gatsby

netlify

jamstack