blog-hero-img

Gatsby v4にアップデートしました

pen-icon2021.11.20

この記事は約3分で読めます

Profile Pic

この記事の筆者:三好アキ


🟢 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。
🟢『はじめてつくるReactアプリ with TypeScript』、『動かして学ぶ!Next.js/React開発入門(翔泳社/*韓国でも出版)』著者。


▼ Amazon著者ページはこちら
amazon.co.jp/stores/author/B099Z51QF2



すぐにリリースされたGatsby v4

先日のGatsby v4のリリースに合わせて、本サイトもv3からv4にアップデートしました。

v4

今回のv4のリリースはとても早く、v3から半年ほどしか経っていません。

v2(2018年9月リリース)からv3(2021年3月リリース)までにおよそ3年ちかくあったので、特にそう感じます。

Gatsby v4の特徴

今回のv4の特徴は次の3つです。


• SSR (Server Side Rendering)

• Parallel query running

• DSG (Deferred Static Generation)


これまでSSG(Static Site Generation)として主に使われていたGatsbyにも、SSR(Server Side Rendering)がついに導入されました。

これはGatsbyがさまざまなところで使われ、SSGだけでは対応できない場面が見えてきたためでしょう。

SSG以外のParallel query runningとDeferred Static Generationはビルドを高速化する仕組みで、これでさらにビルド時間が短縮されます。

とはいえ全体的には、v3リリース時のような大きな変更はなかったのが個人的な印象です。

Gatsby v3からv4への移行

v3リリース時には画像を扱うgatsby-imagegatsby-plugin-imageへと変わり、それに合わせてコード変更を行う必要がありました。

今回は、当サイトのようにシンプルな静的サイトとしてGatsbyを使っており、かつv3にすでに移行しているのであれば、v4へのアップデートはスムーズに進むと思います。

当サイトもgatsby-cliや各パッケージのアップデートだけでv4移行は完了しました。

Gatsby v4移行のメリット

v3移行時にもビルド時間は明らかに短くなっていましたが、v4移行後はさらにビルド時間が短くなりました。

目に見えるような恩恵は、今のところこのあたりくらいかと思います。

このように速いペースでアップデートが行われると、過去のバージョンのGatsbyサイトをどうしていくのかという、長期的なメンテナンスの課題も感じます。

Gatsbyに興味のある人は次の記事も参考にしてください。

Profile Pic

🟩 フロントエンド開発者入門ガイド【無料配布中】


最初にこれが知りたかった!
フロントエンド初心者が必ず押さえておきたい ― 『挫折しない勉強法』とその具体的ステップ、無料配布中。
(*名前不要・メールアドレスだけで受け取り可能です)