Dealing with query params during initial load in pages router

[blissful kettle]

I'm working on an app written using the pages router. I want to remove state from the files and only use the query params directly for the app. Getting the initial params on load seems to preclude the ability to use the params directly though, as I need to use router.isReady inside a useEffect, and thus the query param values would then need to be set as state.

I could try to infer when the router has loaded by checking when query params are no longer undefined, but this seems messy. I'm wondering if there are any patterns here which would be useful for this.

The App Router is useful because it has useSearchParams but converting the app over to App Router seems like a bit of a large task, especially since our project is currently using static exports and would need to switch over.

[dawn trail]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[serene light]

It seems like useSearchParams is working on pages router too, it's not documented though. If you are reading query from useEffect why don't you use window.location.search?

[plucky knot]

you only need to wait for router.isReady if the page is static. the same happens for useSearchParams: you need to use Suspense if the page is static.

so if the page is static, you must provide a loading state and wait for router.isReady.

if the page is dynamic (with getServerSideProps, it will just work, no need to wait for anything).

[blissful kettle]

so I'm looking into making the page and site dynamic. It might be worth it because getServerSideProps allows for potentially better geolocation, which would be useful, but hosting will be more expensive.

What I'm trying to avoid is the pattern of

useEffect(()=> {
  if(router.isReady){
    const {param} = router.query
    setParam(param)
  }
}, [router.isReady])

as this just creates more state. Waiting until param is not undefined seems a little tricky and I'm not sure if it will allow me to validate the URL with something like Zod.

[plucky knot]

instead of

const router = useRouter();
const [param, setParam] = useState(null);
useEffect(...);

just do

const router = useRouter();
const param = router.isReady ? router.query.param : null;

add validation if you want

const router = useRouter();
const paramParseResult = router.isReady ? schema.safeParse(router.query.param) : null;

[blissful kettle]

Okay, I guess what I need is a way to revalidate and update the params as they are populated, if they need to be. So if I get an empty link to home, I need to fill in all the query params, otherwise I just need to make the app run.

I'm trying to focus on populating those params as early as possible for validation purposes, but I guess I could just do some sort of state to determine if population functions have run and only handle validation errors if that has happened.

It looks like getServerSideProps can do some pre- populating, but I need access to navigator for geolocation.

I'm partially thinking out loud about the tools I have to work with, but I'm curious if Next has anything to help here