for your case you can create a parent component, that passes the data to the child component (that renders the data). Your parent also contains the searchbar and the state for the search and the data that you are fetching. Fetch it like you want to fetch it. You can use third party libraries or a basic fetch or a fetch of your choice with debounce or or or

But I would like to implement this on the server side. How is it possible to achieve what you mentioned without using states in the parent component, but still have a loading state in the search component, etc.? This is why I thought of using server actions because I can use a loading state with them, but I don't know how to link the server action and the data render component together. I want to submit the form to the server, and the data or the fetch should be sent back to the other component. All this while only the search bar component remains client-side.

what you also can do is to fetch the data only serverside and get the query (search) through your searchParams (url). Like that you can apply the searchParams via your clientside component (search), but also fetch everything serverside. For the loading animation of the items, just put the component, that fetches your data (child) inside a suspsense boundary. It will be triggert until the loading is done

Yes, exactly, I am currently storing it in the URL, and until the parameters exist, I don't fetch the data. With URL router.replace, I assume the server component runs again because it fetches the data. This is what I have managed to achieve so far. The suspense is a good idea, but unfortunately, it doesn't work, it only works on the first load for me. After I click the search button again, Next.js does not use suspense for some reason. Any other ideas?

can you give me an reproduction repo? For example through jsfiddle or https://codesandbox.io/ ?

Of course, a moment please

Here is the code

I will have a look 👍

Thank you in advance!

Thank you, your are genius! How exactly work this? I am asking because if I want to use React Hook Form, for example, because I would add a search input that is required, do I need to use it this way as well? If so, then I will try to implement the trigger option within the onSubmit.

I don't know what the handleSubmit from useForm does and why it holds back the onSubmit function... I think you can still use the hook, but need to find a way to handle the onSubmit differently

Ok, thank you so much!

sure thing. Please mark solution

@B33fb0n3 @Mackenzie River Husky I'm facing the exact same issue, would it be possible to share the final code snippet ? also curious of seeing if it follows the methodology of this faq post https://nextjs-faq.com/sharing-client-side-state-with-server-components that I saw on another question

I don't have the code anymore. If you facingthe same issue you can do what's the solution message says to resolve this issue for you as well 👍

ok thanks I'll try to apply it 🙂