Next.jsのISRとGASでサクッとプライベートを晒す
↓作ったものはこちら
こんにちは、最近個人的にNext.jsを使っているのですが、ISR (Incremental Static Regeneration) の機能を使う機会がありませんでした。ISRは一度アプリケーションをビルドした後も特定のページを定期的に再ビルドする機能です。あまり更新頻度の高くない動的なコンテンツを含むページにおいて、リクエストのたびにHTMLを生成するのではなく生成済HTMLを返却したい場合などに使うと理解しています。
そして最近（時間的な意味でなく自分が見たという意味で）、スプレッドシートをデータソースにしたGAS (Google Apps Script) によるAPIの例を何個か見ていて、サクッと何か作りたいときには良い選択肢だなと思っていました。また、ISRとスプレッドシートのデータを返却するAPIの組み合わせはめちゃくちゃ相性が良いのではと思いました。というのも、GASがスプレッドシートのデータを取得する部分が割と時間がかかるのと、またスプレッドシートを操作するGoogle Sheets APIのリクエスト制限も強いので、頻繁にリクエストされるケースには向いてなさそうです。しかし、ISRによるビルドが完了してない場合は前回の生成済HTMLを返すので前者の問題が、ISRによる再ビルド時のみAPIを呼ぶので後者の問題が解決されます。
よって、Next.jsのISRとGASでサクッと何かを作ろうと思ったのですが、特にサクッと集まるデータが思い浮かびませんでした。こういうときは自分の身を削るしかないので、プライベートなデータを使います。今回は、ぼくのクラシルのお気に入りレシピを誰でも見ることのできるページを作りました。おそらく今のところ、2022年で一番需要の無い公開情報です。
なお、この記事の内容は以下の記事に強く影響を受けています。
サクッとな構成
ぼくがスマホのクラシルアプリから好きなレシピを保存します。クローラーがクラシルのwebサービスに定期的にログインして、ぼくのお気に入りレシピを収集してスプレッドシートに書き出します。VercelにデプロイされたNext.jsアプリがGASのAPIに定期的にリクエストを送信して、返却されたレシピを用いてHTMLを生成します。ぼくのお気に入りを気になる人たちがページにアクセスすると、生成されたHTMLが返却されます。
またGASはローカルでかつTypeScriptで開発するため、claspというGoogleのツールを使っています。
