Gatsby v4的新内容_迪鲁宾

Gatsby最出名的是一个基于React、由GraphQL驱动的静态网站生成器，它有一个丰富的数据插件系统，用于管理系统、API和数据库。Gatsby也有几个插件，可以将其功能扩展到普通的静态网站生成器之外。

Gatsby v4.0框架于2021年9月发布，为开发者和用户体验提供了巨大的改进，同时也进入了服务器端渲染的世界，这是框架的第一次。我们将在本文中介绍所有的新功能，包括。

让我们在下面回顾一下这些，用相关的例子涵盖其中的几个。

引入并行查询运行

在以前的Gatsby版本中，一个统一的数据层被用来简化对多个内容管理系统的内容的处理。Gatsby v2.0和v3.0的推出是为了让开发人员能够更快地启动网站；它们启用了新的功能，只在开发服务器请求时构建页面或处理图像。

在4.0版本中，Gatsby通过引入并行查询运行，进一步缩短了构建时间，这通常是构建过程的最大部分。并行查询运行是向完全解耦的未来迈出的第一步，意味着构建速度更快。

Gatsby在历史上一直是单线程的；无论机器上有多少个核心，Gatsby都只利用一个线程来执行任务。然而，并行查询运行利用了多个核心，这意味着较慢的构建现在将在更多更强大的机器上并行完成--这将使构建速度提高40%。

通过预览用户界面改进内容管理

新的Preview UI提供了一个改进的内容可视化和编辑体验，帮助内容编辑者保持信息和非常有效。作为一个编辑，你可以通过一次点击实时看到你在CMS上所做的改变。

这里有一个关于预览用户界面的小演示。

Preview UI demo

当开发者在他们的网站上使用Gatsby的无头系统时，无论他们选择何种CMS，他们的内容编辑在做修改时都不会被搁置。作为一个内容编辑，如果你使用Contentful作为CMS的例子，你可以在编辑器中进行修改。当你点击打开预览按钮时，它将显示一个建立新的预览按钮，就在左角。

延迟静态生成

延迟静态生成（DSG）是一种技术，通过推迟非关键页面的生成，而只生成实时需要的内容，来加快构建时间。

只有你的Gatsby网站的关键部分在构建时生成，而其余部分在用户要求时生成并提供给他们。这将在用户访问实时页面时触发构建，而不是在前面生成所有内容。

DSG可以将构建时间缩短至10倍，特别是对于那些有内容可以在后台生成的大型网页。

对于像老网站或某些不经常访问的内容类型，你可以利用静态网页生成器的好处，你在那里等待构建完成。

要启用DSG，你可以按照官方文档中的说明。

用Gatsby Cloud托管

Gatsby Cloud是一个新的平台，它使用现代开发者工具集和工作流程，以获得更好的Gatsby体验。

Gatsby使用增量构建来减少构建时间或部署。当你对你的网站进行修改时，Gatsby会计算出从做出修改到修改后通过CDN向世界各地的用户上线的时间。

另外，Gatsby托管的亮相是Gatsby转向了一个更有活力的领域，以满足团队的需求。它解决了向网站发布更新的问题，现在已经转移到部署时间。

除了Gatsby云上的这个功能，gatsby-plugin-gatsby-cloud也已经更新。这个插件可以帮助你在Gatsby Cloud上控制标题和重定向你的项目。

Gatsby Shopify源插件和启动器

Gatsby现在提供自己的Shopify店面启动器，以进一步说服内容创作者选择Gatsby作为他们电子商务网站的前端。

虽然它仍处于测试阶段，但新的启动器可以让你比以前更快地开始使用Gatsby，并为你的构建提供广泛的易于定制的选项，其中大部分是用CSS模块构建的。

服务器端渲染

这个版本中最大的变化之一是Gatsby对服务器端渲染（SSR）的新支持。服务器端渲染是在用户前和请求前的基础上进行的。如果你想扩展实时数据需求，或根据服务器端条件在测试中获取细节，SSR将使你能够建立你的网站。

这些技术和渲染模型是Gatsby的新功能。总的来说，这些工具和API将推动构建时间减少10倍之多。

用Gatsby实现SSR

为了说明SSR，我们将利用getServerMethod() ，从Rocktim Saikia的animechan API中获取数据，这是一个简单的API，可以返回随机的动漫语录、源动漫的名称以及说出这些语录的角色名称。然后，我们将在我们的页面中动态地渲染来自getServerData() 方法的数据。

如果你没有一个现有的Gatsby网站，你可以按照这个指南来开始。

这里是我们的请求示例。

``` fetch('http://animechan.vercel.app/api/random') .then(response => response.json()) .then(quote => console.log(quote))

```

这里是我们的响应样本。

``` { anime: 'Tengen Toppa Gurren Lagann', character: 'Kamina', quote: 'Don\'t believe in the you that believes in me and don\'t believe in the me that believes in you. Believe in the you that believes in yourself.' }

```

创建一个简单的React组件，硬编码动漫名称、报价和角色。我们很快就会动态地渲染这个。

``` import React from "react”; const AnimeQ = () => ( <main> <h1>Anime Quote Of The Day</h1> <h3>Anime</h3> <p>Anime Quotes</p> <p>Anime Character</p> </mani> export default AnimeQ;

```

从getServerData() 内请求数据。asyncgetServerData() 是一个方法，指示Gatsby为我们选择SSR渲染选项。

这些数据必须作为一个只有一个属性的对象返回，props ，其值是API响应。

`` export async function getServerData() { try { const res = await fetch(http://animechan.vercel.app/api/random) if (!res.ok) throw new Error(Couldn’t get response!`)

return { props: await res.json(), } } catch (err) { return { headers: { status: 500, }, props: {} } } }

```

每当用户访问页面时，API就会被调用，返回的响应可以作为页面的serverData ，我们将接受它作为一个道具。让我们动态地渲染这些数据，并取出硬编码的值。

``` const AnimeQ = ({serverData}) => ( <h1>Anime Quote Of The Day</h1> <h3>{serverData.message.anime}</h3> <p>{serverData.message.quote}</p> <p>{serverData.message.character}</p>

) export default AnimeQ; export async function getServerData() { try { const res = await fetch(http://animechan.vercel.app/api/random) if (!res.ok) throw new Error(Couldn’t get response!)

return { props: await res.json(), } } catch (err) { return { headers: { status: 500, }, props: {} } } }

```

改进文档和教程体验

最后，如果这些新功能中的任何一个让你感兴趣，Gatsby提供了一个新的教程和整体文档体验，以帮助你快速入门。该教程告诉你如何建立一个博客和使用Gatsby≥v3的最新API。

总结

Gatsby一直在发展，它的主要目的一直是使开发者能够建立具有快速页面加载、快速图像加载和快速数据预取的网站。随着Gatsby v4的发布，由于DSG的实施，速度有了明显的提高--而且，他们计划每两周推出一个新的、开源的Gatsby版本，如果你在每次增量点发布时更新你的Gatsby版本，你会发现整个Gatsby用户体验有一些真正的改善，这是由建立速度计算的。

现在，更新将更频繁地发生，我们将看到更多的Gatsby，它带有更新的功能，使开发者和编辑获得最佳体验。你还在等什么？升级到Gatsby 4.0版本吧!

The postWhat's new in Gatsby v4appeared first onLogRocket Blog.