Passing searchQuery to a Server Component
Answered
jayan110105 posted this in #help-forum
I'm working on a Next.js app where notes/page is a server component and NotesList.tsx is also a server component that fetches user notes from the database.
I want SearchFilters.tsx (a client component) to update a searchQuery, which should then filter the notes in NotesList.tsx. Since NotesList is a server component, I can't pass state directly from SearchFilters.
Github: https://github.com/jayan110105/neura
What’s the best way to pass searchQuery while keeping NotesList as a server component?
I want SearchFilters.tsx (a client component) to update a searchQuery, which should then filter the notes in NotesList.tsx. Since NotesList is a server component, I can't pass state directly from SearchFilters.
Github: https://github.com/jayan110105/neura
What’s the best way to pass searchQuery while keeping NotesList as a server component?
Answered by luis_llanes
Read searchParams from the page props and then await it when reading its values.
This will keep your components Server Components, but they will now be dynamic since they now depend on request time data (searchParams)
This will keep your components Server Components, but they will now be dynamic since they now depend on request time data (searchParams)
12 Replies
Read searchParams from the page props and then await it when reading its values.
This will keep your components Server Components, but they will now be dynamic since they now depend on request time data (searchParams)
This will keep your components Server Components, but they will now be dynamic since they now depend on request time data (searchParams)
Answer
I understand that using searchParams allows me to keep NotesList.tsx as a server component while making it dynamic based on request-time data. Are there any other ways to pass searchQuery from a client component (SearchFilters.tsx) to a server component (NotesList.tsx) while keeping NotesList as a server component?
You’re wanting a kind of context and that does not exist in the server side
The way to work with Server Conponents is by thinking each Server rendered page is a snapshot of state (edit: server state and request-time data), it won’t change unless you generate another page or you make use of embedded client components that keep their internal state
Got it! Thanks for the explanation!
So, since server components are just snapshots of state, and there’s no real concept of "context" on the server, Given that I also want to implement sorting along with filtering, would it be better to convert NotesList.tsx into a client component instead?
So, since server components are just snapshots of state, and there’s no real concept of "context" on the server, Given that I also want to implement sorting along with filtering, would it be better to convert NotesList.tsx into a client component instead?
I should have changed the phrasing a little tho, since Client components are basically a snapshot of state too, my bad🤦🏼♂️
Would be something like this: server components are a snapshot of server state and request-time data
Would be something like this: server components are a snapshot of server state and request-time data
Yes definitely it’s better to keep interactivity in the client, React has all that solved already. Compose however makes sense to, and don’t think client component are bad now that we have Server Components
Thanks for the help
I only recently got introduced to Server Components, so I was trying to use them as much as possible
I only recently got introduced to Server Components, so I was trying to use them as much as possible
Yea do that when you can be ahead and fetch either to render data or pass data down to children components without you having to use an effect (or client libraries) to fetch and initialize your state
But for things like Filtering or Sorting accordingly to user interaction you can’t do that ahead of time on the server, you need to be in the client boundary
TLDR; Compose, that’s the power of React
@jayan110105 Thanks for the help
I only recently got introduced to Server Components, so I was trying to use them as much as possible
Btw if the issue was solved mark a solution (Right click on the message > Apps > Mark solution)