Hey everyone,
I’m trying to understand the best approach for handling searchParams when using caching in Next.js with Vercel.

In my project, I use generateStaticParams to pre-generate static pages based on dynamic data fetched from an API. Here’s an example of my code:

export async function generateStaticParams() {
  let locations = await getLocationsWithSlugs()
  locations = Array.isArray(locations) ? locations : []

  const params: { language: string; slug: string }[] = locations
    .map((location) => ({
      language: location.language,
      slug: location?.slug?.current ?? null,
    }))
    .filter((location) => location.slug)

  return params
}

In this case:
• I fetch all the slugs from getLocationsWithSlugs(), and everything works fine.
• The static pages are pre-generated correctly.
• Caching on Vercel is working as expected.


The issue with searchParams

The problem arises when I need to handle dynamic pages that use searchParams, like:
/locations?type=maxibillboard&country=uk&city=london

Unlike generateStaticParams, here I’m not pre-generating pages with predefined slugs, but rather using query parameters (type, country, city) that affect the page’s content.

My questions are:

1. How does caching work on Vercel when searchParams are involved? Is there a way to avoid unnecessary re-renders and keep good performance?
2. What’s the recommended approach in Next.js for handling these pages? Should they be client-side only (useSearchParams()), or is there a way to make them work server-side while leveraging caching?
3. Can ISR (Incremental Static Regeneration) or other caching strategies be used effectively for this case?

Any advice, best practices, or insights would be greatly appreciated!
Thanks in advance for your help! 😊