Next.js Discord

Discord Forum

Revalidate route search params

Answered
AM posted this in #help-forum
Open in Discord
Avatar
AMOP
I have following url: http://localhost:3000/games?activeTab=trendy

where active tab can be new | all | trendy, now the problem is that if i go to new and refresh the page is switching from new to trendy is like doing some cache. I even remove the query parameter trendy left only all | new, but after refresh feels like is cached again and is opening with same query params without taking under consider the active one.
Answered by AM
ok wow you point was completly right how i didnt figure it out:

newSearchParams.set('activeTab', 'all');


i had this line in my input component that was triggering the unexpected behaviour
View full answer

20 Replies

Avatar
Eric Burel
Surprising. How do you access the searchParams, via Next.js features? Via the "searchParams" props of pages or "useSearchParams" in client components?
do you need static rendering in this app?
Avatar
AMOP
@Eric Burel
nah, no static i need to refetch everytime when any of these are changed
Image
all is server, active tab is set trough Link

function TrendsTableTabs({ activeTab }: TrendsTableTabsProps) {
  return (
    <div className='flex gap-[9px]'>
      {tabs.map((tab) => (
         <Link
         key={tab}
        href={`?activeTab=${tab}&timestamp=${timestamp}`}
        className='h-full flex-1 pt-2 text-center align-middle capitalize'
        scroll={false}
      >
        {tab}
      </Link>
      ))}
    </div>
  );
}
i manage to build so so amazing table
Image
all of this is server except for the TrendsSearchInput
Avatar
AMOP
yea via searchParams
Avatar
AMOP
btw next version is @14.0.3
Avatar
AMOP
hmm really not sure what is happening with these search params:

I can see how i'am on trending tab doing refresh all good and then suddenly switches to all and opens with query param all when refresh were triggered from trending

requestUrl 1 http://localhost:3000/trends?activeTab=trending
activeTab trending
requestUrl 1 http://localhost:3000/trends?activeTab=all
activeTab: 'all'
Avatar
Eric Burel
Honestly sounds weird, isn't one of your React components faulty?
eg the input would change the tab in an effect or smth?
because what you shared seems correct
maybe give a shot at forcing dynamic
export const dynamic = force dynamic
Avatar
AMOP
hm let me checkin still debugging it
Avatar
AMOP
ok wow you point was completly right how i didnt figure it out:

newSearchParams.set('activeTab', 'all');


i had this line in my input component that was triggering the unexpected behaviour
Answer
Avatar
Eric Burel
Awesome! you can mark the discussion as answered if it worked
At least it was not a bug with dynamic renderign which would have been worse haha
Avatar
AMOP
yes i agree man hahaha i get very sweaty at some point 😄