Fix component frameworks on Vercel Edge (#4667)

* fix: use while instead of "for await" in react integration * fix: cast HTML to string to fix other integrations * docs: add comment on encode(String(html)) * chore: changeset Co-authored-by: bholmesdev <[email protected]>
withastro · Sep 7, 2022 · 9290b24 · 9290b24
1 parent 4b73d34
commit 9290b24
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 8 deletions.
diff --git a/.changeset/tasty-owls-watch.md b/.changeset/tasty-owls-watch.md
@@ -0,0 +1,6 @@
+---
+'astro': patch
+'@astrojs/react': patch
+---
+
+Fix framework components on Vercel Edge
diff --git a/packages/astro/src/runtime/server/render/page.ts b/packages/astro/src/runtime/server/render/page.ts
@@ -79,7 +79,10 @@ export async function renderPage(
 										controller.enqueue(encoder.encode('<!DOCTYPE html>\n'));
 									}
 								}
-								controller.enqueue(encoder.encode(html));
+								// Convert HTML object to string
+								// for environments that won't "toString" automatically
+								// (ex. Cloudflare and Vercel Edge)
+								controller.enqueue(encoder.encode(String(html)));
 								i++;
 							}
 							controller.close();

diff --git a/packages/integrations/react/server.js b/packages/integrations/react/server.js
@@ -135,14 +135,27 @@ async function renderToStaticNodeStreamAsync(vnode) {
 	});
 }
 
+/**
+ * Use a while loop instead of "for await" due to cloudflare and Vercel Edge issues
+ * See https://github.com/facebook/react/issues/24169
+ */
+async function readResult(stream) {
+  const reader = stream.getReader();
+  let result = '';
+  const decoder = new TextDecoder('utf-8')
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) {
+      return result;
+    }
+    result += decoder.decode(value, { stream: true });
+  }
+}
+
 async function renderToReadableStreamAsync(vnode) {
-	const decoder = new TextDecoder();
-	const stream = await ReactDOM.renderToReadableStream(vnode);
-	let html = '';
-	for await (const chunk of stream) {
-		html += decoder.decode(chunk);
-	}
-	return html;
+	return await readResult(
+		await ReactDOM.renderToReadableStream(vnode),
+	);
 }
 
 export default {