Next.js/Vercel桌面端严重性能问题排查求助

问题概述 #

部署在Vercel的简易Next.js应用仅在桌面端出现严重性能问题，安卓移动端加载速度正常，每个请求仅需几分之一秒。

具体现象 #

• submission API路由请求耗时极长（35.16s/35.35s/35.17s/16.86s），该接口通过Auth0认证后，使用Prisma ORM从NeonDB获取少量数据。
• 同属部署的Auth0认证me端点响应同样缓慢。
• 已排除网络问题（其他网站运行正常）和Auth0响应延迟问题（本地开发环境加载速度符合预期），怀疑是Vercel Serverless函数冷启动导致，但缺乏验证和控制方法，希望获得更多分析视角。

相关代码 #

客户端代码（app/submissions/page.tsx） #

"use client";
import { useAppDispatch, useAppSelector } from "@/src/redux/hooks";
import { addSubmission, setSubmissions } from "@/src/redux/slices/songProcessSlice";
import { submissionType } from "@/src/types/submissionTypes";
import { withPageAuthRequired } from "@auth0/nextjs-auth0/client";
import React, { useEffect, useState } from "react";

async function saveSubmission(submission: submissionType) {
  const response = await fetch("/api/submissions", {
    method: "POST",
    body: JSON.stringify(submission)
  })
  if (!response.ok) {
    throw new Error(response.statusText)
  }
  return await response.json();
}

async function getSubmissions() {
  const response = await fetch("/api/submissions", {
    method: "GET",
  })
  if (!response.ok) {
    throw new Error(response.statusText)
  }
  return await response.json();
}

export default withPageAuthRequired(function Submissions() {
  const dispatch = useAppDispatch();
  const [submissionForm, setSubmissionForm] = useState<submissionType>({
    artistName: "",
    artistEmail: "",
    songName: "",
    songUrl: "",
    socialUrl: "",
  })
  const submissions = useAppSelector(state => state.songProcessReducer.submissions)

  useEffect(() => {
    getSubmissions().then(resp => {
      console.log(resp)
      dispatch(setSubmissions(resp))
    })
  }, [])

  const handleFormChange = (e: any) => {
    e.preventDefault()
    const { name, value } = e.target;
    setSubmissionForm(prevState => ({ ...prevState, [name]: value }));
  
  }

  const handleFormClick = () => {

    try {
      let isFormEmpty = false
      Object.keys(submissionForm).forEach((key) => {
        if (submissionForm[key as keyof submissionType] === "") {
          isFormEmpty = true;
        }
      })
      if (!isFormEmpty) {
        const date = new Date();
        const tempSubmissionForm: submissionType = {
          ...submissionForm,
          creationTime: date.toUTCString()
        }
        saveSubmission(tempSubmissionForm).then(resp => {
          console.log(resp)
          dispatch(addSubmission(resp))
          setSubmissionForm({
            artistName: "",
            artistEmail: "",
            songName: "",
            songUrl: "",
            socialUrl: "",
          })
        })
      }
      else {
        alert("Please fill out all fields to add the submission")
      }
      
    }
    catch (e) {
      console.error("error", e)
    }
  }

  return (
    <div>
      <div className="mb-4 text-lg font-bold">Submissions</div>
      <div className="mb-2">Add Submission</div>
      <div className="grid gap-4 grid-cols-2 grid-rows-3 mb-4">
        <div className="w-full">
...
...
</div>
    </div>
  )
})

服务端API代码（app/api/submissions/route.ts） #

import { getAccessToken, withApiAuthRequired } from "@auth0/nextjs-auth0";
import { PrismaClient } from "@prisma/client";
import { NextResponse } from "next/server";

const prisma = new PrismaClient();

const POST = withApiAuthRequired(async (req: Request) => {
  try {
    const submissionData = await req.json()
    const savedSubmission = await prisma.submission.create({
      data: submissionData
    })
    return NextResponse.json(savedSubmission, {status: 201});
  }
  catch (e: any) {
    return NextResponse.json({error: "There hast been an Error!", message: e.message}, {status: 500})
  }
});

const GET = withApiAuthRequired(async (req: Request) => {
  try {
    const submission = await prisma.submission.findMany();
    return NextResponse.json(submission, {status: 200});
  }
  catch (e: any) {
    return NextResponse.json({error: "There hast been an Error!", message: e.message}, {status: 500})
  }
});

export {
  POST,
  GET
}

内容的提问来源于stack exchange，提问作者Felix Kniest