Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use renderToPipeableStream wired up to a ReadableStream to add streaming support #2

Closed
wants to merge 2 commits into from
Closed

Use renderToPipeableStream wired up to a ReadableStream to add streaming support #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
48818d4
Use renderToPipeableStream wired up to a ReadableStream to add stream…
Nov 25, 2021
3dbc516
Use ||=
Nov 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .env.dev
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# .env.dev
NODE_ENV=development
6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@
"dev": "vite",
"build": "yarn build:client && yarn build:worker",
"build:client": "vite build --outDir dist/client",
"build:worker": "WORKER=true vite build --outDir dist/worker --ssr worker.js",
"build:worker": "WORKER=true vite build --mode dev --outDir dist/worker --ssr worker.js",
"serve": "vite preview",
"workers": "miniflare dist/worker/worker.js -s dist/client"
},
"dependencies": {
"@cloudflare/kv-asset-handler": "^0.1.3",
"react": "^18.0.0-beta-96ca8d915-20211115",
"react-dom": "^18.0.0-beta-96ca8d915-20211115",
"react": "18.0.0-beta-c1220ebdd-20211123",
"react-dom": "18.0.0-beta-c1220ebdd-20211123",
"react-error-boundary": "^3.1.4"
},
"devDependencies": {
Expand Down
12 changes: 12 additions & 0 deletions src/delays.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,15 @@ export const API_DELAY = 2000;

// How long the server waits for data before giving up.
export const ABORT_DELAY = 10000;

// DIRTY DIRTY way to polyfill some missing globals in miniflare
// There is a better way: https://miniflare.dev/api.html#arbitrary-bindings
globalThis.setImmediate ||= fn => setTimeout(fn, 0);
// We have this in Oxygen and can expose it
globalThis.Buffer = globalThis.Buffer || {
Comment on lines +20 to +21
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alternatively, perhaps we could get react to not depend on it. If not, another approach would be to have hydrogen polyfill it.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We already have Buffer in Oxygen, because it was a dependency of some other polyfill, it's just not exposed. So we can expose it and it will work.

td: new TextEncoder(),
from: function(chunk) {
return this.td.encode(chunk);
}
};
// end dirty stuff
61 changes: 49 additions & 12 deletions src/entry-server.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@ import { DataProvider } from "./data";
import { ABORT_DELAY, API_DELAY } from "./delays";
import {
renderToPipeableStream,
renderToReadableStream,
} from "react-dom/server";
} from "react-dom/cjs/react-dom-server.node.development";
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like this is using node specific code. Actually, that looks like that was already the case with renderToPipeableStream.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had to provide a very specific path because we set the target to webworker, and so yarn imports browser-specific stuff but we need the node implementation.

As for the node-specific code, it only uses setImmediate and Buffer.from so far, we have Buffer and setImmediate is easy to polyfill (or can be implemented natively in Oxygen). The renderToReadableStream implementation didn't use any specific node stuff but it sits in react-dom-server.browser.development.js which suggests it might be eventually using browser-specific APIs. React doesn't target workers as a platform yet, but if we get React streaming to production quality in Oxygen, this can change.


