fix(ssr): flush stream buffer before awaiting component-body promise

.changeset/flush-before-component-promise.md

@@ -0,0 +1,6 @@
+---
+'@qwik.dev/core': patch
+---
+
+Fix SSR in-order streaming not flushing before awaiting a component-body promise.
+

e2e/qwik-e2e/apps/e2e/src/components/streaming/streaming-flush.tsx

@@ -0,0 +1,21 @@
+import { component$ } from '@qwik.dev/core';
+
+export function delay(time: number) {
+  return new Promise<void>((resolve) => {
+    setTimeout(() => resolve(), time);
+  });
+}
+
+export const AsyncCmp = component$(async () => {
+  await delay(5000);
+  return <span id="async-result">Async done</span>;
+});
+
+export const StreamingFlush = component$(() => {
+  return (
+    <div>
+      <h1 id="prefix">Prefix content</h1>
+      <AsyncCmp />
+    </div>
+  );
+});

e2e/qwik-e2e/apps/e2e/src/root.tsx

@@ -26,6 +26,7 @@ import NakedObjectStoreReactivityIssue5001 from './components/signals/NakedObjec
 import { Signals } from './components/signals/signals';
 import { SlotParent } from './components/slot/slot';
 import { StreamingRoot } from './components/streaming/streaming';
+import { StreamingFlush } from './components/streaming/streaming-flush';
 import { Styles } from './components/styles/styles';
 import { SyncQRL } from './components/sync-qrl/sync-qrl';
 import { Toggle } from './components/toggle/toggle';
@@ -66,6 +67,7 @@ const tests: Record<string, FunctionComponent> = {
   '/e2e/resource-fn': () => <ResourceFn />,
   '/e2e/treeshaking': () => <TreeshakingApp />,
   '/e2e/streaming': () => <StreamingRoot />,
+  '/e2e/streaming-flush': () => <StreamingFlush />,
   '/e2e/mount': () => <MountRoot />,
   '/e2e/ref': () => <RefRoot />,
   '/e2e/signals': () => <Signals />,

e2e/qwik-e2e/tests/streaming.e2e.ts

@@ -66,3 +66,25 @@ test.describe('streaming', () => {
     await expect(count).toHaveText('Rerender: 2');
   });
 });
+
+test.describe('streaming flush', () => {
+  test('should flush prefix before awaiting slow async component', async ({ page }) => {
+    await page.goto('/e2e/streaming-flush', {
+      waitUntil: 'commit',
+    });
+
+    // Prefix content must be visible quickly — the flush sends it
+    // before blocking on the 5s async component.
+    await expect(page.locator('#prefix')).toHaveText('Prefix content', {
+      timeout: 3000,
+    });
+
+    // Async content must NOT exist yet (still blocked on the delay).
+    await expect(page.locator('#async-result')).toHaveCount(0);
+
+    // After the async component resolves, the content appears.
+    await expect(page.locator('#async-result')).toHaveText('Async done', {
+      timeout: 8000,
+    });
+  });
+});

packages/qwik/src/core/ssr/ssr-render-jsx.ts

@@ -314,6 +314,7 @@ function processJSXNode(
           if (isPromise(jsxOutput)) {
             // Defer reading QScopedStyle until after the promise resolves
             enqueue(async () => {
+              await ssr.streamHandler.flush();
               const resolvedOutput = await jsxOutput;
               const compStyleComponentId = addComponentStylePrefix(host.getProp(QScopedStyle));