Hi @charred glade. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#How to fetch server side URL Parameters
paper slateBOT
In Next.js, you can access the URL parameters on the server side using the searchParams prop in your page.js component or generateMetadata function. This allows you to render a page on the server based on the search parameters of the incoming request. Client navigations that update search parameters will send a new request to the server and cause a re-render.
Here's an example of how you can use the searchParams prop in your page.js component:
export async function getServerSideProps(context) {
const model = context.query.model;
// Fetch data based on the model value
// ...
return {
props: {}, // will be passed to the page component as props
}
}
In this example, context.query is an object that contains the query parameters. You can access the model value using context.query.model.
Please note that useSearchParams is a Client Component hook and is not supported in Server Components to prevent stale values during partial rendering. If your Client Components depend on data that is not serializable, you can fetch data on the client with a third party library or on the server via a Route Handler.