Updating in real-time

With the announcement of next 14 server actions becoming stable I would like to implement them. Currently I'm using app router api.

I have two components in my project that update without a page reload when the user uploads a file. The way I'm currently doing this is making these two components client side and react context. Initially the state inside of these client components takes in prop data passed from server side. When a user uploads a file which new data is inserted into my database. My components state is changed via context which reflects the recently uploaded file's data. At this point both components re-render properly. It all works.

I feel though I'm not utilizing next properly. I feel there is a way where I can have these two components both be server side and have them render updated data without a page refresh? This cache thing is tricky and I feel I'm missing something?

My question is can I edit my two client side components into server side components, use a server action inside of my form where the upload file occurs, revalidatePath() and that will update my two components smoothly?

I will be playing with this regardless but I'd like to hear from others. My two components display current standings for a league and a scoreboard ticker which displays recent games played. These are what get updated when a file is uploaded.

Here's a link to this project: NHL95