add videos

kentcdodds · kentcdodds · commit 7ee4699f33a5 · 2024-08-26T13:18:08.000-06:00
diff --git a/README.md b/README.md
@@ -32,14 +32,15 @@
 
 ## Prerequisites
 
-- Deep experience with React and features like Suspense
+- Deep experience with React and features like Suspense and useDeferredValue
 - Some experience with Node.js will be helpful
 
 ## Pre-workshop Resources
 
 Here are some resources you can read before taking the workshop to get you up to
 speed on some of the tools and concepts we'll be covering:
 
+- [React Suspense Workshop](https://www.epicreact.dev/workshops/react-suspense)
 - ["Mind The Gap" by Ryan Florence at Big Sky Dev Con 2024](https://www.youtube.com/watch?v=zqhE-CepH2g)
 - [React for Two Computers - Dan Abramov at React Conf 2024](https://www.youtube.com/watch?v=wcj5LSVcxJc)
 - [Introducing Zero-Bundle-Size React Server Components](https://react.dev/blog/2020/12/21/data-fetching-with-react-server-components)
diff --git a/exercises/01.init/01.problem.static/README.mdx b/exercises/01.init/01.problem.static/README.mdx
@@ -1,5 +1,7 @@
 # Static React App
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/static-react-app" />
+
 👨‍💼 We've got an app all ready to go, we just need things wired up so the hono.js
 app serves our static assets properly as well as our endpoint for data.
 
diff --git a/exercises/01.init/01.solution.static/README.mdx b/exercises/01.init/01.solution.static/README.mdx
@@ -1,5 +1,7 @@
 # Static React App
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/static-react-app/solution" />
+
 👨‍💼 Great work! Hopefully now you have a good idea of how the app works
 currently. I know the lack of JSX support is a little much, but don't worry, you
 got this!
diff --git a/exercises/01.init/FINISHED.mdx b/exercises/01.init/FINISHED.mdx
@@ -1,5 +1,7 @@
 # Warm Up
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/dad-joke-break-warm-up" />
+
 👨‍💼 Whatever your server-side architecture, every web application will have these
 bits. So that was a good place for us to start for the warm up. Don't forget to
 write down what you learned!
diff --git a/exercises/01.init/README.mdx b/exercises/01.init/README.mdx
@@ -1,5 +1,7 @@
 # Warm Up
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/intro-to-warm-up" />
+
 This first exercise is just a warm up to get you familiar with the application
 we're building for today. The key things you need to understand from this
 exercise are:
diff --git a/exercises/02.server-components/01.problem.rsc/README.mdx b/exercises/02.server-components/01.problem.rsc/README.mdx
@@ -1,5 +1,7 @@
 # RSCs
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/rscs" />
+
 👨‍💼 Right now we have to load all the data of our app and pass the result as
 props to our components. Additionally, we're sending a bunch of code to the
 client to render a page that really doesn't need to be on the client. We want
diff --git a/exercises/02.server-components/01.solution.rsc/README.mdx b/exercises/02.server-components/01.solution.rsc/README.mdx
@@ -1,5 +1,7 @@
 # RSCs
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/rscs/solution" />
+
 👨‍💼 Phew, it took a bit of work to get our server environment ready to generate
 RSC content, but now that it is, we're no longer sending **any** custom
 JavaScript to the client other than what's in <InlineFile file="ui/index.js" />
diff --git a/exercises/02.server-components/02.problem.async-components/README.mdx b/exercises/02.server-components/02.problem.async-components/README.mdx
@@ -1,5 +1,7 @@
 # Async Components
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/async-components" />
+
 👨‍💼 Now that we have RSCs running on our server, our server components can be
 `async`! This means we no longer have to worry about loading all of our data
 before we render our components and passing that data as props. Instead, we can
diff --git a/exercises/02.server-components/02.solution.async-components/README.mdx b/exercises/02.server-components/02.solution.async-components/README.mdx
@@ -1,5 +1,7 @@
 # Async Components
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/async-components/solution" />
+
 👨‍💼 Isn't that great!? Now our components are encapsulating so much about
 themselves. Composition FOR THE WIN! 🎉 On top of that, before these components
 were in the browser and didn't have access to the database directly. Now we have
diff --git a/exercises/02.server-components/03.problem.streaming/README.mdx b/exercises/02.server-components/03.problem.streaming/README.mdx
@@ -1,5 +1,7 @@
 # Streaming
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/streaming" />
+
 🧝‍♂️ I've added a long delay to the `searchShips` API to make the improvements
 here more noticable. Check <InlineFile file="db/ship-api.js" line={14} /> to see
 how.
diff --git a/exercises/02.server-components/03.solution.streaming/README.mdx b/exercises/02.server-components/03.solution.streaming/README.mdx
@@ -1,5 +1,7 @@
 # Streaming
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/streaming/solution" />
+
 👨‍💼 Great! Now we're able to load the shell of application and things will stream
 in as they're ready. Again, this could be improved with server-side rendering,
 but for now we're in a better state than before!
diff --git a/exercises/02.server-components/04.problem.server-context/README.mdx b/exercises/02.server-components/04.problem.server-context/README.mdx
@@ -1,5 +1,7 @@
 # Server Context
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/server-context" />
+
 👨‍💼 It's kind of annoying to have to send the `search` and `shipId` props down
 through the `App` to all our components below. It would be nice if we could
 use context to share these values...
diff --git a/exercises/02.server-components/04.solution.server-context/README.mdx b/exercises/02.server-components/04.solution.server-context/README.mdx
@@ -1,5 +1,7 @@
 # Server Context
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/server-context/solution" />
+
 👨‍💼 Great work! Now we have access to request data (like the `shipId` param and
 the `search` query param) through our `AsyncLocalStorage` object.
 
diff --git a/exercises/02.server-components/FINISHED.mdx b/exercises/02.server-components/FINISHED.mdx
@@ -1,5 +1,7 @@
 # Server Components
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/dad-joke-break-server-components" />
+
 👨‍💼 It's cool how the RSC work the React team fits in so nicely with the async
 primitives React has to offer like `use` and `Suspense`. It also works nicely
 with error boundaries, but those require client-side code so we'll get to that
diff --git a/exercises/02.server-components/README.mdx b/exercises/02.server-components/README.mdx
@@ -1,5 +1,7 @@
 # Server Components
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/intro-to-server-components" />
+
 The vast majority of React applications have both of these issues:
 
 1. Data is subject to either cascading waterfalls or prop drilling.
diff --git a/exercises/03.client-components/01.problem.loader/README.mdx b/exercises/03.client-components/01.problem.loader/README.mdx
@@ -1,5 +1,7 @@
 # Node.js Loader
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/node.js-loader" />
+
 👨‍💼 Alright, we're going to get our server ready to start handling `'use client'`
 modules because we want to add some client-side interactivity to our app.
 
diff --git a/exercises/03.client-components/01.solution.loader/README.mdx b/exercises/03.client-components/01.solution.loader/README.mdx
@@ -1,5 +1,7 @@
 # Node.js Loader
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/node.js-loader/solution" />
+
 👨‍💼 Great job!
 
 🦉 So when Node.js imports the <InlineFile file="ui/edit-text.js" /> file,
diff --git a/exercises/03.client-components/FINISHED.mdx b/exercises/03.client-components/FINISHED.mdx
@@ -1,4 +1,6 @@
 # Client Components
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/dad-joke-break-client-components" />
+
 👨‍💼 Well done! Now you understand how React Server Components give us composition
 from the server to the client. Great job! 🎉
diff --git a/exercises/03.client-components/README.mdx b/exercises/03.client-components/README.mdx
@@ -1,5 +1,7 @@
 # Client Components
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/intro-to-client-components" />
+
 Rendering things on the server works well. We can even click on links and
 because we have state in the URL (whether in URL segment params or search query
 params), our application will update as the user navigates around. We could even
diff --git a/exercises/04.router/01.problem.router/README.mdx b/exercises/04.router/01.problem.router/README.mdx
@@ -1,5 +1,7 @@
 # Client Router
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/client-router" />
+
 👨‍💼 In our <InlineFile file="ui/ship-search.js" /> file, we have our search form
 and the list of results which have links. The form and the list of results
 technically all works, but triggers full page refreshes which we'd love to
diff --git a/exercises/04.router/01.solution.router/README.mdx b/exercises/04.router/01.solution.router/README.mdx
@@ -1,3 +1,5 @@
 # Client Router
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/client-router/solution" />
+
 👨‍💼 Great work! We can now navigate around without full-page reloads.
diff --git a/exercises/04.router/02.problem.pending-ui/README.mdx b/exercises/04.router/02.problem.pending-ui/README.mdx
@@ -1,5 +1,7 @@
 # Pending UI
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/pending-ui" />
+
 👨‍💼 Sometimes our users are on slow networks so we should give them good feedback
 when they interact with our application.
 
diff --git a/exercises/04.router/02.solution.pending-ui/README.mdx b/exercises/04.router/02.solution.pending-ui/README.mdx
@@ -1,5 +1,7 @@
 # Pending UI
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/pending-ui/solution" />
+
 👨‍💼 Great! The URL is the source of truth. We can provide our components useful
 information about the transitions going on so they can display pending UI as
 needed.
diff --git a/exercises/04.router/03.problem.race-conditions/README.mdx b/exercises/04.router/03.problem.race-conditions/README.mdx
@@ -1,5 +1,7 @@
 # Race Conditions
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/race-conditions" />
+
 👨‍💼 Networks are unpredictable. Let's imagine the user clicks around a lot and
 that triggers several network requests:
 
diff --git a/exercises/04.router/03.solution.race-conditions/README.mdx b/exercises/04.router/03.solution.race-conditions/README.mdx
@@ -1,4 +1,6 @@
 # Race Conditions
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/race-conditions/solution" />
+
 👨‍💼 Great! This is a simple thing to solve, but definitely an important one in
 every router. And you did a great job!
diff --git a/exercises/04.router/04.problem.history/README.mdx b/exercises/04.router/04.problem.history/README.mdx
@@ -1,5 +1,7 @@
 # History
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/history" />
+
 👨‍💼 You may have noticed that hitting the back and forward buttons in the browser
 does not work. This is because the browser is not aware of the state changes
 that are happening in the application. To fix this, we need to add an event
diff --git a/exercises/04.router/04.solution.history/README.mdx b/exercises/04.router/04.solution.history/README.mdx
@@ -1,4 +1,6 @@
 # History
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/history/solution" />
+
 👨‍💼 Stellar! Now when we hit forward and back we get the UI updating. But oddly
 we're getting our suspense fallbacks rendering. Let's handle that next.
diff --git a/exercises/04.router/05.problem.cache/README.mdx b/exercises/04.router/05.problem.cache/README.mdx
@@ -1,5 +1,7 @@
 # Cache
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/cache" />
+
 👨‍💼 When we hit the back/forward buttons, we're getting our suspense boundaries
 for a bit. This is confusing because we've wrapped our content state update
 in `startTransition` which should keep the old UI around until the new one is
diff --git a/exercises/04.router/05.solution.cache/README.mdx b/exercises/04.router/05.solution.cache/README.mdx
@@ -1,4 +1,6 @@
 # Cache
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/cache/solution" />
+
 👨‍💼 Hooray! Now we can go back and forward without any delay. This looks much
 better! Thanks.
diff --git a/exercises/04.router/FINISHED.mdx b/exercises/04.router/FINISHED.mdx
@@ -1,5 +1,7 @@
 # Client Router
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/dad-joke-break-client-router" />
+
 👨‍💼 React Server Components really rely on integration with your router to handle
 transitions that affect even parts of the UI that were generated by the server
 components. You've implemented a simple router with integrated RSC support,
diff --git a/exercises/04.router/README.mdx b/exercises/04.router/README.mdx
@@ -1,5 +1,7 @@
 # Client Router
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/intro-to-client-router" />
+
 As the user navigates around your application, you need to keep the UI
 up-to-date with what they should be looking at. Traditionally this means lazy
 loading code for the new routes and requesting relevant data.
diff --git a/exercises/05.actions/01.problem.action-reference/README.mdx b/exercises/05.actions/01.problem.action-reference/README.mdx
@@ -1,5 +1,7 @@
 # Action Reference
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/action-reference" />
+
 👨‍💼 Our users want to be able to change the name of the space ships. So Kellie
 has brought in a new client component for editing the name. All you need to do
 is click on the name in the details view and you'll be able to edit it.
diff --git a/exercises/05.actions/01.solution.action-reference/README.mdx b/exercises/05.actions/01.solution.action-reference/README.mdx
@@ -1,5 +1,7 @@
 # Action Reference
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/action-reference/solution" />
+
 👨‍💼 Great! So this is what our Node.js loader does to the `actions.js` module:
 
 ```js
diff --git a/exercises/05.actions/02.problem.client/README.mdx b/exercises/05.actions/02.problem.client/README.mdx
@@ -1,5 +1,7 @@
 # Client Side
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/client-side" />
+
 When we fetch an RSC payload, it's going to have our action in there.
 `react-server-dom-esm/client` needs to be told what to do when the action is
 called.
diff --git a/exercises/05.actions/02.solution.client/README.mdx b/exercises/05.actions/02.solution.client/README.mdx
@@ -1,3 +1,5 @@
 # Client Side
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/client-side/solution" />
+
 👨‍💼 You've done well. Let's finish this up on the server!
diff --git a/exercises/05.actions/03.problem.server/README.mdx b/exercises/05.actions/03.problem.server/README.mdx
@@ -1,5 +1,7 @@
 # Server Side
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/server-side" />
+
 👨‍💼 Now that we send that reference and any arguments to the backend when we
 submit the form. We need an endpoint that will handle that POST request.
 
diff --git a/exercises/05.actions/03.solution.server/README.mdx b/exercises/05.actions/03.solution.server/README.mdx
@@ -1,4 +1,6 @@
 # Server Side
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/server-side/solution" />
+
 👨‍💼 You did it! Great job! Now our users can change the name of a ship. Awesome.
 There's one more optimization I want to make here though.
diff --git a/exercises/05.actions/04.problem.revalidation/README.mdx b/exercises/05.actions/04.problem.revalidation/README.mdx
@@ -1,5 +1,7 @@
 # Revalidation
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/revalidation" />
+
 👨‍💼 You might notice that once we make a change to the ship name, the list on the
 left doesn't update immediately. We are actually sending the updated UI so
 what's the problem?
diff --git a/exercises/05.actions/04.solution.revalidation/README.mdx b/exercises/05.actions/04.solution.revalidation/README.mdx
@@ -1,5 +1,7 @@
 # Revalidation
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/revalidation/solution" />
+
 👨‍💼 Great job! Now we're getting automatic revalidation of our UI as part of our
 actions. This is a great way to ensure that our UI is always up-to-date with the
 latest data.
diff --git a/exercises/05.actions/05.problem.history-revalidation/README.mdx b/exercises/05.actions/05.problem.history-revalidation/README.mdx
@@ -1,5 +1,7 @@
 # History Revalidation
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/history-revalidation" />
+
 👨‍💼 You might notice that now if you make a change to one of the ships, then hit
 the back button the change will be lost. This is because the history is not
 being revalidated when the back button is clicked.
diff --git a/exercises/05.actions/05.solution.history-revalidation/README.mdx b/exercises/05.actions/05.solution.history-revalidation/README.mdx
@@ -1,5 +1,7 @@
 # History Revalidation
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/history-revalidation/solution" />
+
 👨‍💼 Stellar! You should be proud of yourself for making such a great user
 experience when the user hits forward and back.
 
diff --git a/exercises/05.actions/FINISHED.mdx b/exercises/05.actions/FINISHED.mdx
@@ -1,3 +1,5 @@
 # Server Actions
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/dad-joke-break-server-actions" />
+
 👨‍💼 Well done! You've now implemented server actions!
diff --git a/exercises/05.actions/README.mdx b/exercises/05.actions/README.mdx
@@ -1,5 +1,7 @@
 # Server Actions
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/intro-to-server-actions" />
+
 Most applications are better when you can interact with them and change the data
 they display. This is called "mutation."
 
diff --git a/exercises/FINISHED.mdx b/exercises/FINISHED.mdx
@@ -1,5 +1,7 @@
 # 🤹 React Server Components
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/react-server-components-outro" />
+
 Hooray! You're all done! 👏👏
 
 [Welcome to the ranks](https://twitter.com/kentcdodds/status/1773047467413495876)
diff --git a/exercises/README.mdx b/exercises/README.mdx
@@ -1,5 +1,7 @@
 # React Server Components 🤹
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-server-components/react-server-components-intro" />
+
 👨‍💼 Hello, my name is Peter the Product Manager. I'm here to help you get
 oriented and to give you your assignments for the workshop!
 
