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 00:56 - Current code setup, using Next.js App router and fetching initial data on the server 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 09:00 - We have access to the search parameters from our `page.tsx` server component 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