Error 504 when making an API request in NEXTJS deploy at vercel

Question

I have a service handler to handle cv uploads to firebase storage on a NEXTJS project. At the development stage, everything works correctly when the client makes a request to the API. But after deploying to vercel sometimes the API request fails by generating a 504 error. Here is my handler code

async add(userId, { file }) {
    const userService = new UserService();

    const { url: urlImage, pathName } = await this.#firebaseStorageService.uploadFile({
      file,
      folder: this.#firebaseStorageService.folder.assets,
      path: 'cv',
    });

    const user = await userService.getById(userId);

    // if the user has already uploaded a cv
    if (user.cv) {
      // remove old cv if exist
      const oldCv = await this.#getData({ field: '_id', value: user.cv.id });

      // delete old cv on storage
      await this.#firebaseStorageService.deleteFile(oldCv.path);

      // rewrite old cv on db
      oldCv.url = urlImage;
      oldCv.path = pathName;

      await oldCv.save();
      return oldCv._id;
    }

    const newCv = new CV({
      url: urlImage,
      path: pathName,
    });

    const cv = await newCv.save();

    await userService.addCV(userId, cv._id);
    return cv._id;
  }

Answer 1

In vercel under usage tab check for serverless functions section. It will give you a clear picture on the timeouts that are occurring during execution.

The cold start time for the serverless functions could be one of the reason why this might be happening. Might also depend on the region where the serverless function is running and how long does it take to resolve and respond.