Next.jsのISR + Rest APIを使ってみて

本日 (2021年3月8日)にUU-Circlesを公開いたしました！

Next.jsのISRとは

参考記事：【Next.js】CSR,SSG,SSR,ISRがあやふやな人へざっくり解説する

revalidateで指定した秒数以降にリクエストがきた時に、サーバー側でデータフェッチを再度行い、HTMLを再構築します。
一定期間ごとにサーバーサイドレンダリングを行うことで、高速なページ描画を実現しています。
【Next.js】CSR,SSG,SSR,ISRがあやふやな人へざっくり解説する

ISR + Rest APIを行なってみて

UU-Circlesでは、Next.js (ISR) + Rest API (Laravel) の構成で作成しました。

公開初日にして、各サークルの協力もあり、300以上のページを作成することができました！

ISRを使ってみて、メリットはレスポンスの高速化をすることができました。SSRよりも体感速度が確実に早かったです！

また、Next.jsがキャッシュを作ってくれるため、APIへのリクエスト数も確実に減少しました。リアルタイム性が少なくて良いUU-Circlesでは、ベストな選択肢でした！

公開初日に事故りました

下のように、60sごとにキャッシュを再生成するようにしてました。

これの問題点としては、revalidateを60sとすると、APIへのアクセスが60sごとに発生してしまいます (当たり前) 。

export async function getStaticProps(context) {
  const circleId = context.params.id
  const circle = getCircle(circleId)

  return {
    props: { circle },
    revalidate: 60, 
  }
}

ISRする際の考慮しなくてはならなくてならない点は、全てのリクエスト送信元はVercelのIPアドレスとなります。これにより誰がアクセスがしても、VercelがAPIコールすることになります。

これにより、Laravelのデフォルト設定の API limitationに引っかかりました。60sに60回しかAPIをコールできません。

対応策としては、

Next.jsのrevalidateの時間を増やす
LaravelのAPI limitationの値を増やす (RouteServiceProvider.php)

    /**
     * Configure the rate limiters for the application.
     *
     * @return void
     */
    protected function configureRateLimiting()
    {
        RateLimiter::for('api', function (Request $request) {
            return Limit::perMinute(600)->by(optional($request->user())->id ?: $request->ip());
        });
    }

上記のふたつを緊急でして、公開日を無事、乗り切れることができました！

ただ、ページが増えたときにどうしようという悩みがあります。また、同じ問題が起きそう。負荷テストしないとだめかも😢

Vercelのipの許可または、専用のトークンを発行して、許容リクエスト数を増やす必要がありそう。