Fix top level async breaks with routes that don't stream

[blittle]

Description

Fix a critical issue where a top level asynchronous request within App.server.jsx would break if subsequent routes attempt to disable streaming. For example:

// App.server.jsx
export default renderHydrogen() {
  useSession(); 
  ...
}

// NotFound.server.jsx
export default function NotFound({response}) {
  resonse.doNotStream();
  ...
}

Additional context

---

Before submitting the PR, please make sure you do the following:

• Read the Contributing Guidelines
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123)
• Update docs in this repository according to your change
• Run yarn changeset add if this PR cause a version bump based on Keep a Changelog and adheres to Semantic Versioning

[blittle]

The problem starts here, the rscReadable is setup based on the initial status of streaming. But if something suspends in App.server.jsx, this will always be true. Later in the logic down below though all of a sudden response.canStream() is false. So to keep it consistent, the variable is set once and reused everywhere.

[blittle]

The case where it breaks, <meta data-flight actually is embedded twice. So the value won't be S2, rather an encoded <meta data-flight

[jplhomer]

Nice find and fix 👍

But just to clarify: If you suspend in the root App component, then any calls to response.doNotStream() in route files will not be effective. Are we aligned there?

This is what we have in our documentation: https://shopify.dev/custom-storefronts/hydrogen/framework/routes#response-donotstream

[wizardlyhel]

good find