SSGでデプロイされていると勘違いしていた

https://contributions.nove-b.dev/をNetlifyにデプロイしている。

Clone元はhttps://github.com/atinux/my-pull-requestsで、envを変更するだけで自分ようになるので、ソースコードを読まずにnuxi buildでデプロイした。

最近は静的ジェネレータをメインに触っていたせいか、SSGでデプロイされると思い込んでいたので、プルリクを出すたびにデプロイしなくちゃいけなく、デプロイの定期実行をどうしようと思い悩んでいた。

先日プルリクを出したあとに見に行くと、最新のプルリクが反映されており、勝手にデプロイが走ったのかと混乱した。

デプロイ履歴を見に行くとデプロイ履歴は更新されていない。

SSGじゃないんじゃと思い返して、試しにプルリクを出し、観察しに行くとプルリクが更新されておらず、さらに混乱する。

しばらく経ち再訪すると更新されていて大混乱したので、しっかりコードを見に行くことにした。

コードリーディングしていく

CSR or SSR api fetch

fetchしている部分を見に行くと、

const { data: contributions } =
  (await useFetch) < Contributions > "/api/contributions";

特に特別なことをしていない。

ちなみにuseFetchとは、

このコンポーザブルは、との便利なラッパーを提供します。URL とフェッチ オプションに基づいてキーを自動的に生成し、サーバールートに基づいてリクエスト URL の型ヒントを提供し、API レスポンス タイプを推測します。

とのことだった。

調べてみると特定のレスポンスにおけるKeyだけを取得できるpickという機能とかssrとcsrを切り替えるserverとかあって便利そうだった。

パラメーター一覧

ちなみに全体でssrとcsrを切り替える方法は、nuxt.config.tsで

export default defineNuxtConfig({
  ssr: false,
  ...

のように設定すると実現できるようだった。

つまり特別なことはしてないので、Nuxtのデフォルトのレンダリングをしていると思われる。

Nuxtのレンダリングモード

Nuxtのドキュメントを見に行くとデフォルトはユニバーサルレンダリングというレンダリング方法らしい。

ユニバーサルレンダリングについて調べてみると、

また、ページが事前に生成されている場合は、キャッシュから完全にレンダリングされたHTMLページを返すこともあります。クライアントサイドレンダリングとは異なり、ユーザーはアプリケーションの初期コンテンツ全体を即座に取得できます。

とのこと。

そうすると、

SSGじゃないんじゃと思い返して、試しにプルリクを出し、観察しに行くとプルリクが更新されておらず、さらに混乱する。しばらく経ち再訪すると更新されていて大混乱したうえで、しっかりコードを見に行くことにした。

ここで即座に反映されなかったことが腹落ちした。

それでこのキャッシュに関してはisrのことを言っているっぽい。

調べてみるとnuxt.config.tsに

  $production: {
    routeRules: {
      '/': { isr: 60 * 5 },
      '/api/contributions': { isr: 60 * 5 },
      '/feed.xml': { isr: 60 * 5 },
    },
  },

という記述があった。

一度生成されると5分間 (60秒 * 5) キャッシュされてssrで生成された静的ページが表示されるようになる。

という仕組みになっていた。

便利なリポジトリは活用しつつ、勉強の一助にもしたいと思った今日この頃でした。