I have two parallel routes, one being a server component that displays a list of things and the other being a client component that adds a thing to the list. The server component does a sql (mysql2) query to get the list and similarly, the client component does a sql query to add to the list.
I am wondering how can I make the server component's list update after the client component adds to it. I'd like to know how to update the server component's list without doing another db query, as the query from the client component returns the new thing that was added to the list; I just want to use that result to update the server component's list.
I am open to using a state management library such as jotai, but I am not sure how this works within server components as hooks can't be used; I want to avoid prop drilling.
Think of Server Components like any templating engine such as Blade, EJS, and Twig. They get transformed to plain HTML files when there is a request and sent to the browser. Like the other templating engines, to update them, you need to refresh the page, hence in your case, call the DB.
If you need a different behavior (such as updating the component on the client), you should be using a client component, aka the "use client". And you shouldn't try to fight this idea, as Lee Robinson from Vercel says:
Client Components aren't a de-opt, nor a cop-out. You can think of Server Components as an additive to the existing model. I understand the sentiment of wanting to use Server Components for lots of things (not bad!) but it's also totally okay to use Client Components for certain things.
Also, even a client component first renders on the server with Next.js to improve the page initial load.