SSR/RSC Rendering Behaviour

So I have been unable to work around an issue I am having using a server side query along with some suspense queries and how they are being rendered. This is how things are currently setup:

layout.tsx

export const dynamic = 'force-dynamic'

export default async function OrderOnlineLayout({ children }: React.PropsWithChildren) {
  const { data } = await query<BusinessOpenQuery, BusinessOpenQueryVariables>({
    query: BusinessOpenDocument,
    variables: {
      ids: [env.NEXT_PUBLIC_BUSINESS_ID],
      open: true
    },
    fetchPolicy: 'network-only',
    notifyOnNetworkStatusChange: true,
    context: {
      noCache: true
    }
  })

  if (data && data.businesses.length <= 0) return <OrderOnlineUnavailable operatingWeek={data.businessHours[0]?.operatingWeek} />

  return children
}

page.tsx

export default async function OrderOnlinePage({ searchParams }: PageProps) {
  const product = parseAsString.parseServerSide(searchParams.pid)
  const type = parseAsStringEnum(Object.values(OrderType)).parseServerSide(searchParams.type)

  return (
    <Suspense fallback={<LoadingIndicator className="min-h-screen" />}>
      <OrderOnline
        business_id={env.NEXT_PUBLIC_BUSINESS_ID}
        product_id={product}
        defaultOrderType={type}
        enable_analytics={env.NEXT_PUBLIC_ENVIRONMENT === 'production'}
        classNames={{ tabs: { wrapper: 'bg-primary', trigger: 'text-white data-[state=active]:bg-secondary data-[state=active]:text-primary' } }}
      />
    </Suspense>
  )
}

The issue that is happening is that when either directly going to the page, or navigating to the page from another for the first time, the conditional OrderOnlineUnavailable component is being rendered, followed by the suspense fallback, followed by the OrderOnlineUnavailable component again with the correct content.

I want / it should render directly into the LoadingIndicator by either the loading.tsx file however the awaited query doesnt seem to be being awaited at all.

In addition to that, if I load this page initially, then navigate to another page and come back, the query does not get run again even though the cache is set to cache: 'no-store' and the query fetchPolicy is set to network-only. I am only able to get the function to run again when reloading the page entirely.

Not sure if you have any insights here as far as either of these issues.

apollographql / apollo-client-nextjs

SSR/RSC Rendering Behaviour #365