NextJS Server Component aktualisiert API-Daten nicht?
Hey Leute,
ich bin relativ neu in NextJS (nutze den AppRouter) und habe aktuell folgendes Problem:
Überblick:
Ich habe ein Server Component, welches eine Liste von Items darstellen soll, diese Items weden mit axios von einem externen Backend geladen.
Zudem habe ich noch ein Formular (auf einer anderen Seite), mit welchem ich neue Items hinzufügen kann.
Problem:
Wenn ich ein neues Item hinzufügen (egal ob über das Formular oder direkt in der Datenbank) und dann auf die Seite mit der Liste navigiere (oder umgeleitet werde), sehe ich die neuen Items nicht.
Ich muss zuerst einen vollständigen Reload über den Browser durchführen, damit die neuen Daten aus dem Backend geladen werden.
Meine Frage:
Bin ich zu doof das Server Component korrekt zu benutzen oder ist es einfach falsch, für ein solches Szenario Server Components zu nutzen und ich sollte einfach Client Components nutzen.
Relevanter Code:
const client = axios.create({
baseURL: "http://localhost:9999"
})
async function getItems(): Promise<Item[]> {
return client.get("/items")
.then(response => response.data.items)
.catch(error => {
console.log(error);
});
}
const ItemsList: FC = async () => {
const items = await getItems();
return (
<>
// rendering list
</>
);
};
export default ItemsList;
Mfg Jannick (L1nd)
