yes, you can have the search in a clientside state like useState or anything similar. And then, whenever this value changes, make a request to your server and ask for the search results for that specific term

My understanding is that the search results would have to be a client component; no?

well, you input field for the client would be clientside. And yes, the request to the server come from the client

Okay so I have a client side component that now looks like

"use client"

import {useState} from "react";

export default function RepairCentreSearch() {
    let [search, setSearch] = useState('');

    return (

        <>
            <fieldset className="offset-sm-3 col-sm-6 mb-3">
                <label className="form-label mb-1" htmlFor="repairCentreSearch">Repair Centre Name</label>
                <input
                    onChange={(e) => setSearch(e.target.value)}

a serverside component that looks like

export default async function RepairCentreSearch({search}: {search: string}) {

    let repairCentres: RepairCentreDto[] = [];

    let res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/GetRepairCentres?search=${search}`);
    repairCentres = await res.json();

    return (
        <>
            <div className="col-12">
                <div className="table-responsive">
                    {repairCentres.length > 0 &&
                        <table className="table table-sm lh-md">
                            <thead>
                            <tr>
                                <th>Name</th>
                            </tr>
                            </thead>
                            <tbody>
                            {repairCentres.map((repairCentre: RepairCentreDto) => (
                                <tr key={repairCentre.repairCentreId}>

and a server-side parent component

how do I tie these together?

you can directly route to the correct url (with search term) from your client component router.push("/.../...?search=yoursearch). Then the server reads that request and displays the results

Does that require changing the browser's URL?

yes. If you don't want to change the url, do this: https://nextjs-forum.com/post/1264978949163716658#message-1264982568521039993

that points back to this question

which? There are multiple ways:
1. Request from client to server (no change of url): https://nextjs-forum.com/post/1264978949163716658#message-1264982568521039993
2. Redirect from client (change of url): https://nextjs-forum.com/post/1264978949163716658#message-1265016971452481631
3. What are you missing?

all the links you're posting are to this question

yes and they link to specific messages, that may serve as solution

Ah. I see. The first answer, I tried that and posted code. I just don't know how to wire the two together.

Nothing I do seems to work. It keeps complaining one or the other is a server or a client

take a look at this code example: https://gist.github.com/B33fb0n3/de6c646699603ff9991831fa29791a86

The only things, that you need to look at are the command that start with important.

You can see, that I have one state (for the search), one server action to query the data (maybe you want to use an api route) and one input field, to actually search.

As you can see, the component is fully clientside handled

Can I see the signature and 'use server' in your searchMerchant?

Can I see the signature

wdym?

It's the searchMerchant part that I need to execute on the server

I think that may have been the missing information I need.

got it

The rest of your answers had already lead me to that, plus a colleague showd how to pass the function as a prop and I was trying to figure out how to simplify that, and had arrived at the right answer, I just needed to reboot my computer because my JavaScript debugger was eating it.

Thank you!

Thank you thank you.

Happy to help