Next.js Discord

Discord Forum

How to get query from a url in the server

Answered
Redbone Coonhound posted this in #help-forum
Open in Discord
Redbone CoonhoundOP
I'm trying to understand how to properly work with queries and server components. I get the student id from a query in the url, then i pass it to my server action to get the data the problem is the sever is sending 3 requests and it creates errors but i'm getting a promise back. Is my approach correct and if not what are some better alternatives to do it?
Answered by B33fb0n3
your approach is not a good pratice. Fetch your data directly serverside and pass it down to your client component. Your page.tsx will be initially a server component. There you fetch your data. Then you have your data there and pass it down to the component that needs this data (or directly display it).

No need for server actions, client components, ...
you can get the searchParams by using the [searchParams parameter](https://nextjs.org/docs/app/api-reference/file-conventions/page#searchparams-optional):
export default function Page({
  params,
  searchParams,
}: {
  params: { slug: string }
  searchParams: { [key: string]: string | string[] | undefined }
}) {
  return <h1>My Page with searchParams: {searchParams.someValue}</h1>
}
View full answer

5 Replies

@Redbone Coonhound I'm trying to understand how to properly work with queries and server components. I get the student id from a query in the url, then i pass it to my server action to get the data the problem is the sever is sending 3 requests and it creates errors but i'm getting a promise back. Is my approach correct and if not what are some better alternatives to do it?
B33fb0n3
your approach is not a good pratice. Fetch your data directly serverside and pass it down to your client component. Your page.tsx will be initially a server component. There you fetch your data. Then you have your data there and pass it down to the component that needs this data (or directly display it).

No need for server actions, client components, ...
you can get the searchParams by using the [searchParams parameter](https://nextjs.org/docs/app/api-reference/file-conventions/page#searchparams-optional):
export default function Page({
  params,
  searchParams,
}: {
  params: { slug: string }
  searchParams: { [key: string]: string | string[] | undefined }
}) {
  return <h1>My Page with searchParams: {searchParams.someValue}</h1>
}
Answer
Redbone CoonhoundOP
how do i get the query from the url in a server component?
@Redbone Coonhound how do i get the query from the url in a server component?
B33fb0n3
you can get it by using the [searchParams parameter](https://nextjs.org/docs/app/api-reference/file-conventions/page#searchparams-optional):
export default function Page({
  params,
  searchParams,
}: {
  params: { slug: string }
  searchParams: { [key: string]: string | string[] | undefined }
}) {
  return <h1>My Page with searchParams: {searchParams.someValue}</h1>
}
Redbone CoonhoundOP
It solved the issue, thank you very much!!!
B33fb0n3
happy to help