How to implement a page with search params? Questions about fetching, client vs. server and RQ
Unanswered
Cape lion posted this in #help-forum
Cape lionOP
Hi all, I'm stuck on implementing a page with search params and I'd really appreciate your help.
I have a home page and a jobs page. On the home page I'm displaying a
Ideally, I'd like to have the home page refresh only when a new job is posted. So I'm guessing I should implement something like an ISR (Incremental Static Regeneration).
However, for the /jobs page, I'm lacking on my theory. First, it can't be anything else than a SSR, correct? Or it can be? SSG even? What should it be? I'd like to use the search parameters to filter as well, so
The current issue I'm running into, is that if I put that client component
Is this the place where I should look into React Query? I'm guessing it will work for the /jobs page, but what about the home page then that uses the same
Simplified overview of my current setup:
Here's an example: https://gist.github.com/hristokoev/95637eb52307e7e657a870b30a1f6bcd
I hope this is not as complicated as it looks and I'd appreciate any help my way. 🙂 Thank you.
I have a home page and a jobs page. On the home page I'm displaying a
JobsList block, inside of which I'm fetching and mapping to show each JobCard component (image 1).Ideally, I'd like to have the home page refresh only when a new job is posted. So I'm guessing I should implement something like an ISR (Incremental Static Regeneration).
However, for the /jobs page, I'm lacking on my theory. First, it can't be anything else than a SSR, correct? Or it can be? SSG even? What should it be? I'd like to use the search parameters to filter as well, so
sort, limit, etc. And this needs to be a client component due to the fact that parameters are a browser thing, as I understand and useSearchParams needs to be in a client component.The current issue I'm running into, is that if I put that client component
JobsListClientWrapper with the search parameters in the /jobs page and put the JobsList block inside it to pass the parameters for filtering, it doesn't work, because that block uses await function to fetch. Or rather, it works, but the console log is full of errors, understandable (image 3).Is this the place where I should look into React Query? I'm guessing it will work for the /jobs page, but what about the home page then that uses the same
JobsList block? Is it not a bad thing to not use the NEXT.js fetching magic and caching, and go for RQ?Simplified overview of my current setup:
_blocks/JobsList.tsx
_blocks/JobsListClientWrapper.tsx
_components/JobCard.tsx
(pages)/page.tsx
(pages)/jobs/page.tsxHere's an example: https://gist.github.com/hristokoev/95637eb52307e7e657a870b30a1f6bcd
I hope this is not as complicated as it looks and I'd appreciate any help my way. 🙂 Thank you.
5 Replies
Cape lionOP
A small update: I've used React Query for the
I can fix this by duplicating the
JobsList component, which replaced the await/async function and then the /jobs returned no errors and worked as expected. However, now my home page is having issues as I was expecting, because I'm rendering on the server and I get this error:Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-componentI can fix this by duplicating the
JobsList component. In one of them I'll fetch with normal fetch for the server and on the other I'll fetch with React Query for the client. Is this dumb? Or is this the way to go? I don't like how I essentially copy-paste code, but I see no alternative.Cape lionOP
Ok, so I'm not sure React Query is the way to go here, because somehow I can't make it to cache. So back to 0, I guess. :/
Cape lionOP
My whole issue was that I didn't know I could use
One question still remains, should I take advantage somewhere of React Query? Or I can continue without it?
searchParams and get the URL params on the server side. Somehow I thought those are only accessible on the client and I had to use the useSearchParams hook. 🤦♂️ One question still remains, should I take advantage somewhere of React Query? Or I can continue without it?
@Cape lion My whole issue was that I didn't know I could use `searchParams` and get the URL params on the server side. Somehow I thought those are only accessible on the client and I had to use the `useSearchParams` hook. 🤦♂️
One question still remains, should I take advantage somewhere of React Query? Or I can continue without it?
use nuqs for url params, its a life saver.