I have statically generated blog main page that needs filtering functionality. It renders only filter UI and list of cards (title, picture, link)
All initial data is known at build time (and will not change any time soon), so there is no need make dynamic generation and thus extra requests to server.
Structure of page:

- page (server) - loads all data for all posts at build time, sends trimmed data (e.g. removing content of posts) to wrapper
- - wrapper (client) - reads url search params and filters posts accordingly
- - - filter (client) - handles UI of filter, updates url search params according to user input
- - - card grid - displays list of cards for filtered posts

I tried 2 different approaches.
1. Client components for cards and normal react conditional rendering. Filter initial array of posts and map over it. This approach has some issues:
need to manually remove excess from initial data when passing from server to client, only keeping props that are actually used
need to deal with type narrowing, which is even more tedious and time wasting task
2. Server components for cards and apply css styles to toggle visibility of filtered cards. It solves issue of trimming data and narrowing types (server component makes its own fetch request for full data and works with it), but instead it creates issue for initial state of cards grid on first navigation to page, before react spins up and executes filter code. It either flashes (if all cards are displayed initially) or pops up (if all cards are hidden initially), and neither is good user experience.

So what strategy can I apply here to make good user experience and not overcomplicate developer experience?