torihazi.devVercelデプロイしたアプリの動作がもたつく原因と解決策
はじめに
最近、Vercel にデプロイして色々遊んでいる。
今回関係はない話だが、
Turso というデータベースが設定楽だし、すぐ使い始められるのでハマっている。
Tursoについても近々記事にしていきたいと思う
今回の内容は、「とにかくデプロイした Vercelの動作が遅い」というもの。
扱っているのは、簡素な お試し用 Next.js アプリ。
しかも Todoアプリ。(getDesign.mdで ニンテンドーライクにした)
payload的には titleくらいしか送ってない。
にもかかわらず、体感2秒くらい反映までかかっている。
これは何かがおかしい。
そう思ったため、色々と調べてみた。
手順 / 内容
アプリの概要
まず対象のアプリはこんな感じの普通のTodoアプリ。
Title入力して、Add押したら追加されるし、
Edit押したら編集できるし、Delete押したら削除できる。
チェックボックスにチェックを入れたら完了になる。
それだけ。
ほんとそれだけ。
調べる
どのくらい反映されるまでに時間がかかっているか調べてみる。
ということで対象アプリで 開発者ツール > Network タブを開いてみる。
そこから、タイトルを入力して、Addボタンを押してみる。
そうすると、以下のようなネットワークリクエストが走っているのがわかる。
みるべきは Request Responseのところ。
見方については こちらを参考
Request sent (0.49 ms)
リクエストの送信そのものにかかった時間。一瞬。
Waiting for server response (2.03 s)
これが最大のボトルネック。いわゆる TTFB（Time To First Byte）。リクエストを送ってから、
サーバーが最初の1バイトを返すまでの時間。サーバー側の処理（DB問い合わせ、RSCのレンダリング、API呼び出しなど）が遅いとここが伸びる。
Content Download (675.80 ms)
サーバーがデータを返し始めてから、全部ダウンロードし終わるまで。レスポンスのサイズが大きいとここが伸びる。
合計2.71秒のうち、2.03秒がサーバーの応答待ち。
ボタンを押した後の体感の遅さは、ほぼサーバー側の処理時間が原因。
疑問
ただ待って欲しい。
別にそんな複雑なペイロード送っているわけではない。
N+1問題が発生するはずもないし、1行DB インサートくらいならすぐに終わるはず。
それなのに、2秒くらいかかっている。
何が原因なんだろう。
色々調べたところ、可能性がありそうなものが見つかった。
Regionが悪さしている可能性
Regionが悪さをしている可能性がある。
というのも、Vercelはデフォルトでは USA のワシントンらしい。
Tursoは デフォルトで ユーザに地理的に近いリージョンに配置される。
私は 東京リージョンにいるので、デフォルトでは東京リージョンに配置される。
これはTursoのダッシュボード画面である。
ということでVercel側を見てみる。
おー、わしんとーん。
ということなので Asia Pacific (Tokyo) に変更して、Save してみる。
ちなみにチェックボックス色々あるが、Hobby planだと 1リージョンしか選択できない。
Saveしてみるt、再デプロイが必要そうなのでしてみた。
結果
緊張の瞬間。
やったー！
めっちゃ速くなった。
2.71秒から 0.5秒になった。
おー、これがパフォーマンスチューニングってやつか。
今まで、Add Delete Update 押したら
ことごとく 2秒くらいかかっていたのが、0.5秒くらいになった。
これはでかい。
今までは ボタン一個で、東京から ワシントンまで行って、
そこから東京のTursoとやりとりして、返して、また日本にって感じだった。
お疲れ様ですね。秒速旅行。
まぁそれでも 0.5秒はかかっている。
楽観的更新みたいなのしたらもっと早くなるんかな。
最近 Frontend 疎いからどうなんだろう
何はともあれ、よかったー。
補足
ちなみに vercel.json で 設定することも可能だそう。
こちら を参考に。
{
"regions": ["hnd1"]
}とする感じ。
さっきの開発者ツールの Request のHeadersを見てみると
下の方に X-Vercel-id というものがあり、それが "hnd1" になっている。
このhnd1は東京リージョンのこと。よく見てみると、
さっきのVercelのGUIの設定にもちらっと書いていた。
なるほどそういうこともできるのね
まとめ
Vercel にデプロイしたアプリの動作がもたつく原因と解決策をまとめた。
Vercelはデフォルトでは USA のワシントンに配置される。
Tursoはデフォルトではユーザに地理的に近いリージョンに配置される。
Vercel のRegionをいじると改善する可能性大。
インフラの威力をまじまじと感じた記事でした。
おしまい。