Consume RSC response in the server #463

frandiox · 2022-01-13T19:28:29Z

Description

According to React team's feedback, the recommended way to combine SSR + RSC is to consume the RSC response in the server.

How this works for an initial page request:

Hydrogen starts rendering the App with RSC renderToReadableStream (from react-server-dom-vite)
We tee that stream so we can consume it in two ways
The first way consume it is to pass it to createFromReadableStream which gives us a React representation of the RSC output as React components a la response.readRoot(). This is very similar to what you see in the browser when a fetch('/react') response is consumed.
We take that React representation of the RSC tree, insert it as children into our SSR wrapper component e.g. <Html />, and pass that to renderToReadableStream (from react-dom/server)
Meanwhile, the second way we consume the teed response is to create yet a new ReadableStream, rscToScriptTagReadable. This stream reads the RSC syntax from the initial readable and transforms it into <script> tags. These script tags are responsible for incrementally hydrating the initial SSR page load. This is ideal, because it means we don't have to call /react on the initial page load. Flush RSC response inline with SSR response #250
Finally, we render our app, taking into account all of the response.doNotStream(), response.redirect() and other caching headers.
When it's time to actually send the response to the browser, we create a new TransformStream and have both the SSR and the Script tag readable streams write to the transform writable. We do this in a way that prevents script tags from being written in the middle of an open SSR HTML tag, for example.
Finally, we send new Response(transform.readable) which streams the response to the browser.

Note: We have encountered a couple random errors here and there, either related to bugs in React or perhaps 3p libraries like react-helmet. We'll keep investigating and fixing these throughout the dev preview period.

Other notes:

This monkey-patches our react-server-dom-vite implementation to add back a reentrancy hack. This is necessary to support ReadableStream implementation of Flight for the time being until we land a fix upstream.

Before submitting the PR, please make sure you do the following:

Add your change under the Unreleased heading in the package's CHANGELOG.md
Read the Contributing Guidelines
Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123)
Update docs in this repository for your change, if needed

…ers build

frandiox · 2022-01-20T12:53:54Z

packages/hydrogen/src/entry-server.tsx

