Add a way to create Server Reference Proxies on the client #26632
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
facebook-github-bot
added
CLA Signed
React Core Team
sebmarkbage
force-pushed
the
createserverref
branch
from
9ea57ae
to
1830ad2
Compare
gaearon
approved these changes
Apr 15, 2023
Oh, I assumed there were some design decisions only to allow passing server functions in props. |
sebmarkbage
force-pushed
the
createserverref
branch
from
1830ad2
to
e2de3fd
Compare
This lets the client bundle encode Server References without them first being passed from an RSC payload. Like if you just import "use server" from the client. In the future we could expand this to allow .bind() too.
sebmarkbage
force-pushed
the
createserverref
branch
from
e2de3fd
to
1cc2994
Compare
unstubbable
added a commit
to unstubbable/mfng
that referenced
this pull request
Apr 17, 2023
1 task
unstubbable
added a commit
to unstubbable/mfng
that referenced
this pull request
Apr 17, 2023
kassens
pushed a commit
to kassens/react
that referenced
this pull request
Apr 17, 2023
…26632) This lets the client bundle encode Server References without them first being passed from an RSC payload. Like if you just import `"use server"` from the client. A bundler could already emit these proxies to be called on the client but the subtle difference is that those proxies couldn't be passed back into the server by reference. They have to be registered with React. We don't currently implement importing `"use server"` from client components in the reference implementation. It'd need to expand the Webpack plugin with a loader that rewrites files with the `"use server"` in the client bundle. ``` "use server"; export async function action() { ... } ``` -> ``` import {createServerReference} from "react-server-dom-webpack/client"; import {callServer} from "some-router/call-server"; export const action = createServerReference('1234#action', callServer); ``` The technique I use here is that the compiled output has to call `createServerReference(id, callServer)` with the `$$id` and proxy implementation. We then return a proxy function that is registered with a WeakMap to the particular instance of the Flight Client. This might be hard to implement because it requires emitting module imports to a specific stateful runtime module in the compiler. A benefit is that this ensures that this particular reference is locked to a specific client if there are multiple - e.g. talking to different servers. It's fairly arbitrary whether we use a WeakMap technique (like we do on the client) vs an `$$id` (like we do on the server). Not sure what's best overall. The WeakMap is nice because it doesn't leak implementation details that might be abused to consumers. We should probably pick one and unify.
unstubbable
added a commit
to unstubbable/mfng
that referenced
this pull request
Apr 18, 2023
shuding
added a commit
to vercel/next.js
that referenced
this pull request
Apr 27, 2023
Mostly mirrors the changed made in facebook/react#26632 to our SWC transform. The implementation difference is that the AST transformer only adds a general purpose wrapper call `createServerReference(id)` from an aliased import, so we can easily change the underlying function in the bundler. This change only affects the client layer (when `self.config.is_server === false`). Needs to be landed after another React upgrade: #48697. cc @sebmarkbage.
EdisonVan
pushed a commit
to EdisonVan/react
that referenced
this pull request
Apr 15, 2024
…26632) This lets the client bundle encode Server References without them first being passed from an RSC payload. Like if you just import `"use server"` from the client. A bundler could already emit these proxies to be called on the client but the subtle difference is that those proxies couldn't be passed back into the server by reference. They have to be registered with React. We don't currently implement importing `"use server"` from client components in the reference implementation. It'd need to expand the Webpack plugin with a loader that rewrites files with the `"use server"` in the client bundle. ``` "use server"; export async function action() { ... } ``` -> ``` import {createServerReference} from "react-server-dom-webpack/client"; import {callServer} from "some-router/call-server"; export const action = createServerReference('1234#action', callServer); ``` The technique I use here is that the compiled output has to call `createServerReference(id, callServer)` with the `$$id` and proxy implementation. We then return a proxy function that is registered with a WeakMap to the particular instance of the Flight Client. This might be hard to implement because it requires emitting module imports to a specific stateful runtime module in the compiler. A benefit is that this ensures that this particular reference is locked to a specific client if there are multiple - e.g. talking to different servers. It's fairly arbitrary whether we use a WeakMap technique (like we do on the client) vs an `$$id` (like we do on the server). Not sure what's best overall. The WeakMap is nice because it doesn't leak implementation details that might be abused to consumers. We should probably pick one and unify.
bigfootjon
pushed a commit
that referenced
this pull request
Apr 18, 2024
This lets the client bundle encode Server References without them first
being passed from an RSC payload. Like if you just import `"use server"`
from the client. A bundler could already emit these proxies to be called
on the client but the subtle difference is that those proxies couldn't
be passed back into the server by reference. They have to be registered
with React.
We don't currently implement importing `"use server"` from client
components in the reference implementation. It'd need to expand the
Webpack plugin with a loader that rewrites files with the `"use server"`
in the client bundle.
```
"use server";
export async function action() {
...
}
```
->
```
import {createServerReference} from "react-server-dom-webpack/client";
import {callServer} from "some-router/call-server";
export const action = createServerReference('1234#action', callServer);
```
The technique I use here is that the compiled output has to call
`createServerReference(id, callServer)` with the `$$id` and proxy
implementation. We then return a proxy function that is registered with
a WeakMap to the particular instance of the Flight Client.
This might be hard to implement because it requires emitting module
imports to a specific stateful runtime module in the compiler. A benefit
is that this ensures that this particular reference is locked to a
specific client if there are multiple - e.g. talking to different
servers.
It's fairly arbitrary whether we use a WeakMap technique (like we do on
the client) vs an `$$id` (like we do on the server). Not sure what's
best overall. The WeakMap is nice because it doesn't leak implementation
details that might be abused to consumers. We should probably pick one
and unify.
DiffTrain build for commit b600620.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This lets the client bundle encode Server References without them first being passed from an RSC payload. Like if you just import
"use server"from the client. A bundler could already emit these proxies to be called on the client but the subtle difference is that those proxies couldn't be passed back into the server by reference. They have to be registered with React.We don't currently implement importing
"use server"from client components in the reference implementation. It'd need to expand the Webpack plugin with a loader that rewrites files with the"use server"in the client bundle.->
The technique I use here is that the compiled output has to call
createServerReference(id, callServer)with the$$idand proxy implementation. We then return a proxy function that is registered with a WeakMap to the particular instance of the Flight Client.This might be hard to implement because it requires emitting module imports to a specific stateful runtime module in the compiler. A benefit is that this ensures that this particular reference is locked to a specific client if there are multiple - e.g. talking to different servers.
It's fairly arbitrary whether we use a WeakMap technique (like we do on the client) vs an
$$id(like we do on the server). Not sure what's best overall. The WeakMap is nice because it doesn't leak implementation details that might be abused to consumers. We should probably pick one and unify.