NetlifyでGatsbyJSのキャッシュを設定してレスポンス速度を爆速にしよう

公開日: 2020/07/07@Panda_Program

GatsbyJSをNetlifyにデプロイするときの最適なキャッシュの設定を紹介します

**Netlifyとは、静的サイトのためのホスティングサービスです。**Netlifyへのデプロイの手順は簡単な上にパフォーマンスが高くスケーラブルであるため、ReactやVue.jsといったフロントエンドのJavaScriptフレームワークで作られたサイトと相性が良いです。なお、JamstackはNetlifyによって提唱された技術スタックです。

GatsbyJSとは、React.js製の静的サイトジェネレータです。SSRをすることでビルド時に最適化された静的ファイルを生成するため、サイトの表示速度が爆速になります。

GatsbyJSの勉強には「GatsbyJSで実現する、高速&実用的なサイト構築」という本がオススメです。GatsbyJSの作りやGraphQLの使い方などが解説されています。

この記事では、GatsbyJSのファイルごとのキャッシュの違いを記載した後、GatsbyJS製のサイトの表示速度をさらに爆速にするためにNetlifyでの最適なキャッシュ設定を紹介します。

GatsbyJSのファイルごとのキャッシュの設定を知る

「GatsbyJS公式推奨のキャッシュ設定を理解する」という記事で、GatsbyJSが生成するファイルごとにキャッシュ戦略が異なることを紹介しました。

GatsbyJSのキャッシュ戦略とは、ファイル名が変わらないものはキャッシュせず、ビルドのたびにファイル名が変わるものはキャッシュするというものです。

ビルドごとに名前が変わるファイルは、cache-controlヘッダーにmax-age=31536000を付与して1年間キャッシュします。これはビルドのたびにファイル名に一意なハッシュが与えられ、サイトにアクセスするたびに読み込むファイルが変わるため、ブラウザは古いファイルを読み込むことがないからです。

反対にpage-data.jsonなどはビルドするとファイルの内容が変わるものの、ファイル名は変わらないため、キャッシュしないのがGatsbyJS公式の推奨設定です。

gatsby-plugin-netlifyでキャッシュヘッダーを設定をする

Netlifyのレスポンスに任意のヘッダーを付与するためには、_headersというファイルを作成します。

GatsbyJSにはNetlify用のプラグインgatsby-plugin-netlifyがあるため、このプラグインを利用する方が自分で_headersに設定を書くより簡単です。gatsby-plugin-netlifyはビルド時に_headersを出力してくれるプラグインだからです。

ますはインストールをしましょう。

$ npm install gatsby-plugin-netlify

次に、gatsby-config.jsのpluginsにgatsby-plugin-netlifyを追加します。

そして、「GatsbyJS公式推奨のキャッシュ設定を理解する」という記事に記載の通り、コンテンツごとにキャッシュを設定します。

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-netlify',
      options: {
        headers: {
          '/*.html': [
            'cache-control: public, max-age=0, must-revalidate'
          ],
          '/page-data/app-data.json': [
            'cache-control: public, max-age=0, must-revalidate'
          ],
          '/page-data/*': [
            'cache-control: public, max-age=0, must-revalidate'
          ],
          '/static/*': [
            'cache-control: public, max-age=31536000, immutable'
          ],
          '/icons/*': [
            'cache-control: public, max-age=31536000, immutable'
          ],
          '/media/*': [
            'cache-control: public, max-age=31536000, immutable'
          ],
          '/sw.js': [
            'cache-control: public, max-age=0, must-revalidate'
          ],
          '/**/*.js': [
            'cache-control: public, max-age=31536000, immutable'
          ],
          '/**/*.css': [
            'cache-control: public, max-age=31536000, immutable'
          ],
        }
      }
    }
  ]
}

上記の記述ができたら、ビルドしてみましょう。

$ npm run build

すると、public配下に_headersというファイルが生成されました。ファイルの中身は以下の通りです。

/public/_headers

## Created with gatsby-plugin-netlify

/*.html
  cache-control: public, max-age=0, must-revalidate
/page-data/app-data.json
  cache-control: public, max-age=0, must-revalidate
/page-data/*
  cache-control: public, max-age=0, must-revalidate
/static/*
  cache-control: public, max-age=31536000, immutable
/icons/*
  cache-control: public, max-age=31536000, immutable
/media/*
  cache-control: public, max-age=31536000, immutable
/sw.js
  cache-control: public, max-age=0, must-revalidate
/**/*.js
  cache-control: public, max-age=31536000, immutable
/**/*.css
  cache-control: public, max-age=31536000, immutable

これでGatsbyJSが生成するファイルをNetlifyで配信するときの最適なキャッシュの設定ができました！

Happy Coding 🎉