Next.js Discord

Discord Forum

Search Params on Server side during initial data fetching?

Answered
rex1410 posted this in #help-forum
Open in Discord
rex1410OP
I need the search parameters from the URL to do the initial data fetching on server side when the URL is hit. Is there any way to get them on server side?

My exact scenario is something like this:
The user opens the URL of my page with some search params, and on server side, the search params are used to init the Zustand state.
Answered by Ray
you can get it from the props on the page component
export default function Page({
  params,
  searchParams,
}: {
  params: { slug: string }
  searchParams: { [key: string]: string | string[] | undefined }
}) {
  return <h1>My Page</h1>
}
View full answer

34 Replies

rex1410OP
Can I use search params or do I have to work with cookies/headers to get this to work?
@rex1410 I need the search parameters from the URL to do the initial data fetching on server side when the URL is hit. Is there any way to get them on server side? My exact scenario is something like this: The user opens the URL of my page with some search params, and on server side, the search params are used to init the Zustand state.
Ray
you can get it from the props on the page component
export default function Page({
  params,
  searchParams,
}: {
  params: { slug: string }
  searchParams: { [key: string]: string | string[] | undefined }
}) {
  return <h1>My Page</h1>
}
Answer
Anay-208 | Ping in replies
in my opinion, its bbetter to set the type of searchParams to Record<string, string | string[] | undefined
rex1410OP
@Ray can I do the same using layout.tsx?
@rex1410 <@743561772069421169> can I do the same using layout.tsx?
Britannia Petite
why not ?
Britannia Petite
just bear in mind that you won't be able to use zustand server side so you have to pass your server data to a client component at some point..
@rex1410 I am doing that using context
Britannia Petite
thats not the problem, contexts can only leave in a client component
@Britannia Petite thats not the problem, contexts can only leave in a client component
rex1410OP
Oh wait, that's right, so even with contexts my data fetching and setting into zustand state would happen on client side
so I am guessing the right way is:

fetch data on server side in an async function -> pass it down to the context -> Put it in zustand to use it throughout the app
is that correct?
Britannia Petite
What im doing, in your root layout, create a <Providers> children </Providers> component which will be client side (use client). so you can pass data from server side (from root layout) to your Providers and in your providers you can put zustand or whatever context
//root layout
//...
return (
 return (
        <html lang={locale}}>
            <body suppressHydrationWarning={false} className="h-full w-full">
                <Providers>
                    {children}
                </Providers>
            </body>
        </html>
    );
)
you can pass data to your Providers component via props
ans store them in zustand for example (thats what im doing, using zustand too)
but if you can go without zustand its even better, depending on your needs
rex1410OP
just to confirm, if I do "use client" in layout.tsx, where exactly do I put the function for data fetching? I am still new to RSC but from what I understood, in this way layout.tsx becomes a client component right
Britannia Petite
if you are using zustand to store global app settings, thats fine. but if you are using zustand to store fetched data I think you misunderstood something in the usage of next.js
rex1410OP
yes
ok wait
lemme explain the current working of the app
so my webapp has 2 fields in URL search params that come in from another web app (we have 2 webapps but the first one only opens the 2nd with specific params).

Now in the current webapp there is firestore db which has the data of the user, and that needs to be fetched and kept in state. When user edits some data that DB will get updated along with the state.
so when the user comes back to this app the 2nd day, they can see all their changes as what they did yesterday when they open the app
rex1410OP
@Britannia Petite @Ray I figured it out.

The function for fetching data from firestore, runs on page.tsx which is a server component. The data is sent as a prop to the context provider which initialises the zustand global state.
I just noticed in zustand docs, that the page.tsx or layout.tsx whichever has used the provider and passes props to it does not have to be client component, and since its a SC, I can fetch the data
please, lmk if you find any mistake in my approach which might cause an error that any of you have faced
I had already told you that on other post lol
@Ray I had already told you that on other post lol
rex1410OP
Yeah I knew that but still took me a while to get my head around that from other blog of NextJS, Idk why I got confused, now that my app works without errors it turns out it was pretty straightforward
anyway, thanks a lot for the help