S
SolidJS•2mo ago
T.

Calling a "use server"; function in a ClientOnly component?

Hi - can a ClientOnly component call a function defined in a "use server"; lib file? Will the call be translated to a fetch to the server?
2 Replies
peerreynders
peerreynders•2mo ago
"use server"; lib file?
While it does work "use server" at the top of the module (i.e. for the entire module) is generally discouraged. 
const logHello = async (message: string) => {
  "use server";
  console.log(message);
};
const logHello = async (message: string) => {
  "use server";
  console.log(message);
};
The function scope form is preferred. And as indicated logHello will "just work" inside a client component. However what looks like "just a function call" in the source code comes with all the constraints and limitations of a fetch over a real world network. In other words you want to avoid an overly "chatty" use of "use server" which will more than likely negatively impact UX. For this reason "use server" is typically combined with the data APIs: - query which wraps accessors so that results can be - preloaded on hover reducing latency and waterfalls on navigation - shared among multiple components on the page with just a single request. - action for server mutations which can be reactively monitored via useSubmission(). Ultimately you only want to reach out to the server when you have a really good (and often course grained) reason to do so.
Madaxen86
Madaxen86•2mo ago
You can use just wrap it in createAsync and it will be replaced with an RPC call and returns the data in as an accessor.

Did you find this page helpful?