I have a common header component in the layout of a site. The header should display a title set by the pages in various routes down through the site.

The ONLY way I've found to do this is to refetch the data in the header or "title" component based on reading the page path. And that is not reliable. Both the pages and the header are pulling their data from postgres via Prisma, and I could use the react "cache" function but there isn't a great way to invalidate it that I know of.

I hacked it calling an internal api, fetch() and used "revalidateTag" but that seemed to cause random re-renders and since the API call was server to server there were no client cookies available.

This takes me to my question - is there any pattern for having server components that are used in the layout files react to something set the page? Somewhat like a contenext in react? Or is the only option client components at this time?

I guess I could set the header on each page but there are other items in the header like the menu I don't want to refetch or render.

This seems like it would be an extremely common use case, I just can't find a good solution or documentation.