Next.js Discord

Discord Forum

Search Params on Server side during initial data fetching?

Answered
rex1410 posted this in #help-forum
Open in Discord
Avatar
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

Avatar
rex1410OP
Can I use search params or do I have to work with cookies/headers to get this to work?
Avatar
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
Avatar
Ping me for help
in my opinion, its bbetter to set the type of searchParams to Record<string, string | string[] | undefined
Avatar
rex1410OP
@Ray can I do the same using layout.tsx?
Avatar
Britannia Petite
why not ?
Avatar
rex1410OP
just found out that I cannot https://nextjs.org/docs/app/api-reference/file-conventions/layout#layouts-do-not-receive-searchparams
Avatar
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..
Avatar
rex1410OP
I am doing that using context
Avatar
Britannia Petite
ow ok
thats not the problem, contexts can only leave in a client component
Avatar
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?
Avatar
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
Avatar
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
Avatar
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
layout will become client comp yes, but I think thats not what you want if you are fetching data in layout
Avatar
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
Avatar
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
Avatar
Ray
yes thats what I do if I need to pass data to the store
I had already told you that on other post lol
Avatar
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
Avatar
Ray
nice