I am working on an application with search functionality, which I want to cache the generated page for a while (ISR). The problem is that, when I add any logic processing in the page.tsx component, the revalidate cache is disabled.

Below is a version without the search parameters. This way the caching works as expected, setting the cache-control to one minute.

import { cache } from 'react'

import { SearchJobs } from '@/services/jobs/search-jobs'

const fetchJobs = cache(async () => {
  return await SearchJobs.instance.execute({ query })
})

export const revalidate = 60

export default async function HomePage() {
  console.log('BUILDING PAGE /(home)')
  const jobs = await fetchJobs()

  return (
    <main>
      <span>
        Found <strong>{jobs.length}</strong> jobs
      </span>
    </main>
  )
}

However, if I try extracting the query parameter from the props, or try getting it from the headers, the revalidation doesn't work anymore. Now, every time the user access the page (with and without query param) the page is generated, without any caching. Here's an example:

const query = typeof searchParams.q === 'string' ? searchParams.q : searchParams.q?.at(0)
const jobs = await fetchJobs(query)

Caching pages is essential in my application, and unfortunately I am not finding a way to make search works this way. Any help is really appreciated!