RSC: actions payload size

[gabrielcsapo]

Hello!

I am working on a project that is using the RSC implementation with react-router.

Any call to an action endpoint results in a 50kb result even if the endpoint results in 0 days being sent across the wire. The action endpoint calls a database function and returns the data. I am seeing in the RSC payload the full route RSC response. Is this expected / what can I do to debug if I am failing out to an edge case.

I can create an example of this, will include the example repo and attach it to this thread.

[gabrielcsapo]

https://github.com/gabrielcsapo/vite-rsc-actions-example-payload Here is the example where every time an action is made, it always responds with the full route response

[gabrielcsapo]

9:I["/@id/__x00__virtual:vite-rsc/client-package-proxy/react-router/internal/react-server-client$$cache=s9j8z9bb6z",[],"Link",1]
a:I["/app/routes/client.tsx$$cache=s9j8z9bb6z",[],"TestHydrated",1]
b:I["/app/routes/client.tsx$$cache=s9j8z9bb6z",[],"TestClientState",1]
c:I["/app/routes/root.client.tsx$$cache=s9j8z9bb6z",[],"GlobalNavigationLoadingBar",1]
d:I["/react-router-vite/server-hmr.tsx$$cache=s9j8z9bb6z",[],"ServerHmr",1]
14:I["/@id/__x00__virtual:vite-rsc/client-package-proxy/react-router/internal/react-server-client$$cache=s9j8z9bb6z",[],"Outlet",1]
21:I["/app/routes/root.client.tsx$$cache=s9j8z9bb6z",[],"DumpError",1]
24:I["/app/routes/home.client.tsx$$cache=s9j8z9bb6z",[],"TestingActionButton",1]
**0:{"type":"action","actionResult":"$@1","rerender":"$@2"}
1:["Hello world","Hello world","Hello world","Hello world","Hello world"]**
4:{"name":"Layout","env":"Server","key":null,"owner":null,"stack":[],"props":{"children":["$","$E(function __wrapper(props) {\n    return __vite_rsc_react__.createElement(\n      __vite_rsc_react__.Fragment,\n      null,\n      __vite_rsc_react__.createElement(async () => {\n              const __m = await __vite_ssr_dynamic_import__(\"/@id/__x00__virtual:vite-rsc/importer-resources?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx\");\n              return __vite_rsc_react__.createElement(__m.Resources);\n            }),\n      __vite_rsc_react__.createElement(value, props),\n    );\n  })",null,{"loaderData":null,"actionData":"$undefined","params":{},"matches":[{"id":"root","pathname":"/","params":{},"data":null,"handle":"$undefined"},{"id":"../routes/home","pathname":"/","params":"$Y","data":null,"handle":"$undefined"}]},null,[],1]}}
3:D"$4"
6:{"name":"","env":"Server","key":null,"owner":"$4","stack":[],"props":{}}
5:D"$6"
8:{"name":"Layout","env":"Server","key":null,"owner":"$4","stack":[],"props":{"children":["$","$E(function __wrapper(props) {\n    return __vite_rsc_react__.createElement(\n      __vite_rsc_react__.Fragment,\n      null,\n      __vite_rsc_react__.createElement(async () => {\n              const __m = await __vite_ssr_dynamic_import__(\"/@id/__x00__virtual:vite-rsc/importer-resources?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx\");\n              return __vite_rsc_react__.createElement(__m.Resources);\n            }),\n      __vite_rsc_react__.createElement(value, props),\n    );\n  })",null,{"loaderData":null,"actionData":"$undefined","params":{},"matches":[{"id":"root","pathname":"/","params":{},"data":null,"handle":"$undefined"},{"id":"../routes/home","pathname":"/","params":"$Y","data":null,"handle":"$undefined"}]},null,[],1]}}
7:D"$8"
:W["log",[],"$8","Server","Layout"]
f:{"name":"default","env":"Server","key":null,"owner":null,"stack":[],"props":{"loaderData":null,"actionData":"$undefined","params":{},"matches":[{"id":"root","pathname":"/","params":{},"data":null,"handle":"$undefined"},{"id":"../routes/home","pathname":"/","params":{},"data":null,"handle":"$undefined"}]}}
e:D"$f"
11:{"name":"","env":"Server","key":null,"owner":"$f","stack":[],"props":{}}
10:D"$11"
13:{"name":"Component","env":"Server","key":null,"owner":"$f","stack":[],"props":{"loaderData":null,"actionData":"$undefined","params":{},"matches":[{"id":"root","pathname":"/","params":{},"data":null,"handle":"$undefined"},{"id":"../routes/home","pathname":"/","params":{},"data":null,"handle":"$undefined"}]}}
12:D"$13"
:W["log",[],"$13","Server","Root"]
12:["$","$L14",null,{},"$13",[],1]
e:["$L10","$12"]
7:["$","html",null,{"lang":"en","children":[["$","head",null,{"children":[["$","meta",null,{"charSet":"utf-8"},"$8",[],1],["$","meta",null,{"name":"viewport","content":"width=device-width, initial-scale=1"},"$8",[],1],["$","title",null,{"children":"React Router Vite"},"$8",[],1]]},"$8",[],1],["$","body",null,{"children":[["$","header",null,{"className":"container px-8 my-8 mx-auto","children":["$","nav",null,{"className":"paper paper-border","children":["$","ul",null,{"className":"flex gap-4 flex-wrap","children":[["$","li",null,{"className":"flex gap-4 not-last:after:block not-last:after:content-['|']","children":["$","$L9",null,{"to":"/","children":"Home"},"$8",[],1]},"$8",[],1],["$","li",null,{"className":"flex gap-4 not-last:after:block","children":["$","$L9",null,{"to":"/about","children":"About"},"$8",[],1]},"$8",[],1],["$","li",null,{"className":"flex-1"},"$8",[],1],["$","li",null,{"className":"flex items-center gap-2 text-gray-500","children":[["$","$La",null,{},"$8",[],1],["$","$Lb",null,{},"$8",[],1],["$","span",null,{"data-testid":"root-style","className":"text-[#0000ff]","children":"[style]"},"$8",[],1]]},"$8",[],1]]},"$8",[],1]},"$8",[],1]},"$8",[],1],["$","$Lc",null,{},"$8",[],1],["$","$Ld",null,{},"$8",[],1],"$e"]},"$8",[],1]]},"$8",[],1]
3:["$L5","$7"]
16:{"name":"Layout","env":"Server","key":null,"owner":null,"stack":[],"props":{"children":["$","$E(function __wrapper(props) {\n    return __vite_rsc_react__.createElement(\n      __vite_rsc_react__.Fragment,\n      null,\n      __vite_rsc_react__.createElement(async () => {\n              const __m = await __vite_ssr_dynamic_import__(\"/@id/__x00__virtual:vite-rsc/importer-resources?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx\");\n              return __vite_rsc_react__.createElement(__m.Resources);\n            }),\n      __vite_rsc_react__.createElement(value, props),\n    );\n  })",null,{"loaderData":null,"actionData":"$undefined","params":{},"error":"$undefined"},null,[],1]}}
15:D"$16"
18:{"name":"","env":"Server","key":null,"owner":"$16","stack":[],"props":{}}
17:D"$18"
1a:{"name":"Layout","env":"Server","key":null,"owner":"$16","stack":[],"props":{"children":["$","$E(function __wrapper(props) {\n    return __vite_rsc_react__.createElement(\n      __vite_rsc_react__.Fragment,\n      null,\n      __vite_rsc_react__.createElement(async () => {\n              const __m = await __vite_ssr_dynamic_import__(\"/@id/__x00__virtual:vite-rsc/importer-resources?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx\");\n              return __vite_rsc_react__.createElement(__m.Resources);\n            }),\n      __vite_rsc_react__.createElement(value, props),\n    );\n  })",null,{"loaderData":null,"actionData":"$undefined","params":{},"error":"$undefined"},null,[],1]}}
19:D"$1a"
:W["log",[],"$1a","Server","Layout"]
1c:{"name":"ErrorBoundary","env":"Server","key":null,"owner":null,"stack":[],"props":{"loaderData":null,"actionData":"$undefined","params":{},"error":"$undefined"}}
1b:D"$1c"
1e:{"name":"","env":"Server","key":null,"owner":"$1c","stack":[],"props":{}}
1d:D"$1e"
20:{"name":"ErrorBoundary","env":"Server","key":null,"owner":"$1c","stack":[],"props":{"loaderData":null,"actionData":"$undefined","params":{},"error":"$undefined"}}
1f:D"$20"
1f:["$","$L21",null,{},"$20",[],1]
1b:["$L1d","$1f"]
19:["$","html",null,{"lang":"en","children":[["$","head",null,{"children":[["$","meta",null,{"charSet":"utf-8"},"$1a",[],1],["$","meta",null,{"name":"viewport","content":"width=device-width, initial-scale=1"},"$1a",[],1],["$","title",null,{"children":"React Router Vite"},"$1a",[],1]]},"$1a",[],1],["$","body",null,{"children":[["$","header",null,{"className":"container px-8 my-8 mx-auto","children":["$","nav",null,{"className":"paper paper-border","children":["$","ul",null,{"className":"flex gap-4 flex-wrap","children":[["$","li",null,{"className":"flex gap-4 not-last:after:block not-last:after:content-['|']","children":["$","$L9",null,{"to":"/","children":"Home"},"$1a",[],1]},"$1a",[],1],["$","li",null,{"className":"flex gap-4 not-last:after:block","children":["$","$L9",null,{"to":"/about","children":"About"},"$1a",[],1]},"$1a",[],1],["$","li",null,{"className":"flex-1"},"$1a",[],1],["$","li",null,{"className":"flex items-center gap-2 text-gray-500","children":[["$","$La",null,{},"$1a",[],1],["$","$Lb",null,{},"$1a",[],1],["$","span",null,{"data-testid":"root-style","className":"text-[#0000ff]","children":"[style]"},"$1a",[],1]]},"$1a",[],1]]},"$1a",[],1]},"$1a",[],1]},"$1a",[],1],["$","$Lc",null,{},"$1a",[],1],["$","$Ld",null,{},"$1a",[],1],"$1b"]},"$1a",[],1]]},"$1a",[],1]
15:["$L17","$19"]
23:{"name":"Component","env":"Server","key":null,"owner":null,"stack":[],"props":{"loaderData":null,"actionData":"$undefined","params":"$2:matches:0:params","matches":[{"id":"root","pathname":"/","params":"$2:matches:0:params","data":null,"handle":"$undefined"},{"id":"../routes/home","pathname":"/","params":"$2:matches:0:params","data":null,"handle":"$undefined"}]}}
22:D"$23"
22:["$","main",null,{"className":"container my-8 px-8 mx-auto","children":["$","article",null,{"className":"paper prose max-w-none","children":[["$","h1",null,{"children":"Home"},"$23",[],1],["$","p",null,{"children":"This is the home page."},"$23",[],1],["$","$L24",null,{},"$23",[],1]]},"$23",[],1]},"$23",[],1]
2:{"type":"render","basename":"$undefined","actionData":null,"errors":null,"loaderData":{"root":null,"../routes/home":null},"location":{"pathname":"/","search":"","hash":"","state":null,"key":"default"},"formState":"$undefined","matches":[{"clientAction":"$undefined","clientLoader":"$undefined","element":"$3","errorElement":"$15","handle":"$undefined","hasAction":false,"hasComponent":true,"hasErrorBoundary":true,"hasLoader":false,"hydrateFallbackElement":"$undefined","id":"root","index":"$undefined","links":"$undefined","meta":"$undefined","params":{},"parentId":"$undefined","path":"","pathname":"/","pathnameBase":"/","shouldRevalidate":"$undefined"},{"clientAction":"$undefined","clientLoader":"$undefined","element":"$22","errorElement":"$undefined","handle":"$undefined","hasAction":false,"hasComponent":true,"hasErrorBoundary":false,"hasLoader":false,"hydrateFallbackElement":"$undefined","id":"../routes/home","index":true,"links":"$undefined","meta":"$undefined","params":"$2:matches:0:params","parentId":"root","path":"$undefined","pathname":"/","pathnameBase":"/","shouldRevalidate":"$undefined"}],"patches":[]}
25:{"name":"Resources","env":"Server","key":null,"owner":"$6","stack":[],"props":{}}
5:D"$25"
5:[["$","link","css:/app/styles.css",{"rel":"stylesheet","precedence":"vite-rsc/importer-resources","href":"/app/styles.css"},"$25",[["eval","\u0000virtual:vite-rsc/importer-resources?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx",9,86],["Resources","\u0000virtual:vite-rsc/importer-resources?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx",9,66]],0],["$","script","js:/@id/__x00__virtual:vite-rsc/importer-resources-browser?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx",{"type":"module","async":true,"src":"/@id/__x00__virtual:vite-rsc/importer-resources-browser?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx"},"$25",[["eval","\u0000virtual:vite-rsc/importer-resources?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx",14,40],["Resources","\u0000virtual:vite-rsc/importer-resources?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx",14,20]],0]]
26:{"name":"Resources","env":"Server","key":null,"owner":"$11","stack":[],"props":{}}
10:D"$26"
10:[["$","link","css:/app/styles.css",{"rel":"stylesheet","precedence":"vite-rsc/importer-resources","href":"/app/styles.css"},"$26",[["eval","\u0000virtual:vite-rsc/importer-resources?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx",9,86],["Resources","\u0000virtual:vite-rsc/importer-resources?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx",9,66]],0],["$","script","js:/@id/__x00__virtual:vite-rsc/importer-resources-browser?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx",{"type":"module","async":true,"src":"/@id/__x00__virtual:vite-rsc/importer-resources-browser?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx"},"$26",[["eval","\u0000virtual:vite-rsc/importer-resources?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx",14,40],["Resources","\u0000virtual:vite-rsc/importer-resources?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx",14,20]],0]]
27:{"name":"Resources","env":"Server","key":null,"owner":"$18","stack":[],"props":{}}
17:D"$27"
17:[["$","link","css:/app/styles.css",{"rel":"stylesheet","precedence":"vite-rsc/importer-resources","href":"/app/styles.css"},"$27",[["eval","\u0000virtual:vite-rsc/importer-resources?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx",9,86],["Resources","\u0000virtual:vite-rsc/importer-resources?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx",9,66]],0],["$","script","js:/@id/__x00__virtual:vite-rsc/importer-resources-browser?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx",{"type":"module","async":true,"src":"/@id/__x00__virtual:vite-rsc/importer-resources-browser?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx"},"$27",[["eval","\u0000virtual:vite-rsc/importer-resources?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx",14,40],["Resources","\u0000virtual:vite-rsc/importer-resources?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx",14,20]],0]]
28:{"name":"Resources","env":"Server","key":null,"owner":"$1e","stack":[],"props":{}}
1d:D"$28"
1d:[["$","link","css:/app/styles.css",{"rel":"stylesheet","precedence":"vite-rsc/importer-resources","href":"/app/styles.css"},"$28",[["eval","\u0000virtual:vite-rsc/importer-resources?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx",9,86],["Resources","\u0000virtual:vite-rsc/importer-resources?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx",9,66]],0],["$","script","js:/@id/__x00__virtual:vite-rsc/importer-resources-browser?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx",{"type":"module","async":true,"src":"/@id/__x00__virtual:vite-rsc/importer-resources-browser?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx"},"$28",[["eval","\u0000virtual:vite-rsc/importer-resources?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx",14,40],["Resources","\u0000virtual:vite-rsc/importer-resources?importer=%2FUsers%2Fgabrielcsapo%2FDownloads%2Fvite-plugin-react-main%202%2Fapp%2Froot.tsx",14,20]],0]]

