とりあえずデプロイしたらキャッシュに惑わされたのでNuxtのユニバーサルレンダリングについて調べてみた

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で生成された静的ページが表示されるようになる。 という仕組みになっていた。 便利なリポジトリは活用しつつ、勉強の一助にもしたいと思った今日この頃でした。

blog.nove-b.dev · nove-b