michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix component frameworks on Vercel Edge (#4667)

Browse source 
* 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 <hey@bholmes.dev>
This commit is contained in:
Benjamin Holmes 2022-09-07 19:41:37 -04:00 committed by GitHub
parent 4b73d34744
commit 9290b24143
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.changeset/tasty-owls-watch.md Normal file
View file

@ -0,0 +1,6 @@
---
'astro': patch
'@astrojs/react': patch
---
Fix framework components on Vercel Edge

5
packages/astro/src/runtime/server/render/page.ts
View file

@ -79,7 +79,10 @@ export async function renderPage(
controller.enqueue(encoder.encode('<!DOCTYPE html>\n')); 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++; i++;
} }
controller.close(); controller.close();

27
packages/integrations/react/server.js
View file

@ -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) { async function renderToReadableStreamAsync(vnode) {
const decoder = new TextDecoder(); return await readResult(
const stream = await ReactDOM.renderToReadableStream(vnode); await ReactDOM.renderToReadableStream(vnode),
let html = ''; );
for await (const chunk of stream) {
html += decoder.decode(chunk);
}
return html;
} }
export default { export default {