Here is the example, where the actionResult is bolded to show a payload that should be only a few bytes.

[gabrielcsapo]

To be fair these debugInfo lines go away in production reducing the size drastically, but it seems like the response is too terse in both cases where we already have the payload from the endpoint for rehydration if necessary we should just expect data.

[hi-ogawa]

Yes, this is expected and the framework integration needs to solve this by refining server refetch payload based on own routing convention. If you rely on React router, then please open an issue on https://github.com/remix-run/react-router.

[gabrielcsapo]

Awesome thank you @hi-ogawa

[gabrielcsapo]

https://remix.run/blog/rsc-preview

Also, there's still some work to do around optimizing revalidation. Currently, the entire page is revalidated after server actions. Because server actions aren't tied to a specific route, our current shouldRevalidate approach feels awkward. We're working on a better page revalidation approach that feels great for all use cases.

Took a little sleuthing but figured it out, looks like Ryan is working on it

[hi-ogawa]

Yup, they are aware of and that's why it's still unstable but I think it's fair if you or any users calling out an issue explicitly.
Their latest update is in https://remix.run/blog/react-router-and-react-server-components, which says:

If you're feeling adventurous: We'd encourage you to try our initial unstable RSC APIs and provide feedback, file issues, or even help fix any bugs you run into. We'd love to hear what you think!