I am new to next.js. I am using version 14 with app router.

I am using Strapi. I don’t think that matters for this question, but the strapi-get function below is a little helper that I made that does a fetch to my back-end.

I have the server component below. It loads projects. Sometimes the URL includes $_GET variables that filter projects. All of that is working. However, if I browse directly to a URL like /projects?ProjectCategory=Sales, it will load all the Sales projects. Cool. But if I now click the “Projects” link in my nav, which just loads the /projects URL with no variables, the route is still cached with my Sales results. There is nothing I can do to get the base /projects page back without manually reloading in my browser. Its like the route cache doesn’t pay attention to $_GET variables, and caches the whole route based on the first content it sees.

I am also adding various config exports to the route that are supposed to disable cache, but they do not work. I am also making sure my fetch request has no-store set, but it does nothing.

What am I doing wrong? Am I formatting this whole thing wrong somehow?

export const dynamic = 'force-dynamic';
export const fetchCache = 'force-no-store';
export const revalidate = 0;

import Hero from '@/components/page/hero';
import Main from '@/components/main/main';
import ProjectFilters  from '@/components/projects/project-filters';
import ProjectCard  from '@/components/projects/project-card';

import BuildProjectQuery from '@/utils/build-project-query';
import FlattenCollection from '@/utils/flatten-collection';

import strapi_get from '@/lib/strapi-get';

export async function get_project_data(searchParams) {
  let query = BuildProjectQuery();

  if(searchParams){
    for (let param in searchParams) {
      let value = searchParams[param];
      query += '&filters['+param+'][Name][$eq]='+encodeURIComponent(value);
    }
  }

  const projects = await strapi_get({
    collection:'projects',
    query:query,
    cache:'no-store'
  });

  return FlattenCollection(projects);
}

export default async function Page({ searchParams }) {  

  const projects = await get_project_data(searchParams);

  const content = (
    <div className="page-projects">
      <ProjectFilters />
      <div className="project-cards">
        {projects.map((project) => {
          return (<ProjectCard key={project.id} project={project} />);
        })}
      </div>
    </div>
  );

  return (
    <>
      <Hero title="Projects" />
      <Main content={content} />
    </>
  );
}