So I have created two server components that fetch data from 2 different APIs respectively. The page looks like the below

    <div>
        <Suspense fallback="Loading">
          <FacetList searchParams={searchParams}/>
        </Suspense>
        <Suspense fallback="Loading">
          <RecipeList searchParams={searchParams} />
        </Suspense>
      </div>

Both FacetList and RecipeList are server components that accept searchParams.

export default async function FacetList({ searchParams }) {
  const params = new URLSearchParams(searchParams);
  const res = await fetch(
    `https://blah.blah.com/api/search/GetFacetsForTerm?${params}` // slow API
  )
    .then((res) => res.json()) 
    );

  const facetGroups = res?.FacetGroups;

  return (
    <ul>
      {facetGroups.map(({ Name: GroupName, DisplayName, Facets }) => {
        return (
          <li key={GroupName}>
            <h3>{DisplayName}</h3>
            <ul>
              {Facets &&
                Facets.map(({ DisplayName, Name }) => {
                  return (
                    <li key={Name}>
                      <Link
                        href={{
                          pathname: "/recipes",
                          query: {
                            [GroupName]: Name,
                          },
                        }}
                      >
                        {DisplayName}
                      </Link>
                    </li>
                  );
                })}
            </ul>
          </li>
        );
      })}
    </ul>
  );
}

export default async function RecipeList({ searchParams }) {
  const params = new URLSearchParams(searchParams);
  console.log(params);
  const res = await fetch(
    `https://blah.blah.com/api/search/GetResultsForTerm?${params}`,
    { cache: "no-store" }
  ).then((res) => res.json());

  return (
    <div>
      // recipe list
    </div>
  );
}