server functions now

Also improve test reliability

Author: kentcdodds

README.md

@@ -1,10 +1,10 @@
 <div>
-  <h1 align="center"><a href="https://www.epicweb.dev/workshops">React Server Components and Actions</a></h1>
+  <h1 align="center"><a href="https://www.epicweb.dev/workshops">React Server Components and Functions</a></h1>
   <strong>
-    Understand React Server Components and Server Actions by building a framework with them.
+    Understand React Server Components and Server Functions by building a framework with them.
   </strong>
   <p>
-    In this workshop we'll be building a framework built on React Server Components and Server Actions from scratch. No build tools. No TypeScript, no Vite, no JSX. Just the Browser, Node.js, and React. This is how you develop a <strong>deep</strong> understanding of something. Let's go!
+    In this workshop we'll be building a framework built on React Server Components and Server Functions from scratch. No build tools. No TypeScript, no Vite, no JSX. Just the Browser, Node.js, and React. This is how you develop a <strong>deep</strong> understanding of something. Let's go!
   </p>
 </div>
 

exercises/02.server-components/README.mdx

@@ -42,7 +42,7 @@ Let's compare initial render of a SPA that uses JSON with a SPA that uses RSCs:
 
 </details>
 
-![A flowchart for React Server Components and actions as described below](/images/super-simple-rsc-initial-render.png)
+![A flowchart for React Server Components and Functions as described below](/images/super-simple-rsc-initial-render.png)
 
 <details>
 <summary>Here's a bullet-point text version of the flowchart:</summary>

exercises/04.router/02.problem.pending-ui/tests/pending-ui.test.js

