Vercel で 504 （FUNCTION_INVOCATION_TIMEOUT）タイムアウトが発生した時はリージョンの設定を変えてみる
はじめに
Next.js,vercelでサイト制作していて、そちらではサーバーコンポーネントから外部エンドポイントにデータフェッチしてコンテンツを取得・表示する仕様にしていました。
（※実際にデータを描画するのはデータをpropsで渡されたクライアントコンポーネントです）
今回、データフェッチ処理において504（FUNCTION_INVOCATION_TIMEOUT）が発生してコンテンツが取得・表示されないエラーに遭遇したので、その時の対応策を備忘録がてら残しておきたいと思います。
もし同じ状況に困っている人が検索でヒットして解決の一助になれれば幸いです。
リージョンをデフォルトのワシントンDCから東京や大阪など日本に変更
先に結論・解決策を述べるとvercelのダッシュボードから当該サイトの[Setting]欄へ移動し、Function RegionをデフォルトのワシントンDCから東京や大阪など日本のリージョンに変更することで504（FUNCTION_INVOCATION_TIMEOUT）が解消されました。
エッジコンピューティングのような、サーバーの物理的な距離の近さで処理負担を軽減したことにより当該エラーを解消できたと推察しています。
504 （FUNCTION_INVOCATION_TIMEOUT）
504（FUNCTION_INVOCATION_TIMEOUT）とはタイムアウトエラーです。
大雑把に説明すると「処理に時間がかかりすぎて中断された状況」です。
このFUNCTION_INVOCATION_TIMEOUTエラーは、関数の呼び出しが許容実行時間よりも長くかかる場合に発生します。これは、関数自体のエラー、ネットワーク呼び出しの遅さ、または関数が実行されている環境の問題が原因である可能性があります。
vercelではプランごとに「許容実行時間」が異なります。
無料のHobbyプランではデフォルトが10秒で上限60秒となっています。
ちなみに、筆者は最初Function Max Durationを変更しようと思ったのですが「請求に悪影響を及ぼす可能性がある」という警告文が出てビビったので別のアプローチを考えました。
その時に、リージョンに目が行って「物理的な距離の問題では？」と思ってダメ元で変更したところうまくいきました。
これは先程も触れた通り、サーバーの物理的な距離の近さで処理負担を軽減したことにより当該エラーを解消できたと推察しています。
さいごに
開発環境では問題なく動いていて、デプロイするとエラーが出てしまった時は焦ると思います。
（筆者は焦りました）
この記事が、そんな焦って解決策を探している人のお役に立てれば嬉しい限りです。
参考情報
Discussion