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.

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

[Flight] Test deduplication with streaming server components #29001

Closed

Conversation

unstubbable
Copy link
Contributor

@unstubbable unstubbable commented May 6, 2024

Stacked on top of #28996, because initially I thought that the deduplication by property path would make this test succeed.

I think the test might be useful for verifying a fix that can unblock the reconciliation issue in the AI SDK (see vercel/ai#1257, or vercel/ai#1210 (comment), for reference), whether this can be incorporated into #28996, or tackled separately.

The flight payload for the test shows that deduplication via property path is not applied in this scenario:

1:"$Sreact.suspense"
0:["$","$1",null,{"fallback":["$","p",null,{"children":"loading"}],"children":"$L2"}]
3:I["0",[],"*"]
2:["$","$1",null,{"fallback":["$","$L3",null,{"initialState":0}],"children":"$L4"}]
4:["$","$L3",null,{"initialState":0}]

I would still need to investigate whether this is an expected limitation by the Flight Server (i.e. reference by path can only work within the same model root, and not across chunks), or whether this is actually supposed to be supported. After all, the path does include the task ID, and in fact, the Flight Client can resolve 4:"$2:props:fallback". But even then, this still leads to a re-mount. So maybe it's also a limitation of Fiber?

@react-sizebot
Copy link

Comparing: 46abd7b...5ec7df7

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.js = 6.66 kB 6.66 kB = 1.82 kB 1.82 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 492.61 kB 492.61 kB = 87.88 kB 87.88 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.67 kB 6.67 kB +0.05% 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 498.86 kB 498.86 kB = 88.93 kB 88.93 kB
facebook-www/ReactDOM-prod.classic.js = 591.22 kB 591.22 kB = 103.96 kB 103.96 kB
facebook-www/ReactDOM-prod.modern.js = 567.44 kB 567.44 kB = 100.36 kB 100.36 kB
test_utils/ReactAllWarnings.js Deleted 64.26 kB 0.00 kB Deleted 16.02 kB 0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js +0.85% 29.03 kB 29.27 kB +1.57% 6.56 kB 6.67 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js +0.85% 29.03 kB 29.27 kB +1.57% 6.56 kB 6.67 kB
oss-stable-semver/react-client/cjs/react-client-flight.production.js +0.81% 30.52 kB 30.77 kB +1.40% 6.51 kB 6.60 kB
oss-stable/react-client/cjs/react-client-flight.production.js +0.81% 30.52 kB 30.77 kB +1.40% 6.51 kB 6.60 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.js +0.80% 30.57 kB 30.82 kB +1.53% 6.94 kB 7.05 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.js +0.80% 30.57 kB 30.82 kB +1.53% 6.94 kB 7.05 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js +0.80% 30.91 kB 31.15 kB +1.48% 7.02 kB 7.12 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js +0.80% 30.91 kB 31.15 kB +1.48% 7.02 kB 7.12 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.js +0.74% 33.22 kB 33.46 kB +1.38% 7.56 kB 7.66 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.js +0.74% 33.22 kB 33.46 kB +1.38% 7.56 kB 7.66 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.production.js +0.71% 34.47 kB 34.71 kB +1.34% 7.83 kB 7.93 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.production.js +0.71% 34.47 kB 34.71 kB +1.34% 7.83 kB 7.93 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.js +0.71% 34.47 kB 34.71 kB +1.30% 7.84 kB 7.94 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.js +0.71% 34.47 kB 34.71 kB +1.30% 7.84 kB 7.94 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.js +0.70% 35.15 kB 35.39 kB +1.27% 8.01 kB 8.11 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.js +0.70% 35.15 kB 35.39 kB +1.27% 8.01 kB 8.11 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.js +0.70% 35.16 kB 35.40 kB +1.31% 8.00 kB 8.10 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.js +0.70% 35.16 kB 35.40 kB +1.31% 8.00 kB 8.10 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.js +0.68% 36.38 kB 36.63 kB +1.18% 8.21 kB 8.31 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.js +0.68% 36.38 kB 36.63 kB +1.18% 8.21 kB 8.31 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.js +0.68% 36.39 kB 36.64 kB +1.22% 8.20 kB 8.30 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.js +0.68% 36.39 kB 36.64 kB +1.22% 8.20 kB 8.30 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js +0.54% 42.72 kB 42.95 kB +1.21% 8.86 kB 8.97 kB
oss-experimental/react-server/cjs/react-server-flight.production.js +0.53% 56.03 kB 56.33 kB +0.31% 11.14 kB 11.18 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.js +0.52% 44.26 kB 44.49 kB +1.14% 9.23 kB 9.33 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js +0.52% 44.59 kB 44.83 kB +1.14% 9.31 kB 9.42 kB
oss-experimental/react-client/cjs/react-client-flight.production.js +0.52% 45.39 kB 45.63 kB +1.03% 8.80 kB 8.89 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.js +0.49% 47.10 kB 47.33 kB +1.06% 9.89 kB 10.00 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.production.js +0.48% 48.35 kB 48.58 kB +1.05% 10.17 kB 10.27 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.js +0.48% 48.35 kB 48.59 kB +1.01% 10.17 kB 10.27 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.js +0.47% 49.03 kB 49.26 kB +1.11% 10.34 kB 10.45 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.js +0.47% 49.04 kB 49.27 kB +1.14% 10.32 kB 10.44 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.js +0.46% 50.07 kB 50.30 kB +0.94% 10.54 kB 10.64 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.js +0.46% 50.08 kB 50.31 kB +0.97% 10.52 kB 10.63 kB
oss-stable-semver/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.js +0.46% 46.38 kB 46.60 kB +0.75% 10.78 kB 10.87 kB
oss-stable/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.js +0.46% 46.38 kB 46.60 kB +0.75% 10.78 kB 10.87 kB
oss-stable-semver/react-client/cjs/react-client-flight.development.js +0.32% 62.77 kB 62.97 kB +0.48% 15.16 kB 15.23 kB
oss-stable/react-client/cjs/react-client-flight.development.js +0.32% 62.77 kB 62.97 kB +0.48% 15.16 kB 15.23 kB
oss-stable-semver/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js +0.32% 62.78 kB 62.98 kB +0.50% 14.87 kB 14.94 kB
oss-stable/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js +0.32% 62.78 kB 62.98 kB +0.50% 14.87 kB 14.94 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js +0.32% 63.02 kB 63.22 kB +0.49% 14.93 kB 15.01 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js +0.32% 63.02 kB 63.22 kB +0.49% 14.93 kB 15.01 kB
oss-stable-semver/react-server/cjs/react-server-flight.production.js +0.32% 41.69 kB 41.83 kB +0.26% 9.11 kB 9.13 kB
oss-stable/react-server/cjs/react-server-flight.production.js +0.32% 41.69 kB 41.83 kB +0.26% 9.11 kB 9.13 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js +0.31% 66.27 kB 66.47 kB +0.47% 15.90 kB 15.97 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js +0.31% 66.27 kB 66.47 kB +0.47% 15.90 kB 15.97 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +0.30% 66.78 kB 66.98 kB +0.46% 16.07 kB 16.14 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +0.30% 66.78 kB 66.98 kB +0.46% 16.07 kB 16.14 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-server.node.production.js +0.29% 83.70 kB 83.94 kB +0.25% 17.26 kB 17.30 kB
oss-experimental/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.js +0.29% 69.55 kB 69.75 kB +0.50% 15.05 kB 15.13 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js +0.29% 70.70 kB 70.90 kB +0.44% 16.97 kB 17.04 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js +0.29% 70.70 kB 70.90 kB +0.44% 16.97 kB 17.04 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js +0.29% 85.69 kB 85.93 kB +0.23% 17.38 kB 17.42 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.js +0.28% 86.57 kB 86.82 kB +0.34% 17.63 kB 17.69 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js +0.28% 86.77 kB 87.02 kB +0.25% 17.62 kB 17.66 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.js +0.28% 87.30 kB 87.55 kB +0.35% 17.77 kB 17.83 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.development.js +0.28% 72.48 kB 72.68 kB +0.42% 17.53 kB 17.60 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.development.js +0.28% 72.48 kB 72.68 kB +0.42% 17.53 kB 17.60 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js +0.28% 72.51 kB 72.72 kB +0.41% 17.55 kB 17.63 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js +0.28% 72.51 kB 72.72 kB +0.41% 17.55 kB 17.63 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.production.js +0.28% 88.50 kB 88.75 kB +0.21% 18.01 kB 18.05 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.js +0.27% 89.46 kB 89.71 kB +0.24% 18.22 kB 18.27 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js +0.27% 73.91 kB 74.12 kB +0.39% 17.90 kB 17.97 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js +0.27% 73.91 kB 74.12 kB +0.39% 17.90 kB 17.97 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.js +0.27% 89.60 kB 89.85 kB +0.21% 18.24 kB 18.27 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js +0.27% 73.94 kB 74.14 kB +0.41% 17.94 kB 18.01 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js +0.27% 73.94 kB 74.14 kB +0.41% 17.94 kB 18.01 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.js +0.27% 90.55 kB 90.79 kB +0.25% 18.45 kB 18.49 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js +0.27% 74.98 kB 75.19 kB +0.39% 18.11 kB 18.18 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js +0.27% 74.98 kB 75.19 kB +0.39% 18.11 kB 18.18 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js +0.27% 75.01 kB 75.21 kB +0.40% 18.15 kB 18.22 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js +0.27% 75.01 kB 75.21 kB +0.40% 18.15 kB 18.22 kB
oss-experimental/react-client/cjs/react-client-flight.development.js +0.22% 86.34 kB 86.53 kB +0.34% 19.53 kB 19.60 kB
oss-experimental/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js +0.22% 86.35 kB 86.54 kB +0.42% 19.24 kB 19.32 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js +0.22% 86.59 kB 86.78 kB +0.42% 19.31 kB 19.39 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js +0.21% 89.84 kB 90.03 kB +0.39% 20.27 kB 20.35 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +0.21% 90.35 kB 90.54 kB +0.39% 20.44 kB 20.52 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js +0.20% 94.26 kB 94.46 kB +0.34% 21.34 kB 21.41 kB
oss-stable-semver/react-server/cjs/react-server-flight.development.js = 87.25 kB 87.04 kB = 20.29 kB 20.25 kB
oss-stable/react-server/cjs/react-server-flight.development.js = 87.25 kB 87.04 kB = 20.29 kB 20.25 kB
test_utils/ReactAllWarnings.js Deleted 64.26 kB 0.00 kB Deleted 16.02 kB 0.00 kB

Generated by 🚫 dangerJS against 5ec7df7

@sebmarkbage
Copy link
Collaborator

I have a TODO to fix dedupe in ReadableStream/AsyncIterable so I first thought it was about that but this is just recursive promises.

@unstubbable
Copy link
Contributor Author

I have a TODO to fix dedupe in ReadableStream/AsyncIterable so I first thought it was about that but this is just recursive promises.

Yes this is about recursive promises, combined with using the same element as suspense fallback and children at the end of this promise chain.

@sebmarkbage
Copy link
Collaborator

Well, it is expected that the fallback and the children of a Suspense boundary cannot share state. They are two separate slots so they are two separate components.

This becomes important for example with resuspending when the state in both of them can exist at the same time. The fallback is shown but the state of the children is preserved while it's suspended and can be shown again.

It also doesn't really make conceptual sense to render the same thing on both slots. It would always be suspended at the same time. They'd at least need different props. In this case the extra wrapper Row is actually supposed to clear the state too. We don't in the case of Server Components as a pragmatic way to avoid the overhead/leak of wrapper.

However, this is not the only problem with this approach. For example, by creating nested Suspense boundaries you can't reorder the items in the list and have them preserve state since they're not siblings but nested components that should really have keys which would clear the state on reorders.

That's why the correct model for this will be AsyncIterable + SuspenseList. In fact, this was why SuspenseList was built in the first place.

@unstubbable
Copy link
Contributor Author

Thanks for providing the suspense context, that makes sense.

I do see how AsyncIterable + SuspenseList will be useful for streamable UI that’s appended to. For the kind of streamable UI that’s updated instead, it will probably feel like misusing SuspenseList for that (e.g. only showing the last value).

@unstubbable unstubbable closed this May 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants