Skip to content

Commit 4663ec4

Browse files
updated "use server" docs with data api usage, single flight actions, and minor recommendations (#723)
Co-authored-by: Sarah <gerrardsarah@gmail.com>
1 parent c98179a commit 4663ec4

File tree

1 file changed

+30
-3
lines changed

1 file changed

+30
-3
lines changed

src/routes/solid-start/reference/server/use-server.mdx

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: '"use server"'
33
---
44

5-
`"use server"` will enable actions in the server environment only (i.e. console logging, etc.).
5+
`"use server"` will enable functions that only run on the server.
66

77
```tsx
88
const logHello = async (message: string) => {
@@ -13,7 +13,7 @@ const logHello = async (message: string) => {
1313

1414
## Basic usage
1515

16-
When using `"use server"`, regardless of whether rendering is happening on the server or in the browser, the functions it apply to will only run on the server.
16+
When using `"use server"`, regardless of whether server rendering is enabled, the functions it apply to will only run on the server.
1717

1818
To do this, compilation is used to transform the `"use server"` function into an RPC call to the server.
1919

@@ -38,7 +38,34 @@ const logHello = async (message: string) => {
3838
logHello("Hello");
3939
```
4040

41-
In both of these examples, the `logHello` function, it would only show in the server console regardless of whether rendering was on the server or in the browser
41+
In both of these examples, the `logHello` function, it would only show in the server console regardless of whether rendering was on the server or in the browser.
42+
43+
## Usage with Data APIs
44+
45+
Server functions can be used for fetching data and performing actions on the server.
46+
The following examples show how to use server functions alongside solid-router's data APIs.
47+
48+
```tsx {3}
49+
const getUser = cache((id) => {
50+
"use server";
51+
return db.getUser(id);
52+
}, "users");
53+
54+
const updateUser = action(async (id, data) => {
55+
"use server"
56+
await db.setUser(id, data);
57+
throw redirect("/", { revalidate: getUser.keyFor(id) });
58+
});
59+
60+
```
61+
62+
When `getUser` or `updateUser` are invoked on the client, an http request will be made to the server, which calls the corresponding server function.
63+
64+
## Single-flight actions
65+
66+
In the above example, when the `updateUser` action is called, a redirect is thrown on the server.
67+
Solid Start can handle this redirect on the server instead of propagating it to the client.
68+
The data for the redirected page is fetched and streamed to the client in the same http request as the `updateUser` action, rather than the client requiring a separate http request for the redirected page.
4269

4370
## Serialization
4471

0 commit comments

Comments
 (0)