2021.10.14

Next.jsでISRは最高！かもしれないけどお金がかかる話

村上　浩司

静的HTMLをレンダリングしつつ、設定したキャッシュ時間が過ぎてから画面にアクセスすると最新のHTMLを再生成することができるISR(Incremental Static Regeneration)。

Next.jsを使うならかなり便利な機能ですが色々制約もあり、ISRを実運用するのは大変だなって改めて痛感しました。特に運用費用の面で。

ISRを実現するだけなら簡単

Next.jsでISRをするだけならとても簡単に実装することができます。

下記のようにgetStaticPropsにrevalidateを秒数で指定して、Vercelにデプロイするだけです。

export const getStaticProps = () => {
  return {
    revalidate: 60,
    props: {}
  }
 }

敷いて言うと実装する上での制約が現状ではISRに対応させるためにはVercelにデプロイする必要があります。

Nextlifyなど今後ISRに簡単対応できるホスティングサービスがでてくるかもしれませんが、今の所ISRをやるならvercelにデプロイすることが割と前提だったりします。

ISRするにはVercelを使うことが前提と書きましたが、このVercelを使うのがつらいというのが本題です。

VercelはGitHubに連携してpushするとデプロイまで自動で行ってくれてとても楽に環境を作ることができます。
では、何が辛いのか？

Vercelで運用するのに一番の懸念が運用費です。

個人ならHobbyプラン、少人数でのチームでもProプランなら出せる金額ではあります。なのに運用費が辛いというのはどういうことか。

それはベーシック認証です。
Vercelではベーシック認証をかけるにはオプション料金で月に$150（記事執筆時）が追加で必要となります。

個人のお試しサイトならともかく、本番環境だけで運用するというのはなかなかに考えづらい開発体制ですよね。
SSGやISRであればエントリーとなるJSで認証をかけることも可能ですが、ISRでは厳しそうという結論に至りました。（もしやり方があれば教えてください）

先にも書いたようにVercelではGitHubにpushやPRをマージするとプレビュー用のURLを生成して閲覧できるというめちゃくちゃ便利機能があります。

ですがこのURLが逆に厄介なこともあります。

エントリーとなるJSでベーシック認証をかけたとしても一度生成されたURL、過去のコードのまま生き続けます。
プレビューURLを生成しない対策も存在はしますが、プロジェクトを作ってすぐにその対策も入れておかないと過去のURLを消すということができません。

プレビューにベーシック認証をかけるにはやはり課金が必要。

これまで書いてきたようにVercelでISRを使ってベーシック認証をかけるにはどうしても毎月$150が必要なります。

規模の大きなプロジェクトで潤沢にお金を使えるならともかく、個人だったり小規模なプロジェクトでいきなり毎月$150を払うのはなかなかに辛い。
実装が簡単にできるが上にISRは最高！と言いたくはなりますが、運用面を考えたときにISRはなかなか取りづらい選択です。

SEOが必要かつ、SSGよりもリアルタイム性が必要などISRを使いたい場面ではもう少しSSRに頼る必要があるというのが現状の感想です。