SSR not working properly

Hi all!

I'm having a strange issue while setting up SSR. I haven't found this problem being described anywhere else. Any help will be appreciated!

### What I expect:

Loading the page in the browser without javascript should render the correct content.

### What I get:

The page renders only the fallback. If I load the page again without restarting the server, I can see the content.

### Dependencies
`react`: ^18, installed: 18.2.0
`@apollo/client`: ^3.10.8, installed: 3.10.8
`@apollo/experimental-nextjs-app-support`: ^0.11.2, installed: 0.11.2
`graphql`: ^16.9.0, installed: 16.9.0

### Setup

Apollo provider

```typescript
// ApolloPrpovider.tsx
'use client';
import { ApolloLink, HttpLink } from '@apollo/client';
import {
ApolloClient,
ApolloNextAppProvider,
InMemoryCache,
SSRMultipartLink,
} from '@apollo/experimental-nextjs-app-support';
import React from 'react';

function makeClient() {
const httpLink = new HttpLink({
uri: 'https://myapi.com/graphql',
});

return new ApolloClient({
cache: new InMemoryCache(),
ssrMode: true,
link:
typeof window === 'undefined'
? ApolloLink.from([
new SSRMultipartLink({
stripDefer: true,
}),
httpLink,
])
: httpLink,
});
}

export function ApolloWrapper({ children }: React.PropsWithChildren) {
return (

{children}

);
}
```

Page component

```typescript
// src/app/product/page.tsx
import React from 'react';
import { MyPage } from '@/app/components/ProductPage';

export default function Page({ params }: { params: { slug: string } }) {
return ;
}
```

Content component

```typescript
// src/components/ProductPage.tsx
import React, { Suspense } from 'react';
import Content from '@/app/components/Product';

export const ProductPage: React.FC<{
urlSlug: string;
}> = ({ urlSlug }) => {
return (



);
};
```

Product component, it should render the product's title.

```typescript
// src/component/Product.tsx
'use client';
import { useSuspenseQuery } from '@apollo/client';
import query from '@/feature/product.query';

export const dynamic = 'force-dynamic';

export default function Product({
urlSlug,
}: {
urlSlug: string;
}) {
const { data, error } = useSuspenseQuery(query, {
variables: {
slug: urlSlug,
},
});
const product = data.product;

return product.title;
}
```

Start with ApolloPrpovider.tsx, src/app/product/page.tsx, and src/components/ProductPage.tsx and Product.tsx. Reproduce the no-JavaScript request, compare the initial render with a reload without restarting the server, and trace the Suspense and useSuspenseQuery path. Done means the first request renders the product content instead of only the fallback.

Written by the indexing model from the issue text.