AWS Amplify で Next.js の SSR / ISR
yteraokaAmplify Hosting で Next.js の SSR (Server Side Rendering) / ISR (Incremental Static Regeneration) に対応させる方法について
Amplify Hosting の初期は SSG (Static Site Generation) にしか対応していなかったが、その後 Next.js の SSR, ISR にも対応した
SSG だけであれば build 済みのファイルを S3 に配置して Cloud Front 経由で公開するだけで良かったが、SSR, ISR ではサーバーサイドでの処理が必要になる
Amplify Hosting ではこれを Lambda@Edge で Next.js を実行することで実現している
Serverless である
通常、ISR ではレンダリング済みのレスポンスをキャッシュとしてサーバー側にファイルとして保存するが、Lambda@Edge では S3 に保存するようになっている
Regeneration なので期限が切れた後のアクセスでキャッシュを更新する必要があるが、これは SQS から Lambda で更新するようになっている
yteraokaManual deploy は SSR に対応しておらず、自動 deploy の設定が必要
Amplify Hosting does not support manual deploys for server-side rendered (SSR) apps. For more information, see Deploy server-side rendered apps with Amplify Hosting.
yteraokaCloudFront Functions というものも存在するが、Amplify で使われるのはそれではなくて Lambda@Edge の Origin Trigger。
Origin Trigger なので実行時間は最大30秒、メモリは最大10GBも使える。対応して言語は JavaScript と Python。
yteraokaCloudFront 設定のカスタマイズも可能か？ Amplify では出来そうにない？
yteraoka/pages/api/* は front からリクエストを受ける API として使うらしい
yteraokaCloudFront の backend や behavior は手動で追加することが可能ではある、アプリ更新時のデプロイでは元に戻ったりしない
Cache behaviors per distribution の上限は 25 となっている（緩和申請可能）
yteraokaAmplify Hosting に Custom Domain を設定すると Custom Domain 用の Cloud Front から Hosting 用の Cloud Front に proxy されるようになる (Cloud Front が2段構えになる)