AWS Dev Day 2023 Tokyo: Modern Frontend Design Pattern
イケボの極み
英語の発音やアクセントが良すぎて内容が頭に入って・・くる
Cache がよすぎる
Google Page Experience Signal
CSR
Bundled Javascript の全体ロードが完了しないとページに何も出ない
Bad UX
弱いネットワークにいる(電車とか)にけっこうつらい
バンドラーでサイズ分割したり、遅延ロードしたりで緩和できる
CDNで速くする
CloudFrontでのキャッシュ
/index 以外のURLを直で叩かれたときの対策
Cloudfront Function でURLを書き換える
キャッシュヒットにも悪い影響を及ぼさずに解決できる
SSR (with Hydration)
Hydratopn(水和)
React, Nuxt, Svelte などで使う場合は専用のフレームワークを使って何とかすることが多い
画面のレンダリングが速くなることで、インタラクティブ操作に対応できない時間はかえって増加することも
Pre-Rendering (SSG)
ビルド時にバックエンドAPIを叩くような場合、ページが多いとAPIスロットリングにかかるかも
ISR (Incremental Static Regeneration)
stale-while-revalidate と同様の方法でキャッシュする
60秒ごとに swv する、ほぼ動的なコンテンツになる・・・!
Lambda Web Adapter
serverless framework で nextjs を動かすやつが死んだ
これを使って Lambda で next.js を動かすことができる
面倒ならAmplifyを使うと良いけど、Nextの最新機能は使えない