Next.js 中的获取速度很慢

Question

我正在使用与 Airtables 连接的 Next.js 来进行爱好项目。 我的项目是关于使用关键字搜索歌曲。 输入后，您应该会看到列出的所有歌曲，其中歌词包含键入的关键字。 我关注了 Next.js 文档和 Airtables，每当我按关键字或所有歌曲获取歌曲时，确实感觉它正在缓慢获取，尤其是第一次。

我没有使用 Next 的 fetch api，每个获取机制只使用 getServerSideProps。 比如这个：

export async function getServerSideProps(context) {
const
    keyword = context.params.query,
    capitalized = keyword.charAt(0).toUpperCase() + keyword.slice(1),
    lowerCased = keyword.toLowerCase();

const
    records = await base('Song').select({
        filterByFormula: `OR(
    SEARCH('${capitalized}',{Lyrics}),
    SEARCH('${lowerCased}',{Lyrics}))`
    }).firstPage(),
    songs = format(records);

return {
    props: {
        songs: songs,
    }
}

}

您可以在此 Gitlab 存储库中看到该项目： https://gitlab.com/1chbinimin/songseeker

这是现场版： https://songseeker.vercel.app/

您可以尝试单击顶部导航中的“所有歌曲”，然后在起始页的字段中输入某个关键字，您会发现它的运行速度比预期的要慢。 但是，主页加载速度很快。

它与 Vercel 一起部署，通过上面链接的 Gitlab 存储库连接。 在部署期间，执行了“npm run build”，我填充了必要的环境变量以与 Airtables 连接。

我应该怎么做才能使获取请求更快？ 还是使用 Vercel 的费用等级的限制之一？ 或者可能与 Next.js 在幕后使用无服务器功能有关？