Hey Guys, I'm new to NextJS, therefore I think and hope that this question is relatively simple to answer.

Overview:
I'm using the AppRouter.
I have a Server Component which should display a list of clubs, these club items are fetched with axios from an external backend.
In addition, I have a form (on a different page) where I can add new clubs.

My Problem:
When I add a new club (via my form or directly in the database) and navigate (or get redirected) to the list component, I don't see the newly created club in the list. I have to perform a full reload via the browser until I see the new club.

What I think the problem is:
I think the problem is, that the list component is only rendered once by NextJS on the server side and that the GET request from axios is only re-executed if i perform a full reload via the browser.

My question:
Do I something wrong or miss some kind of configuration or is it simply wrong to use a Server Component in this situation and I should rather use a Client Component for this use case?

Relevant Code:

const client = axios.create({
    baseURL: "http://localhost:9999"
})

async function getClubs(): Promise<Club[]> {
    return client.get("/clubs")
        .then(response => response.data.clubs)
        .catch(error => {
            console.log(error);
        });
}

const ClubsList: FC = async () => {
    const clubs = await getClubs();

    return (
        <>
            // rendering list
        </>
    );
};

export default ClubsList;

Hope you can help me :)