🐢
Next.js × Supabase × Vercelで表示速度が激遅だったので調査した結果
Next.jsとSupabaseで開発したサービスをVercelへデプロイした時のこと。
ページの表示がローカルではサクサク動いていたのに本番環境では非常に時間がかかるようになってしまいました。
実装はgetServerSidePropsでSupabaseからデータを取得する構成。
構成
- Vercel
- Next.js
- Supabase
結論
SupabaseのリージョンとVercelのリージョンが異なっていたのが原因
はじめはSupabaseのクエリやフロントエンドのパフォーマンスを見直していましたが効果なし。
色々調べる中でリージョンかも？と思い変更したところあっさり解決。
変更前はSupabaseは東京リージョンでVercelはワシントンDCになっていました。
リージョンの設定方法
Vercel
Vercel管理画面のSettingsから設定可能
デフォルトはワシントンDC
Supabase
プロジェクト作成時に指定
まとめ
考えてみればそりゃそうかって感じですが意外とはまったので共有。
Discussion