【小ネタ】Vercelが遅いので確認したらリージョンが東京じゃなかった話

家族で遠くの温泉に遊んでリフレッシュしてきました！

露天風呂に先に入っている大家族がいてなんとなく尻込み をしてしまったyuku_tasとその子でした。。

お邪魔しちゃ悪いかなって、、

そんなこんなですが、ハッカーの皆様はいかがお過ごしでしょうか。

概要

さて、本日は小ネタです。Vercelを商用環境として使っているサービスがありまして、APIへのリクエストをかけたのですが、妙に遅かったのでそれを解決した方法を簡単にまとめます。

結論から言うと リージョンの設定に問題がありました。

前提条件

まず簡単に前提条件をまとめます。

フロントエンド(Next.js)はVercel
バックエンド(PHPのRestfulAPI) + DBはLightsail (東京リージョン)

という構成で置いていました。

ところが、

yarn run dev

でローカルでNext.jsを試したときに比べて、妙にアプリケーションのリクエスト完了までの時間が長かった です。

そこで調査をしてみました。

useEffectが2回呼ばれていることに起因している可能性を疑う

Google Chromeの「要素を検証」を確認すると、なぜか、useEffectが2回呼ばれてしまっていました。

useEffect(() => {
    try {
      // 以下のrequest()の中でHTTPリクエストを行うfetch()を呼んでいる。      const response = await request({ token: session?.user?.accessToken || "" });
		setResponse(response)
      } catch (e: any) {
    }
},[])

これを避けるために、ChatGPTにも聞いてみたところ以下のようにするというアドバイスをもらいましたがうまくいきません。

  useEffect(() => {
    let isFirstRender = false
    async function readFirst() {
   	if(isFirstRender == true) {
		  return
		}
    try {
      const response = await request({ token: session?.user?.accessToken || "" });
		  setResponse(response)
    } catch (e: any) {
    }

    // 初回のみ呼ばれるはず
    readFirst()
    return () => {
      isFirstRender = true;
    };
  }, [])

isFirstRendererが起動直後にtrueになるので、次は呼ばれない、、と思いきや、同じタイミングで useEffect()が2度呼ばれているようです。

StrictModeが原因で2回呼ばれていた

これはReactの従来からある問題で、useStrictModeをoffにしないと、2度useEffect()が呼ばれているようです。

これに対する対処としては、

next.config.jsのuseStrictModeを当該箇所を変更します。

const nextConfig = {
  ...
  reactStrictMode: false,
  ...
}

しかし、リクエスト時間の指標は改善できず。。今回の事例はこれでは解決しませんでした。

vercelのリージョンを変更する

そこでそもそものアーキテクチャから考えてみたのが、レイテンシの問題 です。

Vercelほどのサービスで、単純なAPIリクエストだけでここまで遅くなることがあるだろうか？自分の実装が全て悪いとも思えないと、、

リージョンを確認・変更

そこでリージョンを確認してみます。

Project Settings → Functions と遷移します。

こちらでリージョンが 「Washington, D.C., USA (East) – iad1」 になっていました。

こちらを 「Tokyo, Japan (Northeast) - hnd1」 に変更したら、あら不思議。。ローカルで試したのと同じく、サクサク挙動に。

vercelのデフォルトのリージョンってワシントンDC なんですね、、ここの解決に1日かかった 。。

APIのリクエストで日米を往復していれば、いかに光の速度で通信が行われたとしてもロスは生じてしまいますね。古典的な確認ミスでした。

クラウドのサービスを利用する時はリージョンのチェックは必須...ということでまた経験が溜まった次第でした。

補足

こちらのリージョンはEdge CDNみたいな仕様となっており、最寄りのCDNに接続してくれるので、再デプロイなどは不要 です。セレクトボックスを変更した瞬間東京にあるものとして扱われるので、その点はVercelすごい、と思った次第でした。

まとめ

最近業務が忙しくブログのポストがちょっと遅れ気味ですが、継続することが大事なのでアウトプットはしっかり続けていきたいと思っています。どうか引き続き本ブログをご愛顧いただければ幸いです。

Xアカウントも細々と続けておりまして、そちらにメンション・DMいただけると喜びますのでお待ち申し上げております。

この記事が何かのお役に立てれば幸いです。
最後までお読みいただきありがとうございました！