S
SolidJS2mo ago
sean

Clarification on "use server" comment in SolidStart

"use server" comment only has bearing on query and action functions, right? but how do I avoid bundling the functions that get called inside those HOC functions? example, all my "use server"-ed query functions import the function sql from a lib/database.ts adding "use server" to the sql function doesn't have an effect? if it doesn't have an effect, how do i prevent accidentally bundling the sql function into the client bundle if I, on the off chance, import it client-side? realistically tho, that won't work bc the env vars won't be available client-side. but then there's other issue of unnecessarily adding extra size to the bundle. i also have trouble understanding when should I declare "use sever" on the 1st line of a file. i have a file called api.ts full of query and action functions - instead of adding "use server" to each of them, can I just declare "use server" once at the top of the file? where else can I use "use server" - can I also use it on components to force it to be SSR only and avoid using CSR? i've also read a ton of comments using .server.ts server modules but there's no mention of it in Solid docs. I've only used those in SvelteKit, but curious if we also have them in SolidStart
3 Replies
Madaxen86
Madaxen862mo ago
"use server" means: 1. function called on the server: execute function 2. Function called on the client: fetch from (automatically created) API endpoint which executes the function on the server. This means that server functions are meant to be called on client and server. Query is a helper to dedupe requests of the same data (by short term caching) so you can fetch the data where needed without prop drilling. Actions are for mutations and to invalidate the query cache to force updates/ avoid stale data. They can be used with or without "use server" Toplevel directives means all functions exported from this file will be treated as server functions. You can’t export query and actions from this file as they are meant to be used on the client. Only functions inside can be server functions. For lib/database.ts : you can add the line if (!isServer) throw Error("db may only be used on the server") now if anyone imports a function from this file in a client module it will throw.
sean
seanOP2mo ago
thank u so much for clearing this up! it's so clear now. spent a day spending time with solidstart with your words in mind.
sean
seanOP2mo ago
also, i was about to ask another question for single-flight mutations but i searched on the web first turns out, you made a video about it: https://www.youtube.com/watch?v=s9G_64eHrfY i love you man ❤️
Martin Rapp
YouTube
Actions in SolidStart - How to leverage Single-Flight-Mutations
In this video we'll explore ACTIONS im SolidStart. You will see how actions invalidate the query cache, how you can pinpoint which cached data should be revalidated an how you can use useSubmission to disable form elements during submission of data. We will finally explore how we can leverage Single-Flight-Mutations to speed up your app. Github...

Did you find this page helpful?