I'm not sure how to do this "the nextjs way" after upgrading to nextjs 16. Basically I have two searchParams "from" and "to" that needs to be passed in as props to multiple server components that will fetch some data server side.

export type SearchParams = {
  from?: string;
  to?: string;
};

and page.tsx

export default async function Home(props: {
  searchParams?: Promise<SearchParams>;
}) {
  const searchParams = props.searchParams?.then((sp) => ({
    from: sp.from,
    to: sp.to,
  }));
  return (
    <Suspense>
      <HomeContainer searchParams={searchParams} />
    </Suspense>
  );
}

Then inside HomeContainer I have this:

export async function HomeContainer({ searchParams }: HomeProps) {
  const params = await searchParams;
  [...]
  <Suspense key={`componentA-${params?.from}-${params?.to}`}>
    <ComponentA from={params?.from} to={params?.to} />
  </Suspense>
  
  More similar components below that fetches data based on `from` and `to`

Where ComponentA is like this:

export const ComponentA = async ({ from, to }: Props) => {
  const data = doSomeFetching(from, to);
  [...]

`

When I refresh the page (production build on Vercel) it blinks.. I thought I would be partially static and/or prerendered when doing it like this?

What is the correct way to solve this?

Thanks.