/**
* Streaming SSR in a Node.js runtime
Expand Down Expand Up @@ -46,19 +45,57 @@ export function renderInNode({ res, head }) {
export function renderInWorkers({ head }) {
const data = createServerData();

const proxy = {
write(chunk) {
this.controller.enqueue(chunk);
// no backpressure support yet...
return true;
},
end() {
this.controller.close();
},
destroy(err) {
this.controller.error(err);
},
on() {}
};

let didError = false;
try {
const {pipe, abort} = renderToPipeableStream(
<DataProvider data={data}>
<App head={head} />
</DataProvider>,
{
onCompleteShell() {
pipe(proxy);
},
onError(x) {
didError = true;
console.error(x);
},
}
);
proxy.abort = (reason) => {
console.error("Proxy aborted:", reason);
abort();
}
} catch(e) {
console.error("renderToPipeableStream failed:", e);
}

const stream = renderToReadableStream(
<DataProvider data={data}>
<App head={head} />
</DataProvider>,
{
onError(x) {
didError = true;
console.error(x);
},
if (didError) {
throw new Error("renderToPipeableStream failed right after start");
}

const stream = new ReadableStream({
start: function (controller) {
proxy.controller = controller;
},
cancel: function(reason) {
proxy.abort(reason);
}
);
});

return new Response(stream, {
headers: {
Expand Down
2 changes: 1 addition & 1 deletion worker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ addEventListener("fetch", (event) => {
try {
event.respondWith(renderInWorkers({ head }));
} catch (error) {
return new Response(event.message, {
return new Response(error.message, {
status: 500,
});
}
Expand Down
26 changes: 13 additions & 13 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1104,14 +1104,14 @@ queue-microtask@^1.2.2:
resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==

react-dom@^18.0.0-beta-96ca8d915-20211115:
version "18.0.0-beta-96ca8d915-20211115"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0-beta-96ca8d915-20211115.tgz#511a754eddbb760c83d85251249fe9c52522326e"
integrity sha512-ISFQGQ0lHt+fz/Ch9K9coggTWzp9ScfuvzdshGJ73z5AI7mi9i6mVjVekMDnx0wiECjHP1s87rxNDQGGj9XnHw==
[email protected]c1220ebdd-20211123:
version "18.0.0-beta-c1220ebdd-20211123"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0-beta-c1220ebdd-20211123.tgz#e98d0e28cfc3665730b2a7abf00c087cdd41abeb"
integrity sha512-kY++te33IPgLbuRlVrm5uYrxla9y1lkW/icHNHD1zeSa4x0rKOqyW01HLBJPT6bN+PT89b98I5I/Qr0CXN+w6Q==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
scheduler "0.21.0-beta-96ca8d915-20211115"
scheduler "0.21.0-beta-c1220ebdd-20211123"

react-error-boundary@^3.1.4:
version "3.1.4"
Expand All @@ -1125,10 +1125,10 @@ react-refresh@^0.10.0:
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.10.0.tgz#2f536c9660c0b9b1d500684d9e52a65e7404f7e3"
integrity sha512-PgidR3wST3dDYKr6b4pJoqQFpPGNKDSCDx4cZoshjXipw3LzO7mG1My2pwEzz2JVkF+inx3xRpDeQLFQGH/hsQ==

react@^18.0.0-beta-96ca8d915-20211115:
version "18.0.0-beta-96ca8d915-20211115"
resolved "https://registry.yarnpkg.com/react/-/react-18.0.0-beta-96ca8d915-20211115.tgz#0b2a0cd808b85fdce987a0c254e0fab979a3828d"
integrity sha512-Io6qvToVSO1UWNWbJSH16gbgYTkseSbfpQvLaB7JPutt0QVvjpUlEE0nfmww77CFdawxGkyfm/x4zvNTlMkHsw==
[email protected]c1220ebdd-20211123:
version "18.0.0-beta-c1220ebdd-20211123"
resolved "https://registry.yarnpkg.com/react/-/react-18.0.0-beta-c1220ebdd-20211123.tgz#1577d2e59dfde826e110074c5f20160e0c1d36d9"
integrity sha512-yP8Lvre7RS0TXFYEyRkijpaqilwM0kMG1iEkoIWgeNyjBDMeKjmqKDFCNtXoUca0WdJ0Y+DvmjKPce5XksJMaA==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
Expand Down Expand Up @@ -1211,10 +1211,10 @@ sanitize-filename@^1.6.3:
dependencies:
truncate-utf8-bytes "^1.0.0"

[email protected]96ca8d915-20211115:
version "0.21.0-beta-96ca8d915-20211115"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0-beta-96ca8d915-20211115.tgz#b15758da1f33734ab1219aa5147ea79037a42013"
integrity sha512-gm2zVVyjuIHlcqdAv57Tk/lFBf7+RDhYvIEaOZiKf3/YpIZbsiMnfy6yP6+VR3pS//V2LY5Mv8bf6fS+4IOWbg==
[email protected]c1220ebdd-20211123:
version "0.21.0-beta-c1220ebdd-20211123"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0-beta-c1220ebdd-20211123.tgz#6a4c3cc426f4316e5f0df448b01e99b364aa7fc7"
integrity sha512-3qOlWLIx2gMB5FUgCuycE7vQhXyoTsy5VF9elrsXOSvpM7j4NMYYRf9ehjsllQK+8sSmmAlXHx/8kdcA500tdA==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
Expand Down