Next.js应用部署至Vercel后刷新随机数不更新问题求助

我开发了一个类游戏的试用网站，使用Math.floor(Math.random()*9)生成0-9的随机整数，作为长度为10的数组索引。本地通过npm run dev运行时一切正常，但部署到Vercel后，无论刷新多少次页面，生成的随机数始终相同。

页面代码如下：

import Card from "@/components/card";
import Button from "@/components/button"
import { promises as fs } from 'fs';

export default async function Home() {
  const file = await fs.readFile(process.cwd() + '/src/data/questions.json', 'utf8');
  const data = JSON.parse(file);
  return (
    <div>
      <div className="grid grid-row-[20px_1fr_20px] justify-items-center min-h-screen p-8 pb-20 gap-5 sm:p-20 font-[family-name:var(--font-geist-sans)]">
      <Card category='Dare' question={data.Dare[Math.floor(Math.random()*9)]} />
      <Button />
      </div>
    </div>
  )
}

我查阅了类似问题但没弄明白原因，希望能得到相关排查思路，实现每次刷新页面显示不同内容的需求。

内容的提问来源于stack exchange，提问作者Ellie K