Me pregunto por qué los datos no se actualizan mientras realizo una solicitud de ELIMINACIÓN. ¿Debo cambiar getServerSideProps a getStaticProps o hay otra forma de resolver este problema? Además no quiero recargar la página :)
const Component = ({ data }) => { return ( <div> {data.map((el) => { return ( <React.Fragment key={el._id}> <span>{el.visitorDate}</span> <span>{el.visitorName}</span> <span>{el.visitorFamilyName}</span> <div> <button onClick={async () => { const res = await fetch( `http://localhost:4000/api/visitorData/${el._id}`, { method: "DELETE", headers: { "Content-Type": "application/json", }, } ); }} > DELETE </button> </div> </React.Fragment> ); })} </div> ); }; export default Component; export async function getServerSideProps(context) { const res = await fetch("http://localhost:4000/api/visitorData/"); const data = await res.json(); return { props: { data }, }; }Si algo no está claro, házmelo saber :)
Tienes que actualizar los datos después de la solicitud DELETE para ver tus cambios.
O maneje esto manualmente en onClick , o agregue router.refresh() después de fetch .