Next.js Discord

Discord Forum

how to get params inside RSC?

Answered
Chinese softshell turtle posted this in #help-forum
Open in Discord
Chinese softshell turtleOP
tried import { useParams } from "next/navigation" fails

even though docs/google says thats how to get params in RSC

not sure what else to try
Answered by Eric Burel
if you are in the page you just access the value, you don't need to pass props down or set a context
View full answer

178 Replies

Chinese softshell turtleOP
https://github.com/manvalls/server-only-context#readme
found this but that seems too much
trying to find in next docs how to get params in rsc, there must be nice api for it
there is no way you need a library to get dynamic params in rsc, right?
Chinese softshell turtleOP
oh
i guess I can't know the route in rsc?
its not mentioned at all in docs
but I should be able I would think
@Chinese softshell turtle found this but that seems too much
Eric Burel
not too much that's how you can do that actually
@Chinese softshell turtle Click to see attachment
Eric Burel
that's too much, it's redudant with using React cache
Chinese softshell turtleOP
isn't it a common case to want to know param
so weird next just ignores this use case
ok using that lib
Eric Burel
it's not really ignoring it
the problem is that it means creating a shared server/client context
which the developers actively experimented
but it didn't work out
basically they don't just want to solve the param thing but the same issue for all scenarios
Chinese softshell turtleOP
import { pageContext } from '@sodefa/next-server-context'

