Gatsby v4的新內容

語言: CN / TW / HK

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的例子,你可以在編輯器中進行修改。當你點選開啟預覽按鈕時,它將顯示一個建立新的預覽按鈕,就在左角。

Building a new preview button

延遲靜態生成

延遲靜態生成(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('https://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(https://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(https://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.