Hello, thanks for everyone who will try to help me !
So my question is the following : how to update the UI based on the user input.
Let's say I have a list of product that I want to be fetched (using an orm) on the server. I then want it to be displayed. For now I can stay with basic server component.

export default async function page() {
  const products = await db.products.findMany();
  return <ul>
              {products.map(product => {
                  return <li key={product.id}>{product.name}</li>
          </ul>
}

But now, i want the user to be able to filter that list (& to sort it). So I need to update my products variable according to the user interactivity. I'm not sure how to do this.
It now looks like that but I don't know how to complete it

export default async function page() {
  const products = await db.products.findMany();
  return <ul>
              <SomeFilteRingClientComponent />
              {products.map(product => {
                  return <li key={product.id}>{product.name}</li>
          </ul>
}