HackMDNext.js のインフラ要件と選択肢
この記事は Next.js アドベンドカレンダー 2020の 24 日目です。
Next.js をデプロイする上で、 vercel 以外のインフラを選択する際、どのような要件が必要かを以下に整理します。
SSG/SSR/ISR のどれを選択するべきかというのはアプリケーション性質に大きく依存しますが、インフラ要件も大きな要素であるため、慎重に選択するのが良いかと思います。
SSG の場合
要件
Static Site の配信ができれば配信は十分です。
デプロイ時のビルド環境として CI を使う他、 GitHub の push を hook してビルドが走るサービスを使用するのも良いでしょう。
HTML という大きなファイルを配信するため、 CDN を経由するのがベターです。CDN の選定の場合はリージョンに注意する必要があります。
具体的なプラットフォーム
- Netlify
- AWS Amplify Console
- firebase hosting
- GitHub Pages
- Amazon S3
- etc…
SSR の場合
要件
Node.js を実行する必要があるため、コンピューティングリソースが必要です。
簡単に行うのであれば IaaS やコンテナを使うのが良いですが、 Cloud Functions 等の Faas を使用するのも良いでしょう。
ただし、 FaaS の場合はコールドスタートが速度に影響するケースもあるため、パフォーマンスを意識する場合は測定・検証が必要となります。
また、上記同様、 static サイトの配信には CDN を使用するのがベターでありますが、個別に選定するとデプロイが複雑になります。
可能であれば、 CDN と組み合わせての管理をできるプラットフォームを選定するのが良いでしょう。
なお、 Lambda@Edge で動かすためのフレームワークも存在しますが、こちらの採用は運用との相談となるかと思います。特にプロダクションユースではトレーサビリティや再現性の観点から慎重になる必要があるでしょう。
具体的なプラットフォーム
- AWS lambda + S3 + CloudFront
- CloudFunctions + Firebase Hosting
- AWS Amplify
- Netlify Functions
- etc…
ISR の場合
要件
本題です。 Vercel で動作させる場合は必ずしも理解しなくて良いのですが、現状別プラットフォームで ISR を正しく行うためには ISR の挙動を理解する必要があります。
IRS の本体は、 SSR された HTML をキャッシュし、ユーザのアクセス状況によって適切に生成・破棄を行う機能です。
単に IaaS やコンテナにデプロイしただけでは、クラウドの構築によりキャッシュはされるものの、パージが ISR の想定通りには動きません。
(コンピューティングリソース内部にキャッシュする場合はその限りではありませんが、 CDN を通さない分のパフォーマンス影響が発生します。)
Vercel の場合はデプロイ時に edge でのワーカーが用意されているかのように見えますが、他のプラットフォームで実現する場合、同等の機能が必要があります。
たとえば AWS の場合、 現状の CloudFront(Amplify Console 含む) では相当する機能がないため、 lambda@edge で動作するコードを用意しなくてはなりません。
つまり、 IaaS / コンテナ + 静的ホスティング + CDN に加え、 edge でのコンピューティングリソースの準備が必要となります。
(これを Out of the Box で使えるのが Vercel の競合に対する優位性かと思います。)
参考までに、 Next.js 本体ではありませんが、 edge での動作を前提とすることによりキャッシュコントロールの自由度を高めた flareact というフレームワークが存在します。
https://github.com/flareact/flareact
Rendering React on the Edge with Flareact and Cloudflare Workers - The Cloudflare Blog
具体的なプラットフォーム
- AWS Apmlify + lambda@edge
総括
ISR 以外であれば様々なプラットフォームで動作するため、各社・プロジェクトの利用しているクラウドベンダに沿ったプラットフォームを選定することでも問題なく動作します。
しかし ISR を前提とするのであれば、 edge コンピューティングを前提とする必要があります。運用を見据えた場合、自前で用意するのか Vercel を利用するのかの検討の余地は十分にあります。