+        const writingSSR = bufferReadableStream(
+          readable.getReader(),
+          (chunk) => {
+            isDocumentMalformed = !chunk.endsWith('>');


@jplhomer Do you have a better idea to avoid writing RSC when SSR is in a malformed state?
This lets SSR write everything directly so the browser gets it asap. RSC writing is slightly delayed (it only writes when SSR is not malformed).

I saw Next.js uses a setTimeout around SSR writing and buffers it a bit but I'm not sure if that fixes this issue.

Edit: thinking that there might be random > symbols that don't signify a closing tag... 🤔

What does "malformed state" mean in this context? Like when only a partial HTML tag has been written, and we don't want to start writing a script tag to flush RSC?

If so, is there a solution similar to using a TransformStream that Seb proposes here?

Yes, the document has a partial tag written at the end so if we something else, the tag won't be valid. I've seen things like <html<script>...</script>> or <div class="something<script>...</script>">

If so, is there a solution similar to using a TransformStream that Seb proposes here?

The thing is, we are already using a TransformStream with a similar approach.
This note from that post:

Note: React can write fractional HTML chunks so it's not safe to always inject HTML anywhere in a write call. The above technique relies on the fact that React won't render anything between writing. We assume that no more link tags will be collected between fractional writes. It is not safe to write things after React since there can be another write call coming after it.

What I understand is that the "link tags" in the example are collected from the SSR itself (think of Helmet). Therefore, there won't be new link tags generated until SSR makes more progress.

However, in our case, our script tags come from a different stream, the RSC, so it's completely random.

Thinking about that note again, I think I understood why Next.js uses a setTimeout. I think React probably writes fractional chunks synchronously. So if you delay the writing one tick, it might be already in good shape 🤔

Edit: as I thought, fractional chunks are indeed only written synchronously, so a timeout 0 works 👍

jplhomer · 2022-01-20T15:26:39Z

packages/dev/src/components/Welcome.server.jsx

+        <Suspense fallback={<BoxFallback />}>
+          <StorefrontInfo />
+        </Suspense>
+        <Suspense fallback={<BoxFallback />}>
+          <TemplateLinks />
+        </Suspense>


Note: This was the culprit causing issues in Vite dev server for Hydration, on the homepage only. I refactored this to use multiple Suspense boundaries, etc.

Now it breaks in Workers 😭 seeing quite a bit of this with react-helmet-async:

TypeError: Cannot read property 'add' of undefined at e2.r2.init (/Users/joshlarson/src/github.com/Shopify/hydrogen/node_modules/react-helmet-async/lib/index.module.js:1:10719) at e2.r2.render (/Users/joshlarson/src/github.com/Shopify/hydrogen/node_modules/react-helmet-async/lib/index.module.js:1:10742) at Fc$1 (/Users/joshlarson/src/github.com/Shopify/hydrogen/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:63:111)

Thanks for the fix!

Now it breaks in Workers 😭 seeing quite a bit of this with react-helmet-async:

The only way I can reproduce this is:

Start dev server in port 3000

Open tab

Close dev server and start Miniflare

Let the previous tab reload

If I start from a new tab or just refresh, it seems to work well. I've also deployed it to CFW and works 🤔

Edit: ahh, it is happening randomly in the development server as well...

I could look into this

frandiox · 2022-01-21T10:42:38Z

@jplhomer I think if we figure out the random issue with the helmet we could start reviewing/merging this PR 🤔 -- I didn't manage to reproduce it consistently.

I'll try to explore early hydration (with the new bootstrapScript thingy) in a different PR.

blittle · 2022-01-21T15:05:42Z

packages/dev/src/components/Welcome.server.jsx

+        <Suspense fallback={<BoxFallback />}>
+          <StorefrontInfo />
+        </Suspense>
+        <Suspense fallback={<BoxFallback />}>
+          <TemplateLinks />
+        </Suspense>


I could look into this

blittle · 2022-01-21T15:21:04Z

packages/hydrogen/src/entry-server.tsx

+                isPendingSsrWrite = false;
+                // React can write fractional chunks synchronously.
+                // This timeout ensures we only write full HTML tags
+                // in order to allow RSC writing concurrently.


I'm confused, how does a timeout do that?

I think it's the equivalent of nextTick Shopify/hydrogen#463 (comment)

(I don't fully understand how React writes synchronously but glad this works!)

packages/hydrogen/src/entry-server.tsx

blittle · 2022-01-21T15:28:02Z

packages/hydrogen/src/entry-server.tsx

+        Promise.all([writingSSR, writingRSC]).then(() => {
+          // Last SSR write might be pending, delay closing the writable one tick
+          setTimeout(() => writable.close(), 0);
+          logServerResponse('str', log, request, responseOptions.status);


This is a bit of a change in the way we measure timing. The console.log for the request with the time will now be the whole time it took to RSC and stream. At some point it would be nice to also log timing at various other spots. A few ideas:

Time for first SSR byte

Time for first RSC script tag

* feat: implement RSC using react-server and react-client (#317) * wip: Create custom flight renderer with local version of react-server * wip: mock client manifest and add module reference to client components * wip: hack RSC resolution * wip: wrap component in Proxy to access original properties * refactor: rename RSC server files * wip: add official RSC hydrator * fix: Rename response.readRoot and remove explicit hydration * wip: remove RR and Helmet providers from the server * wip: Add test app * wip: remove hydration providers * wip: add renderToReadableStream for RSC * refactor: cleanup custom RSC code * refactor: move and rename files * wip: fix test app * refactor: cleanup custom RSC code * refactor: do not pass named boolean in RSC * refactor: simplify ClientMarker * test: fix ClientMarker tests * fix: delay throwing error when client component is missing * refactor: simplify import globs code * feat: provide request object to rendering tree * wip: example of useServerRequest * feat: inline RSC response in the SSR HTML response * fix: add default value to the SSR provider * feat: stream rsc in script tags * feat: update the starter template to work * fix: lint errors * refactor: move code around and cleanup * chore: upgrade Vite to 2.7.0 * chore: add react-server-dom-vite as vendor * feat: replace local react-server and react-client with react-server-dom-vite vendor * fix: react-server-dom-vite allow exporting hooks from client components temporarily * fix: move the server logging locations * feat: Implement ReadableStream branch in SSR and RSC * test: fix playground apps * fix: avoid importing undefined exports depending on the running environment * feat: Buffer RSC response if it cannot be streamed * fix: tests * fix: e2e test * fix: linting * fix: rename test helper * fix: update hydrogen template files * feat: remove react-ssr-prepass. RSC already makes ReadableStream required * refactor: simplify hydration calls * feat: remove old dependencies * feat: enable tree shaking in worker build * fix: Release stream lock before piping * chore: fix formatting * refactor: move code to entry-server to be consistent * refactor: remove HydrationWriter in favor of Node native PassThrough * fix: move constant to a separate file to avoid importing app logic in GraphiQL * refactor: remove old code * fix: maybe fix tests for windows * fix: stream import in workers * fix: flush RSC right after writing head * feat: replace RenderCacheProvider with new ServerRequestProvider cache * refactor: cleanup * fix: suspense breaking hydration * fix: normalize RSC chunks * refactor: simplify customBody check * feat: minor tree-shaking improvements * fix: enable browser hydration * fix: replace TransformStream with ReadableStream to support Firefox * refactor: cleanup and rename variables * fix: normalizePath * fix: better regex * fix: request.context property is reserved in CFW * perf: Do not clone request to avoid extra memory and warnings in CFW * chore: add TODO to remove weird Suspense boundary * fix: Add back ShopifyProvider; call setShopConfig as part of renderHydrogen * chore: remove RSCTest demo code * fix: useMemo is allowed in RSC * fix: Dot not create Response with streams to support CFW Co-authored-by: Bret Little <bret.little@shopify.com> Co-authored-by: M. Bagher Abiat <zorofight94@gmail.com> Co-authored-by: Josh Larson <josh.larson@shopify.com> * feat: Consume RSC response in the server (#463) * wip: Create custom flight renderer with local version of react-server * wip: mock client manifest and add module reference to client components * wip: hack RSC resolution * wip: wrap component in Proxy to access original properties * refactor: rename RSC server files * wip: add official RSC hydrator * fix: Rename response.readRoot and remove explicit hydration * wip: remove RR and Helmet providers from the server * wip: Add test app * wip: remove hydration providers * wip: add renderToReadableStream for RSC * refactor: cleanup custom RSC code * refactor: move and rename files * wip: fix test app * refactor: cleanup custom RSC code * refactor: do not pass named boolean in RSC * refactor: simplify ClientMarker * test: fix ClientMarker tests * fix: delay throwing error when client component is missing * refactor: simplify import globs code * feat: provide request object to rendering tree * wip: example of useServerRequest * feat: inline RSC response in the SSR HTML response * fix: add default value to the SSR provider * feat: stream rsc in script tags * feat: update the starter template to work * fix: lint errors * refactor: move code around and cleanup * chore: upgrade Vite to 2.7.0 * chore: add react-server-dom-vite as vendor * feat: replace local react-server and react-client with react-server-dom-vite vendor * fix: react-server-dom-vite allow exporting hooks from client components temporarily * fix: move the server logging locations * feat: Implement ReadableStream branch in SSR and RSC * test: fix playground apps * fix: avoid importing undefined exports depending on the running environment * feat: Buffer RSC response if it cannot be streamed * fix: tests * fix: e2e test * fix: linting * fix: rename test helper * fix: update hydrogen template files * feat: remove react-ssr-prepass. RSC already makes ReadableStream required * refactor: simplify hydration calls * feat: remove old dependencies * feat: enable tree shaking in worker build * fix: Release stream lock before piping * chore: fix formatting * refactor: move code to entry-server to be consistent * refactor: remove HydrationWriter in favor of Node native PassThrough * fix: move constant to a separate file to avoid importing app logic in GraphiQL * refactor: remove old code * fix: maybe fix tests for windows * fix: stream import in workers * fix: flush RSC right after writing head * feat: replace RenderCacheProvider with new ServerRequestProvider cache * refactor: cleanup * fix: suspense breaking hydration * fix: normalize RSC chunks * refactor: simplify customBody check * feat: minor tree-shaking improvements * fix: enable browser hydration * fix: replace TransformStream with ReadableStream to support Firefox * refactor: cleanup and rename variables * feat: Make ReadableStream globally available * wip: consume RSC response in server * wip: do not close stream connection * wip: fix reentrant error with ReadableStreams in RSC * fix: import Node RSC logic dynamically * fix: rename Cache.client.js to avoid bundling it in workers build * fix: add temporary monkey patch for React Fizz in workers build * feat: Combine SSR and RSC responses in Node * fix: write RSC before ending response when not streaming * feat: Combine SSR and RSC responses in Worker * feat: Use ReadableStream in CFW and stream if supported * fix: add another temporary monkey patch for React Fizz/Flight in workers build * fix: close writable on redirects * fix: Fix hydration during dev by using more Suspense boundaries * fix: add back response.socket listener * feat: support script nonce and shorten access to __flight * feat: avoid writing fractional chunks in SSR * fix: initialize flight container in buffered rendering * fix: ensure flight container is added in Node * refactor: `readable` to `ssrReadable` for clarity Co-authored-by: Bret Little <bret.little@shopify.com> Co-authored-by: Josh Larson <josh.larson@shopify.com> * fix: make ServerHandlerConfig required * chore: update changelog * chore: update docs Co-authored-by: Fran Dios <frankdiox@gmail.com> Co-authored-by: Bret Little <bret.little@shopify.com> Co-authored-by: M. Bagher Abiat <zorofight94@gmail.com>

* Fix licenses * Fix oclif manifest

frandiox and others added 30 commits December 1, 2021 18:16

wip: Create custom flight renderer with local version of react-server

57bb5f0

wip: mock client manifest and add module reference to client components

7ed7a73

wip: hack RSC resolution

e1eba5f

wip: wrap component in Proxy to access original properties

a119de6

refactor: rename RSC server files

46c9e06

wip: add official RSC hydrator

31a1d58

fix: Rename response.readRoot and remove explicit hydration

0bada32

wip: remove RR and Helmet providers from the server

a498942

wip: Add test app

4bdac0f

wip: remove hydration providers

7406bf2

wip: add renderToReadableStream for RSC

81e4548

refactor: cleanup custom RSC code

2640a8c

refactor: move and rename files

46dea47

wip: fix test app

f7f6b51

refactor: cleanup custom RSC code

2019a6e

refactor: do not pass named boolean in RSC

fc7c30d

refactor: simplify ClientMarker

593e6e6

test: fix ClientMarker tests

548b227

fix: delay throwing error when client component is missing

b5c1674

refactor: simplify import globs code

6c56da7

feat: provide request object to rendering tree

8c30c09

wip: example of useServerRequest

2837bef

feat: inline RSC response in the SSR HTML response

00462a9

fix: add default value to the SSR provider

ff72d26

feat: stream rsc in script tags

c8e5efb

feat: update the starter template to work

4a84948

fix: lint errors

67a11a5

refactor: move code around and cleanup

83854c8

Merge branch 'fd-vite-rsc' into fd-vite-rsc-request-provider

2105049

chore: upgrade Vite to 2.7.0

c8382dd

jplhomer force-pushed the fd-vite-rsc-consume-response branch from bda6272 to f7adeb8 Compare January 19, 2022 21:27

wip: fix reentrant error with ReadableStreams in RSC

2ea3f3a

jplhomer force-pushed the fd-vite-rsc-consume-response branch from c63f678 to 2ea3f3a Compare January 19, 2022 22:20

frandiox added 9 commits January 20, 2022 12:54

fix: import Node RSC logic dynamically

fccfd91

fix: rename Cache.client.js to avoid bundling it in workers build

8f52e4a

fix: add temporary monkey patch for React Fizz in workers build

d5aef68

feat: Combine SSR and RSC responses in Node

d3d64c2

fix: write RSC before ending response when not streaming

3192734

feat: Combine SSR and RSC responses in Worker

e17da24

feat: Use ReadableStream in CFW and stream if supported

f8b0fc7

fix: add another temporary monkey patch for React Fizz/Flight in work…

1474e15

…ers build

fix: close writable on redirects

d50ffc6

frandiox commented Jan 20, 2022

View reviewed changes

fix: Fix hydration during dev by using more Suspense boundaries

4c95e02

jplhomer reviewed Jan 20, 2022

View reviewed changes

frandiox added 5 commits January 21, 2022 11:19

fix: add back response.socket listener

c3290b2

feat: support script nonce and shorten access to __flight

6138b03

feat: avoid writing fractional chunks in SSR

ec4d678

fix: initialize flight container in buffered rendering

48836f3

fix: ensure flight container is added in Node

8bf6c7b

jplhomer marked this pull request as ready for review January 21, 2022 12:23

jplhomer changed the base branch from experimental to main January 21, 2022 12:23

jplhomer changed the base branch from main to experimental January 21, 2022 12:23

blittle reviewed Jan 21, 2022

View reviewed changes

refactor: readable to ssrReadable for clarity

c60ed19

jplhomer merged commit 871b892 into experimental Jan 21, 2022

jplhomer deleted the fd-vite-rsc-consume-response branch January 21, 2022 15:51

rafaelstz pushed a commit to rafaelstz/hydrogen that referenced this pull request Mar 4, 2023

Fix licenses (Shopify#463)

517f0f7

* Fix licenses * Fix oclif manifest

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Consume RSC response in the server #463

Consume RSC response in the server #463

frandiox commented Jan 13, 2022 •

edited by jplhomer

Loading

frandiox Jan 20, 2022 •

edited

Loading

jplhomer Jan 20, 2022

frandiox Jan 21, 2022 •

edited

Loading

frandiox Jan 21, 2022 •

edited

Loading

blittle Jan 21, 2022

jplhomer Jan 20, 2022

frandiox Jan 21, 2022 •

edited

Loading

blittle Jan 21, 2022

frandiox commented Jan 21, 2022

blittle Jan 21, 2022

blittle Jan 21, 2022

jplhomer Jan 21, 2022

blittle Jan 21, 2022

Consume RSC response in the server #463

Consume RSC response in the server #463

Conversation

frandiox commented Jan 13, 2022 • edited by jplhomer Loading

Description

Before submitting the PR, please make sure you do the following:

frandiox Jan 20, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

frandiox Jan 21, 2022 • edited Loading

Choose a reason for hiding this comment

frandiox Jan 21, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

frandiox Jan 21, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

frandiox commented Jan 21, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

frandiox commented Jan 13, 2022 •

edited by jplhomer

Loading

frandiox Jan 20, 2022 •

edited

Loading

frandiox Jan 21, 2022 •

edited

Loading

frandiox Jan 21, 2022 •

edited

Loading

frandiox Jan 21, 2022 •

edited

Loading