Next.js Discord

Discord Forum

Show Result of Search in home page

Unanswered
Banjara Hound posted this in #help-forum
Open in Discord
Banjara HoundOP
i have something like this. in root layout
<Search />
{children}

then inside page i have like this.
<ResultOfSearch />

since i want root layout be server side i don't want convert it to client side and pass state in root layout to ResultOfSearch.
and don't want create new url for show the result. some thing like localhost:3000/?search=something. so i can use params to get result in home page or any other page.
so i want to know is that possible to send data from Search to ResultOfSearch. i use Server Actions and useFormState to get Data
if it's not possible i know how to do that by combining Search with ResultOfSearch. but since Search is inside navbar i don't want change search position. and move it to main page,

6 Replies

Noronha
I use a search like feature with server-actions on a table component. I was just like you: didnt want the convert my page to client-side because I wanted to use server action and use the benefits of await serverAction(query)

So I've done this with query params. The client component (the table) changes the URL with the query, and the page reloads on the server.

With all that said, I'm not sure I understood, can your Page.tsx make the server action call and pass the data to <ResultOfSearch /> ?

 
type ClientPageProps = {
  searchParams?: {
    q: string
    page: string
    sortField?: string
    sortDirection?: 'asc' | 'desc'
  }
}

// This would be your dashboar
export default async function ClientPage ({ searchParams }: ClientPageProps) {

  // This would be your server-action
  const response = await list(page, query, sort)
   // other stuff


  return (
    // This would be your <SearchResults />
    <ClientTable
      canDelete={canDelete}
      total={response?.data?.total}
      rows={response?.data?.data}
    />
   )
}



Let me know if this helps.
Banjara HoundOP
thanks. but i know how to do this. with changing url and show result. or combine search with result of search. to show result.
i think it's not possible for what i want.
just to know that. server actions are any function that run on server or just function that has FormData and PrevState?
Noronha
I think server actions are any functions (marked with 'use server') that you can call freely on server components. On client components, you can import and call an server action to save/update/delete records...

But, as far as I know (I might be wrong), you cant use them to fetch data on client components, because you'd need to use async... And client components cant be async. That's why I used URL params for querying/filtering/sorting.

I would appreciate if any one with more experience than me could give us some feedback. Let's wait.
Banjara HoundOP
thanks.
Banjara HoundOP
i found this. 
Server Actions can only be defined within Server Components and must have the “use server” directive at the beginning of the function body. Client Components only have the capability to invoke or call Server Actions.
Banjara HoundOP
just for anyone who want use server action inside client component. you just need useTransition hook for this. go to react doc and read about it.