export default async function Profile(props: any) {
Eric Burel
and it's not easy
Chinese softshell turtleOP
so now i have this
i need to create a wrapper over Profile?
Eric Burel
in the mean time, React cache is perfecty fine to use
Chinese softshell turtleOP
I am super not fond of this approach
Chinese softshell turtleOP
o
oh
Eric Burel
it's recoding what's inside Next.js
but yeah the idea is that they wrap the page render with another fucntion
Chinese softshell turtleOP
wait what was the solution
Eric Burel
which lets them use the ASyncLocalStorage API of Node.js
Chinese softshell turtleOP
oh this
Eric Burel
yep this
this uses the AsyncLocalStorage that Next.js already sets up for you, and powers React cache
the other one @sodefa thing is creating a second AsyncLocalStorage in user land
works but it duplicates the effort, I mean it solves your issue but it might become expensive to implement your own context
Chinese softshell turtleOP
im trying to find the api now for param
i see some locale gets
there is no useParams
whole package is just this crazy
import serverContext from "server-only-context"
ok i have this
i feel like i misunderstand this getLocale stuff
  const [state, setState] = serverContext("en");
ok trying this i guess
yea this is just literal state
console.log(state(), "state")
if i log it
i don't see how to get route params using this package :cat_think:
maybe im slow
Eric Burel
don't worry that's tricky 🙂
you set the value at page level, where you get the params from arguments of the page
and consume it in components
Chinese softshell turtleOP
im at page level
i need to pass param here
as side note I am trying to solve this issue too

https://discord.com/channels/740090768164651008/740093228904218657/1235563407898316862
will open a new issue in help regarding it
but want to try get param first
the other issue is mostly on how to set zustand store
Eric Burel
at page level aprams are parts of the props
Chinese softshell turtleOP
at top level of RSC
and pass it down to JSX
right now thats failing
maybe its even impossible
Eric Burel
I do'nt get your issue
I mean in pages we just get the params from the page arguments
Chinese softshell turtleOP
right now i just use vars
ok so i have a component
Chinese softshell turtleOP
import { auth } from "@/edgedb-next-client"
import { profileAuth, profilePublic } from "@/edgedb/crud/queries"
import Image from "next/image"
import serverContext from "server-only-context"

export default async function Profile(props: any) {
  let session = auth.getSession()
  const client = session.client
  const authenticated = await session.isSignedIn()

  let authData
  let publicData

  if (authenticated) {
    authData = await profileAuth(client)
    console.log(authData, "auth data")
  } else {
    publicData = await profilePublic(params.name)
  }
if i am auth'd I do one db query
if not, another
and i want to store that state in some store
zustand store or even useState i guess
Eric Burel
ok so you need to set the params in your cache in the page, and get the params in your cache in the component
Chinese softshell turtleOP
and pass it down to jsx
Eric Burel
then you can also pass the param to a React context, for the client-side part
Chinese softshell turtleOP
ok trying
searching how to set cache in next
Eric Burel
RSC page: set your server-only-context with the params you get from props
RSC component : get the cached version with server-only-context too, and if you want set a React context with the value
Client component: get the params from React context (as usual in React, nothing new here)
where do i pass the props
in layout?
this is a next route
is here
i have to set server-only-context somewhere outside that page.tsx?
and pass it down to [profile]/page.tsx?
my approach of app is that I have each route a RSC

I do my db queries there, then pass data down to JSX
where I use client components
I thought I could do this
but I am failing first on getting param (still unclear how)

and also unclear how to put result of db query into some react state I can pass down

ideally with https://github.com/pmndrs/zustand
seems I have to drop RSC all together
but i want to avoid that decision
if I can 🙏
it seems i have to inject into my RSC route component as props, the route param?
set the params in your cache in the page, and get the params in your cache in the component
i don't get how to do this
https://nextjs.org/docs/app/building-your-application/caching

there is lots of caches here, do I need data cache?
Eric Burel
I mean, I fill like you are opening twenty boxes at the same time
no sane person can figure server/client/context/cache at the same time 🙂
Chinese softshell turtleOP
if its hard or impossible, i can just do client components
but then whats the point of using next
i have 2 issues
1. get params in RSC
2. get value from my db calls into some react state i can pass down
Eric Burel
you need to clarify : where you can access the params, where you need it, where you have trouble accessing it, and work issue by issue, because the solutions may differ depending on the environment, no one has yet created a context that is shared across client, server. etc. magically so sadly it has to be hard and a bit confusing
Chinese softshell turtleOP
whatever is simplest solution, I would love that, didn't think I had to handle cache to do this
Eric Burel
get params in RSC => solved with server-only context
Chinese softshell turtleOP
i can't access them here
Eric Burel
get value from my db calls into some react state i can pass down => when you get the value of your db, pass it to a client component, or a React context
Chinese softshell turtleOP
in the RSC itself
where i do my db calls
@Chinese softshell turtle in the RSC itself
Eric Burel
use server-only-context for that
Chinese softshell turtleOP
i need to pass the param
you sent this example
i tried it, it failed
ok so you need to set the params in your cache in the page, and get the params in your cache in the component
this i dont get
Eric Burel
yes, so you set the params in the server-only-context from your dynamic route, that's where you set the value
Chinese softshell turtleOP
how do i use server-only-context to get the param
and that happens outside of RSC?
or inside
Eric Burel
first you need to set the param in the context, that's the first step
Chinese softshell turtleOP
so i need to create a layout.tsx
and do it there?
Eric Burel
sorry but I can't help much, are trying to take shortcuts, get a value you didn't set upstream, skip steps, you can't really succeed like that
Chinese softshell turtleOP
because i dont know how to set context
inside rsc
i thought layout is for logic to share across pages
Eric Burel
First you need to get the params from the page, like, try to just do a console.log of the params value
because you seem confused with this first step
You get params from the page props, as shown in the doc
Chinese softshell turtleOP
{ params: { profile: 'nikita' }, searchParams: {} } props
oh wait
Eric Burel
ok, so now, you can put this value in a server-only-context
setting the server context
then, you will be able to get this value from the server context, within an RSC
Chinese softshell turtleOP
ahh
Eric Burel
that's already a great step cause it uses the most complicated part of Next, but that's the best we can do for now until someone invents a better kind of server context
Chinese softshell turtleOP
  const [paramName, setParamName] = serverContext(props.params.name)
ok neat
so i set that
then here I get value from context
i thought context is more for use in jsx
ok let me try
oh i see
i wonder if i can set
and read from context in same component body as where i set the server context
like they do it in some child component
but i want to do it in my page component itself
publicData = await profilePublic(paramName())
something like this would be neat i guess
Eric Burel
in the page component you already have access to the param
the point of a context is to avoid props drilling from page to children
Eric Burel
if you are in the page you just access the value, you don't need to pass props down or set a context
Answer
Eric Burel
you read props.params
Chinese softshell turtleOP
ah true
ok then my bad, then that is solved
going to open an issue on how to get value from db into react state
thank you a lot @Eric Burel ❤️
https://nextjs-forum.com/post/1235589288494628904
is issue with react state setup in rsc and passed down