Perché useEffect non aggiorna i dati dopo una modifica con Mongoose in Next.js?

👤 Iniziato da @templepellegrini36
📅 16/02/2026 16:02
📁 Tecnologia 🌐 IT
Avatar di templepellegrini36
Salve a tutti, ho un problema strano con Next.js 15 e Mongoose che mi blocca da due giorni. Sto sviluppando un piccolo CMS per blog dove gli admin possono modificare articoli. Quando aggiorno un post tramite un form (uso mongooseModel.save()), il database MongoDB si aggiorna correttamente, ma la pagina che elenca tutti i post non riflette i cambiamenti senza un refresh manuale. Ho cercato nella documentazione di React 19 e Mongoose 8, e ho provato a inserire vari dipendenze nell'hook useEffect senza successo.

Ecco il codice della pagina:
```javascript
useEffect(() => {
const fetchPosts = async () => {
const res = await fetch('/api/posts');
const data = await res.json();
setPosts(data);
};
fetchPosts();
}, []); // Ho provato anche [posts] ma causa loop infinito
```
Strano che la chiamata API /api/posts restituisca dati vecchi finché non refresho. Traitsito Next.js 15.0.3 e React 19.2.1. Qualcuno ha affrontato questo comportamento? Suggerimenti su come forzare il reload dei dati correttamente?
Avatar di kennedyfabbri79
L'hai descritto bene il problema, e mi sembra un classico caso di caching lato server. In Next.js, se l'endpoint `/api/posts` usa `getStaticProps` o non ha headers che disabilitano la cache, il browser potrebbe ricevere una risposta obsoleta anche dopo l'update. Hai verificato cosa succede facendo un fetch con un parametro cache-buster tipo `?t=${Date.now()}`? Non è elegante ma ti conferma se è un problema di cache.

Più importante: quando invii il form di modifica, dopo il `mongooseModel.save()` dovresti **richiamare esplicitamente `fetchPosts()`** per aggiornare i dati. Metti la funzione `fetchPosts` in un `useCallback` e passala al componente figlio (il form) come callback su submit. Così, al termine dell'update, non aspetti che `useEffect` si accorga del cambiamento (che non succede mai senza dipendenze corrette), ma forzi un refresh manuale.

Per evitare loop infiniti, non mettere `posts` nel dependency array: usa un booleano tipo `isUpdated` come dipendenza, resettandolo dopo il fetch.

Ah, e se non lo hai già fatto, configura l'API route con `revalidate: 0` o headers `Cache-Control: no-cache`. Altrimenti anche un refresh manuale potrebbe non bastare.
Avatar di templepellegrini36
Grazie mille @kennedyfabbri79, hai centrato proprio i punti critici! Ho provato il cache-buster e... sì, è proprio caching lato server. Aggiornerò subito l'API con `revalidate: 0` e gli headers `Cache-Control`.

Ottimo suggerimento sul richiamo manuale di `fetchPosts` dopo il salvataggio! Implementerò il `useCallback` nel componente padre e passerò la funzione di refresh al form come submit callback, usando un booleano per evitare loop.

Le tue dritte mi hanno chiarito la logica dietro l'aggiornamento stato - era esattamente il pezzo mancante. Proverò tutto subito e aggiorno il thread se serve, ma credo di aver capito.

La Tua Risposta

💬

Vuoi partecipare alla discussione?

Accedi o registrati per scrivere la tua risposta e unirti alla conversazione!