How do I change this so that way it gets the latest data maybe every 60 seconds or every time page reloads instead of at build time?


import React from "react";
import { PrismaClient } from "@prisma/client";
import Link from "next/link";

interface Article {
id: number;
headline: string;
}

const prisma = new PrismaClient();

async function getArticles(): Promise<Article[]> {
const articles = (await prisma.article.findMany({
take: 100,
orderBy: { id: "desc" },
})) as Article[];

return articles;
}

const convertIdMultiplier = (id: number): number => {
const multiplierString = process.env.DATABASE_ID_MULTIPLIER;
if (multiplierString) {
return id * parseInt(multiplierString, 10);
} else {
throw new Error("Error");
}
};

function convertToSlug(text: string): string {
return text
.toLowerCase()
.replace(/[^\w ]+/g, "")
.replace(/ +/g, "-");
}

export default async function Articles() {
const articles = (await getArticles()) as Article[];

return (
<div className="max-w-screen-lg mx-auto px-4 pb-0 pt-6">
<h1 className="text-2xl font-semibold mb-7">Articles</h1>
{articles.map((article) => (
<div className="mb-2" key={article.id}>
<Link
href={
"/article/" +
convertIdMultiplier(article.id) +
"/" +
convertToSlug(article.headline)
}
>
{article.headline}
</Link>
</div>
))}
</div>
);
}