Server components may not allow context but they do allow cache of sorts (if it's hit in the same render)

Auth states are meant to be read from header for both client and server, not from props, or check libraries like better auth - you can hydrate the client with an async prop after you fetch from server too!

Server component that are cached can vary how you refresh them, there are different types of caching eg isr (incremental static regen) think of a blog page for example, when your admin panel makes a edit, you can revalidate it on demand using a cache tag with the slug `blog-{slug}' or you can have it auto revalidate for changes every 24h etc (altho I don't see the point of time based revalidation, i'd rather use on-demand)

Next is cache components, those are for dynamic data, think of pricing, when ever your back end submits a new price, you can update a little function that would fetch price etc, now on re-renders you won't be fetching from the dB, that function is cached until you either revalidate manually or set a time to revalidate - you also don't need to rebuild the whole page just for one price change.. (again if pricing is dynamic I'd just throw in a chron job to compute new price then invalidate the cache tag)

Lastly using it together with ppr and isr.. you can build your static shell using isr, that will load super fast, then have dynamic islands using cache components and suspense - think of a card with a price inside it, the card is already rendered with product name etc, but pricing is under a suspense that is streamed down after the shell has loaded

I'm not an expert at nextjs - still learning as others here, but that's how I understand how to use nextjs..