Hello 👋

This is usually something I'd do with state, hook, or context, but these solutions seem to want to send me down the client-side route. I think I need to use Server Actions but I can't quite wrap my head around it...

Below is a super basic reproduction, pretty much exactly what I'm working with... My getArtists request is a single request that returns everything in one go. All of the transformations will be done on my side with no further requests.

Assuming getArtists return a huge json dump of Artists. How do I then filter by genre?

async function getArtists(param) {
  const res = await fetch(
    `https://my-api.com/${param}`
  );
  return res.json();
}

export default async function Page({ params: { param } }) {
  const artists = await getArtists(param);

  async function filterByGenre(genre) {
    "use server";

    const filteredArtists = artists.filter((artist) => artist.genre === genre);
    // how do I update my artist data to be reflected in the UI?
  }

  return (
    <div>
      <button onClick={() => filterByGenre("musicals")}>Filter By Musicals</button>
      {artists.map(artist => artist....)}
    </div>
  );
}

Any help would be very much appreciated!