Filtering with React Server Components, URL Search Params, Server Actions

Traditionally, when you wanted to filter your data using React, you would first store the original data in local state, with the `useState` hook.

There would be a `useEffect` that watches for any filter changes, and then you would re-fetch the data using the applied filters on the client.

Once you get back the filtered data, you update the `useState` and the list re-renders, showing only the filtered results.

With the rise of React Server Components, fetching data happens more and more on the server instead of the client. How can you add filters on the client, but still re-fetch and display the filtered data on the server? Using URL Search Parameters!

Key Takeaways:

00:00 - Intro into the project
02:20 - Traditional filtering using useState and client side data fetching
03:14 - Server Actions allow for the filters to be inside a form element, with the action property
04:01 - Seeing the checkbox filters showing up inside of the server action's function
04:33 - Using search query parameters, we can re-fetch our filtered data on the server
05:49 - Constructing the URL search parameters with server actions
11:00 - Use the search params to filter our data on the initial server page load
11:52 - Demo of the search params working with React server components
12:37 - Make our checkboxes aware of the URL search params, and have them checked by default if the value is in the url

[aleksandrkobelev]

Great video, but github with the code would be a big help