Hi.

Fully describe what you're trying to accomplish
I have a server rendered page.
This page has two URL queryParams that can be set: investorId and dateRange.

I have two server-components in this page.
1. An <InvestorInfo/> component which shows the information of the investor. Uses investorId query param.
2.An <ActivityLog/> which shows what that investor has been doing during a given time. Uses both query params investorId and dateRange.

My problem: When I change the dateRange query param (via useQueryState from a client component nested down) the <InvestorInfo/> component also rerenders, even though it has no dependency on the dateRange query param. For my application, this involves expensive calculations which take a long time to finish, which blocks the relatively cheap rerender of the <ActivityLog/> which is all I want to see change anyways.

Bonus question both of these components are wrapped in a suspense. On first load they show the fallback states, but after changing routes thus triggering a rerender, they dont show the fallback state. EDIT: see this link for answer https://github.com/vercel/next.js/issues/49297#issuecomment-1568557317

Code example

export default async function InvestorPage({
  searchParams,
}: {
  searchParams: Record<string, string | string[] | undefined>;
}) {
  const investorId = parseAsString
    .withDefault("")
    .parseServerSide(searchParams?.investorId);
  const dateRange = parseAsDateRange
    .withDefault("")
    .parseServerSide(searchParams?.investorId); // date range parse implementation
  return (
    <div>
      <Suspense fallback={<p>Loading</p>}>
        <InvestorInfo investorId=investorId} />
      </Suspense>
      <Suspense fallback={<p>Loading</p>}>
        <ActivityLog investorId={investorId} dateRange={dateRange} />
      </Suspense>
    </div>
  );
}