@@ -15,7 +15,9 @@ test('should display pending UI when performing a search and selecting a ship',
 
 	// simulate a slow network for the /rsc endpoint so we force the pending UI to show up
 	await page.route('/rsc/*', async route => {
-		await new Promise(resolve => setTimeout(resolve, 400))
+		await new Promise(resolve =>
+			setTimeout(resolve, process.env.CI ? 1000 : 400),
+		)
 		await route.continue()
 	})
 

exercises/04.router/02.solution.pending-ui/tests/pending-ui.test.js

@@ -15,7 +15,9 @@ test('should display pending UI when performing a search and selecting a ship',
 
 	// simulate a slow network for the /rsc endpoint so we force the pending UI to show up
 	await page.route('/rsc/*', async route => {
-		await new Promise(resolve => setTimeout(resolve, 400))
+		await new Promise(resolve =>
+			setTimeout(resolve, process.env.CI ? 1000 : 400),
+		)
 		await route.continue()
 	})
 

exercises/04.router/05.problem.cache/tests/cache.test.js

@@ -9,7 +9,9 @@ test('going forward and backward in history updates the UI', async ({
 
 	// simulate a slow network for the /rsc endpoint so we force the pending UI to show up
 	await page.route('/rsc/*', async route => {
-		await new Promise(resolve => setTimeout(resolve, 400))
+		await new Promise(resolve =>
+			setTimeout(resolve, process.env.CI ? 1000 : 400),
+		)
 		await route.continue()
 	})
 

exercises/04.router/05.solution.cache/tests/cache.test.js

@@ -9,7 +9,9 @@ test('going forward and backward in history updates the UI', async ({
 
 	// simulate a slow network for the /rsc endpoint so we force the pending UI to show up
 	await page.route('/rsc/*', async route => {
-		await new Promise(resolve => setTimeout(resolve, 400))
+		await new Promise(resolve =>
+			setTimeout(resolve, process.env.CI ? 1000 : 400),
+		)
 		await route.continue()
 	})
 

exercises/05.actions/README.mdx

@@ -17,12 +17,26 @@ submission is often a challenge (and it's different in every app).
 In React's quest to "compose all the things," React has a solution to this
 problem in the form of "server actions."
 
-Server actions are similar to client components in many ways. The RSC payload
-carries with it a reference to the action you wish to perform and when the form
-is submitted, the server gets that reference so it knows the right function to
-call.
-
-In practice, what this means is you get to pass a server-only function to a
+Server actions are a subset of server functions. Server functions are similar to
+client components in many ways. The RSC payload carries with it a reference to
+the function you wish to perform and when the form is submitted, the server gets
+that reference so it knows the right function to call.
+
+To expose these server functions to be called from the client, you use the
+`'use server'` directive. Rather than rewriting the module to not contain the
+function, the `'use server'` directive adds reference information so the RSC
+payload generation can work.
+
+When that function is called, it can be wrapped inside a `startTransition`
+which gives you a pending state for while that server function runs and that
+transition is pending.
+
+To take it a step further, `useActionState` turns that server function into an
+action which resembles the way native form actions without the URL indirection.
+This approach even support progressive enhancement such that if the JavaScript
+has not yet been loaded, the form will act like a normal form submission.
+
+In practice, what this all means is you get to pass a server-only function to a
 client component and that component can call the function when it needs to.
 
 Here's an example of this:
@@ -113,3 +127,10 @@ use on the client as needed.
 📜 Relevant Docs:
 
 - [`use-server`](https://react.dev/reference/react/use-server)
+- [Server Functions](https://19.react.dev/reference/rsc/server-functions)
+
+<callout-warning>
+	Originally, there was a single concept called "server actions" but later this
+	was split into two concepts: "server actions" and "server functions". Server
+	actions are a subset of server functions, specifically for form submissions.
+</callout-warning>

exercises/FINISHED.mdx

@@ -5,5 +5,5 @@
 Hooray! You're all done! 👏👏
 
 [Welcome to the ranks](https://twitter.com/kentcdodds/status/1773047467413495876)
-of those of us who have implemented a React Server Components and Actions
+of those of us who have implemented a React Server Components and Functions
 framework! 🎉

exercises/README.mdx

@@ -6,8 +6,8 @@
 oriented and to give you your assignments for the workshop!
 
 Today we're going to implement a React framework based on React Server
-Components and Actions! When we're finished with this, you'll have a deep
-understanding of the primitives that power React Server Components and Actions
+Components and Functions! When we're finished with this, you'll have a deep
+understanding of the primitives that power React Server Components and Functions
 which is the future of React.
 
 <callout-danger>
@@ -30,8 +30,8 @@ on under the hood.
 
 <callout-danger>
 	One of the challenges you're going to have to face is understanding the
-	difference between the requirements of React Server Components and Actions vs
-	our own choices in this specific implementation of RSCs. RSCs are a very
+	difference between the requirements of React Server Components and Functions
+	vs our own choices in this specific implementation of RSCs. RSCs are a very
 	low-level primitive and there are lots of ways to accomplish the same thing.
 	Different implementations will have different trade-offs. Try to focus on the
 	overall concepts and not get too bogged down in the specifics of this
@@ -90,7 +90,7 @@ of requesting data from the server and then rendering it on the client, you can
 make a request, have React generate the UI on the server, and send it back to
 the client.
 
-![A flowchart for React Server Components and actions as described below](/images/super-simple-rsc.png)
+![A flowchart for React Server Components and Functions as described below](/images/super-simple-rsc.png)
 
 <details>
 <summary>Here's a bullet-point text version of the flowchart:</summary>
@@ -141,3 +141,10 @@ SPAs or even server-rendered apps.
 </callout-info>
 
 Let's go!
+
+🎵 Check out the workshop theme song! 🎶
+
+<VideoEmbed
+	title="Epic React: React Server Components Theme Song"
+	url="https://www.youtube.com/embed/mYX65QSSxYE"
+/>

package.json

@@ -4,7 +4,7 @@
   "epicshop": {
     "title": "React Server Components 🤹",
     "githubRoot": "https://github.com/epicweb-dev/react-server-components/blob/main",
-    "subtitle": "Understand React Server Components and Server Actions by building a framework with them.",
+    "subtitle": "Understand React Server Components and Server Functions by building a framework with them.",
     "product": {
       "host": "www.epicreact.dev",
       "slug": "react-server-components",