Fix streaming Astro components (#7895)

.changeset/new-ants-speak.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix streaming Astro components

packages/astro/src/runtime/server/render/component.ts

@@ -413,28 +413,35 @@ async function renderHTMLComponent(
 	};
 }
 
-async function renderAstroComponent(
+function renderAstroComponent(
 	result: SSRResult,
 	displayName: string,
 	Component: AstroComponentFactory,
 	props: Record<string | number, any>,
 	slots: any = {}
-): Promise<RenderInstance> {
+): RenderInstance {
 	const instance = createAstroComponentInstance(result, displayName, Component, props, slots);
 
-	// Eagerly render the component so they are rendered in parallel
+	// Eagerly render the component so they are rendered in parallel.
-	const chunks: RenderDestinationChunk[] = [];
+	// Render to buffer for now until our returned render function is called.
-	const temporaryDestination: RenderDestination = {
+	const bufferChunks: RenderDestinationChunk[] = [];
-		write: (chunk) => chunks.push(chunk),
+	const bufferDestination: RenderDestination = {
+		write: (chunk) => bufferChunks.push(chunk),
 	};
-	await instance.render(temporaryDestination);
+	// Don't await for the render to finish to not block streaming
+	const renderPromise = instance.render(bufferDestination);
 
 	return {
-		render(destination) {
+		async render(destination) {
-			// The real render function will simply pass on the results from the temporary destination
+			// Write the buffered chunks to the real destination
-			for (const chunk of chunks) {
+			for (const chunk of bufferChunks) {
 				destination.write(chunk);
 			}
+			// Free memory
+			bufferChunks.length = 0;
+			// Re-assign the real destination so `instance.render` will continue and write to the new destination
+			bufferDestination.write = (chunk) => destination.write(chunk);
+			await renderPromise;
 		},
 	};
 }
@@ -460,7 +467,7 @@ export async function renderComponent(
 	}
 
 	if (isAstroComponentFactory(Component)) {
-		return await renderAstroComponent(result, displayName, Component, props, slots);
+		return renderAstroComponent(result, displayName, Component, props, slots);
 	}
 
 	return await renderFrameworkComponent(result, displayName, Component, props, slots);

packages/astro/test/streaming.test.js

@@ -48,7 +48,7 @@ describe('Streaming', () => {
 				let chunk = decoder.decode(bytes);
 				chunks.push(chunk);
 			}
-			expect(chunks.length).to.equal(2);
+			expect(chunks.length).to.equal(3);
 		});
 	});