Inserto datos en una colección mongoDB usando este endpoint insert.js

 import clientPromise from "../../../lib/mongodb"; export default async (req, res) => { if (req.body["collection"] != null) { const client = await clientPromise const db = client.db("myDatabase"); const result = await db.collection("collection").insertOne({ value: parseInt(req.body["collection"]), createdAt: new Date(), }); res.status(201).json({time: result}); } else{ res.status(400).json({}); } }

Esta es la página donde muestro el último valor en la colección index.js

 import { useState, useEffect } from "react"; export default function Home() { const [lastRec, setLastRec] = useState(0) useEffect(() => { getRecords() }, []) async function getRecords() { const res = await fetch('api/record'); const { data } = await res.json(); setLastRec(data[0]["value"]) } return ( <div className="container"> <div> Last Record = {lastRec} </div> </div> ) }

¿Cómo puedo hacer que mi componente de reacción sepa cuándo se usó ese punto final para que pueda volver a renderizarse, sin necesidad de hacer clic en un botón, actualizar la página o configurar un temporizador?