Next.jsで実装 SPAでキャッシュ更新の時に便利な方法

SWRで十分な場面もありますが、今回僕はSWRが認証トークンの関係上使えなくて、そしてデプロイ後に更新した分が反映されなくて困った時にうまくいったので載せようと思います。

next.config.jsに以下を追記

  generateBuildId: async () => {
    const date = new Date()
    const Y = date.getFullYear()
    const M = ('00' + (date.getMonth() + 1)).slice(-2)
    const D = ('00' + date.getDate()).slice(-2)
    const h = ('00' + date.getHours()).slice(-2)
    const m = ('00' + date.getMinutes()).slice(-2)
    const s = ('00' + date.getSeconds()).slice(-2)
    return Y + M + D + h + m + s
  },

こうすることで、ビルドした時のディレクトリにビルドした時のDateを入れることができますので、のちに生きてきます。

続いて、

JSファイルを作って、ビルド時のコマンドに＆＆で繋げて実行します

require('dotenv').config()

var fs = require('fs')
const date = new Date()
const Y = date.getFullYear()
const M = ('00' + (date.getMonth() + 1)).slice(-2)
const D = ('00' + date.getDate()).slice(-2)
const h = ('00' + date.getHours()).slice(-2)
const m = ('00' + date.getMinutes()).slice(-2)
const s = ('00' + date.getSeconds()).slice(-2)

var jsonData = {
  deploy: Y + M + D + h + m + s,
}
// ファイルの書き込み関数
function writeFile(path, data) {
  const jsonStr = JSON.stringify(data)
  fs.writeFile(path, jsonStr, (err) => {
    if (!err) {
      console.log('更新成功')
      console.log(data)
    }
  })
}

function main(path, input) {
  writeFile(path, input)
}

//実行例
main(`build/deploytimestamp.json`, jsonData)
main(`public/deploytimestamp.json`, jsonData)

dotenvは.envを使うためにインストールしておきましょう。

あとは、deploytimestamp.jsonのファイルをfetchしていきます。
その際にとても大事なのはfetchしているファイルへのキャッシュを更新させることです。

    const hash = new Date().getTime()
    fetch('/deploytimestamp.json?' + hash) //ここです
      .then((res) => res.json())
      .then(
        (result) => {
          // JSONの内容が受け取れる
        },
        (error) => {
          console.log(error)
        }
      )

イメージは上記のようにqueryにDateを合体させていただければできるかと思います。

同じ悩みを持った方のアイデアの力に慣れたら嬉しいです。