Next.js + Vercelの速度改善で行ったこと
Next.js
Vercel
-
Next.jsのバージョンを上げる Next.js 13だと結構遅い。14に上げて、ローカルのnpm run dev時の速度もかなり改善された。
-
aタグや、router.pushをできるだけ使わず、next/Linkを使う SSRさせたいため、意図的にaタグなどを使う場所などがあったが、かなり重くなってしまった。 認証チェックなどはmiddlewareに任せ、TanStackQueryのprefetchQueryでSSR時に取得した値をproviderに渡すなどして、基本的にCSRでの画面遷移やcache削除での値再取得に対応できるような形にしておく方針にすることで、だいぶ速度が改善された。
-
vercelのリージョンを東京にする Project Settings -> Functionsに設定されているリージョンを「Tokyo, Japan (Northeast) - hnd1」へ変更することで、こちらもかなり速度が改善された。