Open11

Vercel以外でNext.jsのISRをできるのか問題

  • Vercelはとても良いサービスなのだが、ProプランだとBandwidth 〜1TB/月の制限があり、それを超えるとEnterpriseプランに入る必要がある
  • Next.jsのget○○Propsの中で重い処理をやると制限に引っかかる可能性がある。Vercelが内部的にはAWS Lambdaで動いており、そもそもLambda側の制限が厳しいという側面がある。
  • とはいえNext.jsをVercel以外で動かした場合にIncremental Static Regeneration(ISR)が実現できるのかあまり分かっていない

そんなわけでVercel以外でNext.jsのISRをやるとどうなのかの情報をまとめてくスクラップ。

何かご存知の方はぜひコメントをお願いします🙏

調べたのが半年以上前なので今は状況が変わっている可能性はありますけど、Vercel以外だと結構大変そうだなという印象でした。

  • 静的ファイルが生成されるパスをいじれればnfsとかCloud Storage FUSE使ったりできそうかなと思ったんですが、静的ファイルが生成されるパスに関するドキュメントもないし、コード読んで実現できたとしてもすぐ変わるかもしれない
  • 静的ファイル生成にフックできるならオブジェクトストレージに入れたりできそうだなと思ったんですが、フックする方法は無さそう

GitHub上で似たような要望はあがっていましたけど、Vercelとしてはそこをオープンに頑張る理由もないので進まないだろうなと思いました。
SSR + CDNで Cache-Control: stale-while-revalidate, ... すると実質同じなので、そっちの方がいいかなという気がしています。

情報ありがとうございます。

静的ファイルが生成されるパスに関するドキュメントもないし、コード読んで実現できたとしてもすぐ変わるかもしれない

まさにそうなんですよね。調べてみるとカスタムサーバーで実現できるのかも(?)という期待はあるのですが、実現できたとしても仕様変更の怖さがありますね。

https://github.com/vercel/next.js/discussions/18301

SSR + CDNで Cache-Control: stale-while-revalidate, ... すると実質同じなので、そっちの方がいいかなという気がしています。

僕もやるならその方法だろうなと思っています。今度 SSR on GAE + Cloudflareを試してみようと思います。

stale-while-revalidateに対応しているCloudflare WorkersであればISR自体はできるのかもしれないが、そもそもNext.jsを動かすのにはメモリとスクリプトサイズの制限が厳しそう

より重い処理ができるCloudflare Workers Unboundならいけるかも?ただ、まだGAされていないので試すのが難しい。

AWSになりますが、serverless-nextでは対応しようとしているようです。
ソースコードを読んだだけですが、Lambda@Edge で生成した静的ファイルを S3 にアップロードし、以降はそのファイルを参照する仕組みのようです。

ご参考まで。

有益な情報ありがとうございます!

Lambda@Edge で生成した静的ファイルを S3 にアップロードし、以降はそのファイルを参照する仕組み

なるほどですね。チェックしてみます。

2021/05に見たときは Next.js v9 までしか対応していなかったはずなのですが、今見たら AWS Amplify で Next.js v11 サポートしたみたいです。試してないのですが ISR できる的なこと書かれています。

https://docs.aws.amazon.com/amplify/latest/userguide/server-side-rendering-amplify.html

コメントありがとうございます!たしかにドキュメントにISRに対応してると書いてありますね。
今度試してみます!

ログインするとコメントできます