Enable passing Server References from Server to Client #26124
Merged
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
serverreferences
branch
2 times, most recently
from
c05caee to
b2c90c0
Compare
gaearon
reviewed
Feb 8, 2023
| const PROMISE_PROTOTYPE = Promise.prototype; | ||
|
|
||
| // Patch bind on the server to ensure that this creates another |
There was a problem hiding this comment.
Is this a convenience or necessity? Having bind work on them. Why only bind? What happens if you wrap and call inside instead? I guess it’s a normal function then.
There was a problem hiding this comment.
If you wrap in a closure, then that closure needs to opt back into "use server" so it's just like any other closure. bind is special because it's the only thing that creates a built-in closure.
sebmarkbage
force-pushed
the
serverreferences
branch
3 times, most recently
from
ee97b02 to
f928095
Compare
As well as a callback for invoking them.
This is not needed on the client since just regular bind works there.
Module is ambiguous since there's both client and server modules. It also actually refers to a specific export name.
Wired up an example of how to call into the server
sebmarkbage
force-pushed
the
serverreferences
branch
from
f928095 to
b35a364
Compare
sebmarkbage
commented
Feb 9, 2023
Comment on lines
+7
to
+21
| fetch('http://localhost:3001'), | ||
| { | ||
| callServer(id, args) { | ||
| const response = fetch('http://localhost:3001', { | ||
| method: 'POST', | ||
| cors: 'cors', | ||
| headers: { | ||
| 'rsc-action': JSON.stringify({filepath: id.id, name: id.name}), | ||
| }, | ||
| body: JSON.stringify(args), | ||
| }); | ||
| return ReactServerDOMReader.createFromFetch(response); | ||
| }, | ||
| } | ||
| ); |
There was a problem hiding this comment.
This is pretty cool tbh.
acdlite
reviewed
Feb 10, 2023
| localNames.set(node.declaration.id.name, 'default'); | ||
| localTypes.set(node.declaration.id.name, 'function'); | ||
| } else { | ||
| // TODO: This needs to be rewritten inline because it doesn't have a local name. |
There was a problem hiding this comment.
makes sense, maybe could error for now so if someone discovers it they get an error message
There was a problem hiding this comment.
I'm hesitant to add any errors in this one since it's just a pass through and you can use it server->server. E.g. a nested object wouldn't error. Besides, nobody actually uses this.
acdlite
approved these changes
Feb 10, 2023
github-actions bot
pushed a commit
that referenced
this pull request
Feb 10, 2023
This is the first of a series of PRs, that let you pass functions, by reference, to the client and back. E.g. through Server Context. It's like client references but they're opaque on the client and resolved on the server. To do this, for security, you must opt-in to exposing these functions to the client using the `"use server"` directive. The `"use client"` directive lets you enter the client from the server. The `"use server"` directive lets you enter the server from the client. This works by tagging those functions as Server References. We could potentially expand this to other non-serializable or stateful objects too like classes. This only implements server->server CJS imports and server->server ESM imports. We really should add a loader to the webpack plug-in for client->server imports too. I'll leave closures as an exercise for integrators. You can't "call" a client reference on the server, however, you can "call" a server reference on the client. This invokes a callback on the Flight client options called `callServer`. This lets a router implement calling back to the server. Effectively creating an RPC. This is using JSON for serializing those arguments but more utils coming from client->server serialization. DiffTrain build for [ef9f6e7](ef9f6e7) [View git log for this commit](https://github.com/facebook/react/commits/ef9f6e77b8ef968eee659ae797da4bdc07bbbde3)
naugtur
reviewed
Feb 14, 2023
| Function.prototype.bind = (function bind(this: any, self: any) { | ||
| // $FlowFixMe[unsupported-syntax] | ||
| const newFn = originalBind.apply(this, arguments); | ||
| if (this.$$typeof === SERVER_REFERENCE) { |
There was a problem hiding this comment.
@sebmarkbage Since you already control the functions you need the special behavior for, judging by the $$typeof presence, there's no need to override the global prototype to preserve it across bind calls. bind preserves the prototype chain.
const SERVER_REFERENCE = Symbol.for('server');
const put$$On = (fn) => {
const ServerFunctionProto = Object.create(Function.prototype);
ServerFunctionProto.$$typeof = SERVER_REFERENCE;
Object.setPrototypeOf(fn, ServerFunctionProto);
}
// a function
const prebind = (a) => {
console.log(`hello ${a}!`);
};
// the moment in time you control what the function is
put$$On(prebind);
// bind called elsewhere
const newFunction = prebind.bind({}, 'world')
console.log(newFunction.$$typeof)
newFunction()prints
Symbol(server)
hello world!
I might be missing context, but if I can help avoid one more intrinsic prototype override, it's worth a try.
There was a problem hiding this comment.
Luckily this isn’t the real implementation. This is just a reference implementation and then frameworks/bundlers do it differently. This is just showing an example.
Also, keep in mind that this file patches all .js imports using a deprecated Node.js api. Are you not concerned about that? 😛
We could probably get away with defining it as non-enumerable prop on the object along with the rest. setPrototypeOf has some really unfortunate consequences in VMs and doesn’t really help anything.
The issue with these techniques is always that the way people access these in indirections aren’t always the same. Eg libraries do Function.prototype.bind.call(…) to be clever which wouldn’t be caught by this technique.
This feature is non-essential though so probably ok.
|
Pardon me if I missed it, but is this part of any RFC? As the author of Telefunc (an RPC implementation) I'd be very curious to know more about this. If I'm not mistaken this means I can deeply integrate Telefunc with React? That'd be great, because Telefunc's official recommendation for SSR data is to use the framework's built-in mechanism instead of Telefunc (e.g. Next.js recommendation). It'd be great if tools like Telefunc can take over of the entire client-server communication. Also, I wonder if the I really like React becoming a "platform to build delightful frameworks". A proliferation of frameworks is paramount for increased competition and innovation 🦾. Exciting times. |
|
There'll be an RFC once a few more pieces are fleshed out. We typically submit RFCs we're relatively confident in, which requires prototyping and some early attempts to use it. |
facebook-github-bot
pushed a commit
to facebook/react-native
that referenced
this pull request
Feb 15, 2023
Summary: This sync includes the following changes: - **[86c8c8db7](facebook/react@86c8c8db7 )**: test: Don't retry flushActWork if flushUntilNextPaint threw ([#26121](facebook/react#26121)) //<Sebastian Silbermann>// - **[64acd3918](facebook/react@64acd3918 )**: remove unguarded getRootNode call ([#26152](facebook/react#26152)) //<Josh Story>// - **[71cace4d3](facebook/react@71cace4d3 )**: Migrate testRunner from jasmine2 to jest-circus ([#26144](facebook/react#26144)) //<Ming Ye>// - **[c8510227c](facebook/react@c8510227c )**: Treat displayName as undefined ([#26148](facebook/react#26148)) //<Sebastian Markbåge>// - **[55542bc73](facebook/react@55542bc73 )**: Update jest printBasicPrototype config ([#26142](facebook/react#26142)) //<Ming Ye>// - **[6396b6641](facebook/react@6396b6641 )**: Model Float on Hoistables semantics ([#26106](facebook/react#26106)) //<Josh Story>// - **[ef9f6e77b](facebook/react@ef9f6e77b )**: Enable passing Server References from Server to Client ([#26124](facebook/react#26124)) //<Sebastian Markbåge>// - **[35698311d](facebook/react@35698311d )**: Update jest escapeString config ([#26140](facebook/react#26140)) //<Ming Ye>// - **[6ddcbd4f9](facebook/react@6ddcbd4f9 )**: [flow] enable LTI inference mode ([#26104](facebook/react#26104)) //<Jan Kassens>// - **[53b1f69ba](facebook/react@53b1f69ba )**: Implement unstable_getBoundingClientRect in RN Fabric refs ([#26137](facebook/react#26137)) //<Rubén Norte>// - **[594093496](facebook/react@594093496 )**: Update to Jest 29 ([#26088](facebook/react#26088)) //<Ming Ye>// - **[28fcae062](facebook/react@28fcae062 )**: Add support for SVG `transformOrigin` prop ([#26130](facebook/react#26130)) //<Aravind D>// - **[3ff1540e9](facebook/react@3ff1540e9 )**: Prefer JSX in ReactNoop assertions (to combat out-of-memory test runs) ([#26127](facebook/react#26127)) //<Sebastian Silbermann>// - **[01a0c4e12](facebook/react@01a0c4e12 )**: Add Edge Server Builds for workerd / edge-light ([#26116](facebook/react#26116)) //<Sebastian Markbåge>// - **[f0cf832e1](facebook/react@f0cf832e1 )**: Update Flight Fixture to "use client" instead of .client.js ([#26118](facebook/react#26118)) //<Sebastian Markbåge>// - **[03a216070](facebook/react@03a216070 )**: Rename "dom" fork to "dom-node" and "bun" fork to "dom-bun" ([#26117](facebook/react#26117)) //<Sebastian Markbåge>// - **[4bf2113a1](facebook/react@4bf2113a1 )**: Revert "Move the Webpack manifest config to one level deeper ([#26083](facebook/react#26083))" ([#26111](facebook/react#26111)) //<Sebastian Markbåge>// - **[2ef24145e](facebook/react@2ef24145e )**: [flow] upgrade to 0.199.0 ([#26096](facebook/react#26096)) //<Jan Kassens>// - **[922dd7ba5](facebook/react@922dd7ba5 )**: Revert the outer module object to an object ([#26093](facebook/react#26093)) //<Sebastian Markbåge>// - **[9d111ffdf](facebook/react@9d111ffdf )**: Serialize Promises through Flight ([#26086](facebook/react#26086)) //<Sebastian Markbåge>// - **[0ba4698c7](facebook/react@0ba4698c7 )**: Fix async test in React reconciler ([#26087](facebook/react#26087)) //<Ming Ye>// - **[8c234c0de](facebook/react@8c234c0de )**: Move the Webpack manifest config to one level deeper ([#26083](facebook/react#26083)) //<Sebastian Markbåge>// - **[977bccd24](facebook/react@977bccd24 )**: Refactor Flight Encoding ([#26082](facebook/react#26082)) //<Sebastian Markbåge>// - **[d7bb524ad](facebook/react@d7bb524ad )**: [cleanup] Remove unused package jest-mock-scheduler ([#26084](facebook/react#26084)) //<Ming Ye>// - **[6b3083266](facebook/react@6b3083266 )**: Upgrade prettier ([#26081](facebook/react#26081)) //<Jan Kassens>// - **[1f5ce59dd](facebook/react@1f5ce59dd )**: [cleanup] fully roll out warnAboutSpreadingKeyToJSX ([#26080](facebook/react#26080)) //<Jan Kassens>// Changelog: [General][Changed] - React Native sync for revisions 48b687f...fccf3a9 jest_e2e[run_all_tests] Reviewed By: rubennorte Differential Revision: D43305607 fbshipit-source-id: 8da7567ca2a182f4be27788935c2da30a731f83b
OlimpiaZurek
pushed a commit
to OlimpiaZurek/react-native
that referenced
this pull request
May 22, 2023
Summary: This sync includes the following changes: - **[86c8c8db7](facebook/react@86c8c8db7 )**: test: Don't retry flushActWork if flushUntilNextPaint threw ([facebook#26121](facebook/react#26121)) //<Sebastian Silbermann>// - **[64acd3918](facebook/react@64acd3918 )**: remove unguarded getRootNode call ([facebook#26152](facebook/react#26152)) //<Josh Story>// - **[71cace4d3](facebook/react@71cace4d3 )**: Migrate testRunner from jasmine2 to jest-circus ([facebook#26144](facebook/react#26144)) //<Ming Ye>// - **[c8510227c](facebook/react@c8510227c )**: Treat displayName as undefined ([facebook#26148](facebook/react#26148)) //<Sebastian Markbåge>// - **[55542bc73](facebook/react@55542bc73 )**: Update jest printBasicPrototype config ([facebook#26142](facebook/react#26142)) //<Ming Ye>// - **[6396b6641](facebook/react@6396b6641 )**: Model Float on Hoistables semantics ([facebook#26106](facebook/react#26106)) //<Josh Story>// - **[ef9f6e77b](facebook/react@ef9f6e77b )**: Enable passing Server References from Server to Client ([facebook#26124](facebook/react#26124)) //<Sebastian Markbåge>// - **[35698311d](facebook/react@35698311d )**: Update jest escapeString config ([facebook#26140](facebook/react#26140)) //<Ming Ye>// - **[6ddcbd4f9](facebook/react@6ddcbd4f9 )**: [flow] enable LTI inference mode ([facebook#26104](facebook/react#26104)) //<Jan Kassens>// - **[53b1f69ba](facebook/react@53b1f69ba )**: Implement unstable_getBoundingClientRect in RN Fabric refs ([facebook#26137](facebook/react#26137)) //<Rubén Norte>// - **[594093496](facebook/react@594093496 )**: Update to Jest 29 ([facebook#26088](facebook/react#26088)) //<Ming Ye>// - **[28fcae062](facebook/react@28fcae062 )**: Add support for SVG `transformOrigin` prop ([facebook#26130](facebook/react#26130)) //<Aravind D>// - **[3ff1540e9](facebook/react@3ff1540e9 )**: Prefer JSX in ReactNoop assertions (to combat out-of-memory test runs) ([facebook#26127](facebook/react#26127)) //<Sebastian Silbermann>// - **[01a0c4e12](facebook/react@01a0c4e12 )**: Add Edge Server Builds for workerd / edge-light ([facebook#26116](facebook/react#26116)) //<Sebastian Markbåge>// - **[f0cf832e1](facebook/react@f0cf832e1 )**: Update Flight Fixture to "use client" instead of .client.js ([facebook#26118](facebook/react#26118)) //<Sebastian Markbåge>// - **[03a216070](facebook/react@03a216070 )**: Rename "dom" fork to "dom-node" and "bun" fork to "dom-bun" ([facebook#26117](facebook/react#26117)) //<Sebastian Markbåge>// - **[4bf2113a1](facebook/react@4bf2113a1 )**: Revert "Move the Webpack manifest config to one level deeper ([facebook#26083](facebook/react#26083))" ([facebook#26111](facebook/react#26111)) //<Sebastian Markbåge>// - **[2ef24145e](facebook/react@2ef24145e )**: [flow] upgrade to 0.199.0 ([facebook#26096](facebook/react#26096)) //<Jan Kassens>// - **[922dd7ba5](facebook/react@922dd7ba5 )**: Revert the outer module object to an object ([facebook#26093](facebook/react#26093)) //<Sebastian Markbåge>// - **[9d111ffdf](facebook/react@9d111ffdf )**: Serialize Promises through Flight ([facebook#26086](facebook/react#26086)) //<Sebastian Markbåge>// - **[0ba4698c7](facebook/react@0ba4698c7 )**: Fix async test in React reconciler ([facebook#26087](facebook/react#26087)) //<Ming Ye>// - **[8c234c0de](facebook/react@8c234c0de )**: Move the Webpack manifest config to one level deeper ([facebook#26083](facebook/react#26083)) //<Sebastian Markbåge>// - **[977bccd24](facebook/react@977bccd24 )**: Refactor Flight Encoding ([facebook#26082](facebook/react#26082)) //<Sebastian Markbåge>// - **[d7bb524ad](facebook/react@d7bb524ad )**: [cleanup] Remove unused package jest-mock-scheduler ([facebook#26084](facebook/react#26084)) //<Ming Ye>// - **[6b3083266](facebook/react@6b3083266 )**: Upgrade prettier ([facebook#26081](facebook/react#26081)) //<Jan Kassens>// - **[1f5ce59dd](facebook/react@1f5ce59dd )**: [cleanup] fully roll out warnAboutSpreadingKeyToJSX ([facebook#26080](facebook/react#26080)) //<Jan Kassens>// Changelog: [General][Changed] - React Native sync for revisions 48b687f...fccf3a9 jest_e2e[run_all_tests] Reviewed By: rubennorte Differential Revision: D43305607 fbshipit-source-id: 8da7567ca2a182f4be27788935c2da30a731f83b
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 is the first of a series of PRs, that let you pass functions, by reference, to the client and back. E.g. through Server Context. It's like client references but they're opaque on the client and resolved on the server.
To do this, for security, you must opt-in to exposing these functions to the client using the
"use server"directive. The"use client"directive lets you enter the client from the server. The"use server"directive lets you enter the server from the client.This works by tagging those functions as Server References. We could potentially expand this to other non-serializable or stateful objects too like classes.
This only implements server->server CJS imports and server->server ESM imports. We really should add a loader to the webpack plug-in for client->server imports too. I'll leave closures as an exercise for integrators.
You can't "call" a client reference on the server, however, you can "call" a server reference on the client. This invokes a callback on the Flight client options called
callServer. This lets a router implement calling back to the server. Effectively creating an RPC. This is using JSON for serializing those arguments but more utils coming from client->server serialization.