Wiz テックブログ

Wizは、最新のIoTやICTサービスをお客様に届ける「ITの総合商社」です。

Gatsby v3リリース 差分ビルド検証

先日、(2021年3月3日) Gatsby v3.0がリリースされました。 Introducing Gatsby 3.0 – Faster in Every Way that Matters

いくつかの変更がありますが、特に気になった項目が

V3 for Content Editors: Faster build times on any service

(あらゆるサービスでのビルド時間の短縮) です。

Faster build times on any service

項目を大胆に丸々引用します。

Last year Gatsby introduced a breakthrough in static site generation with Incremental Builds. Instead of a content update kicking off a full rebuild of your entire site, we enabled a new feature that only updated pages that had new content to display. This dropped build times for sites from multiple minutes to under 10 seconds in many cases. Content editors were especially excited. With Incremental Builds, a Gatsby project now enabled the same rapid workflow and seamless feedback loop as the all-in-one CMSs they were familiar with using. An editor could fix or add content to a page and see change live in less than a minute. However, Incremental Builds was initially only available in Gatsby Cloud. We heard from the community that you wanted this key feature to be enabled in Gatsby open source, so the content editors you support could enjoy fast builds no matter what CI/CD service you choose. Today, with Gatsby v3 we’re thrilled that Gatsby open-source now has Incremental Builds enabled by default, anywhere you decide to run your project!

日本語訳です。

昨年、ギャツビーはインクリメンタルビルドによる静的サイト生成のブレークスルーを導入しました。 コンテンツの更新によってサイト全体の完全な再構築が開始される代わりに、新しいコンテンツが表示されるページのみを更新する新機能が有効になりました。 これにより、多くの場合、サイトのビルド時間が数分から10秒未満に短縮されました。

SSGといえば、変更が一箇所だけであってもプロジェクト全体をビルドしないといけないので、 どうしても再構築に時間がかかっていました。
これは画期的な機能です。

コンテンツ編集者は特に興奮していました。インクリメンタルビルドにより、Gatsbyプロジェクトは、使い慣れたオールインワンCMSと同じ迅速なワークフローとシームレスなフィードバックループを可能にしました。編集者は、ページにコンテンツを修正または追加して、変更を1分以内にライブで確認できます。

その通りですね。データ変更が多いプロジェクトであればあるほどこの機能は素晴らしいものになります。

ただし、インクリメンタルビルドは当初GatsbyCloudでのみ利用可能でした。コミュニティから、この重要な機能をGatsbyオープンソースで有効にして、サポートするコンテンツエディターが、選択したCI / CDサービスに関係なく高速ビルドを楽しめるようにしたいとのことでした。

インクリメンタルビルド機能は私も実際にプロダクトに導入したかったのですが、 GatsbyCloudという有料プランでしかサポートされておらず(一部無料プランもあり)、断念していました。

今日、Gatsby v3では、Gatsbyオープンソースで、プロジェクトを実行することにした場所で、デフォルトでインクリメンタルビルドが有効になっていることに興奮しています。

つまり、その素敵なインクリメンタルビルド機能オープンソースGatsbyで無料で使えるようになった!!
ということです。これはすごい!!

検証

本当に私が想像していた(待ち望んでいた)差分ビルドなのでしょうか。
試してみるのが一番ですね。

Gatsbyプロジェクトの準備

検証用にGatsby + Contentful + Netlifyでサクッとアプリを作成しました。 参照: JAMstack Gatsby + Netlify + Contentfulの構成を試してみた

インクリメンタルビルドの為の各種設定

Netlifyにプラグインを追加します。 参照: 【Netlify x Gatsby.js】ビルド時間を短縮!差分だけビルドする機能(Incremental Builds)を導入するテスト!

Netlify上でPluginsを選択し、Gatsby cacheをインストールします。

f:id:iricocco:20210304201453p:plain
Netlify

また、package.jsonnpm run build--log-pagesというオプションを追加します。
これによって、どのページがアップデートされたのかがログで吐き出されるようになります。

  "scripts": {
    "develop": "gatsby develop",
    "start": "gatsby develop",
    -"build": "gatsby build",
    +"build": "gatsby build --log-pages",
    "serve": "gatsby serve",
    "clean": "gatsby clean"
  },

そして、contentfulなどで情報を更新してみてください。
今回トップページのみに影響のある範囲のデータを編集したところ、 トップのみが更新されているのがわかるかと思います。
404ページなどは更新されていません!! f:id:iricocco:20210304201722p:plain 期待する挙動が得られています。

一体どういう仕組みなのか

www.gatsbyjs.com

HTML生成時に、入力しているものをトラックしている、と書かれています。 主な追跡対象は以下です。
・どのテンプレートが使われているか
・ページクエリの結果
・ページテンプレートで使用されている静的クエリの結果
・フロントソースコード
このトラックに紐づくコードに変化があった時、そのHTMLを更新するという仕組みのようです。

上記で示した例は簡易的なリポジトリでしたが、ページ数が多いプロダクトでは、build時間が激変すること間違いなしです。

懸念点

検証していないのでまだ確かではありませんが、VercelでGatsbyのこの機能が使えるか怪しい...と思っています。

Gatsby Incremental builds · Discussion #5001 · vercel/vercel · GitHub

少し前ですが、このようなissueが挙げられていました。
VercelはNext.jsと同じチームなので、手厚くGatsbyをサポートするのはなかなか難しいのかな、と思ったり...
今後時間を作って調べてみたいです。

現在Wizでは一部プロダクトにNext.jsが使われていますが、更新の頻繁なサイト、ページ数の多いサイトにはGatsbyという選択肢もありかも、と今回のアップデートで思いました。

最後に

Wizではエンジニアを募集しております。 興味のある方、ぜひご覧下さい。

【フロントエンドエンジニア】

場所にとらわれず自社メディア成長に貢献したいフロントエンドエンジニア募集! - 株式会社WizのWebエンジニアの求人 - Wantedly

【バックエンドエンジニア】

勤務地自宅を叶える!バックエンドエンジニアとして事業を成長させたい方募集 - 株式会社WizのWebエンジニアの求人 - Wantedly