I have a problem.

I need to create a store page with a filter.
The main issue is that catalog page with products should stay SSR.
I get all products in the category from the server. Render all products without filters for CEO purposes.

After that, I use cashed data to filter products and show it to clients.

Here is a simple draft of the app example that I am trying to build.

I tried to create two catalog components:

1. Server component with all products that will be shown to the user first without any interactions.
2. Client catalog component with cashed data where the client can filter anything.

Now the problem is that I can’t find a way how to deliver client interaction up to the catalogPage and switch between server and client catalogs. (localStorage requires useEffect hook that will convert all my components to client components, useSearchParams has some issues)

Suppose you have any other ideas on how to solve this problem. Please share with me.