Hands-on React Server Components, Server Actions, and Forms in the Next.js App Router

In this workshop, we will explore React's latest features: Server Components, Server Actions, and Forms. Discover how to optimize server-side rendering, enhance application interactivity with Server Actions and multiple new React 19 hooks, and create robust forms for efficient data handling and validation.

Designed for developers of all levels, this workshop provides practical skills to build scalable, performant web applications.

Transcript

1. Hands-on React Server Components, Server Actions, and Forms in the Next.js App Router Aurora Scharff @aurorascharff
2. Introduction > Aurora Scharff > Consultant at Inmeta > Norway, Oslo > Full-stack, web-focused: active RSC developer
3. HVEM ER JEG? Aurora Scharff > Involved in React development community at Meta, represented them at their own conference React Conf in May > Speaking at Next.js Conf in San Francisco in October 2024
4. In this workshop, we will explore React's latest features: Server Components, Server Actions, and Forms. Discover how to optimize server-side rendering, enhance application interactivity with Server Actions and multiple new React 19 hooks, and create robust forms for efficient data handling and validation. Designed for developers of all levels, this workshop provides practical skills to build scalable, performant web applications.
5. Workshop plan > Rendering on the web (slides) > App Router (slides) > Server components > Client components > Introduction to React 19 (slides) > Server functions and forms > React 19 > Exercise (leftover time/take-home)
6. Rendering strategies
7. Static website rendering > Pages are pre-assembled and uploaded to a static host > Simple and efficient > Struggles with dynamic data and impractical to maintain
8. Multi-page applications (MPAs) > HTML and data are dynamically merged on the server > Serves the merged result on page load > Page reloads per request
9. pros √ Optimized for SEO √ Unlimited scalability √ More website insights Multi-page applications (MPAs)
10. pros √ Optimized for SEO √ Unlimited scalability √ More website insights cons × Slower perceived performance × Limited interactivity × Hard to maintain Multi-page applications (MPAs)
11. Single-page applications (SPAs, CSR)
12. Single-page applications, pros ✓ Instantaneous, app-like feel ✓ Easy to debug ✓ Caching capabilities
13. Single-page applications, cons × Slow initial load × SEO suffers × Needs JavaScript × Less secure
14. SPA vs. MPA lifecycle
15. Server-side rendering (SSR) > Pre-render the initial HTML on the server > Fully-formed HTML when opening the page > JavaScript is fetched alongside it
16. Static site generation (SSG) > Pages are pre-assembled and uploaded to a static host > Requires site redeployment whenever data changes > JavaScript is fetched alongside it
17. Server-side rendering (SSR) > Included feature in JavaScript “meta-frameworks” > Build time (SSG) and/or request time (SSR) > Pages generated in the build can be cached
18. Hydration
19. Hydration Hydration is like watering the “dry” HTML with the “water” of interactivity and event handlers. - React core team member Dan Abramov https://github.com/reactwg/react-18/discussions/37
20. Server-side rendering
21. The problem
22. The problem 1. You have to fetch everything before you can show anything 2. You have to load everything before you can hydrate anything 3. You have to hydrate everything before you can interact with anything
23. Strategies to improve it > Partial hydration: only attach JS to certain components > Progressive hydration: lazy load JS to certain components > Selective hydration: priority load JS to certain components based on user interactivity
24. Streaming > Split a request into chunks > Send each chunk as a stream to the client > Render each chunk as it is streamed in
25. https://www.datastax.com/blog/fetch-streams-api-for-faster-ux-generative-ai-apps
26. Next.js App Router
27. Next.js App Router An opinionated React meta-framework by Vercel, offering: > Server-Side Rendering (SSR), Static Site Generation (SSG), ISR (Incremental Site Regeneration) > Automatic code splitting > File-system based routing and nested layouts > API routes > Caching, Image optimization, SEO, ++ > React Server Components
28. “Elkjøp's Digital Transformation” https://vercel.com/blog/elkjops-digital- transformation-with-next-js-and-vercel https://www.kode24.no/artikkel/elkjop- bytta-ut-angular-med-nextjs- morsomste-jeg-har-gjort/81543342 https://www.youtube.com/watch?v=4wOqpP dR1tg
29. > Needs server* > Increased complexity > Harder to deploy > Learning curve > Opinionated Do I need a meta-framework?
30. Do I need a meta-framework?
31. https://www.reddit.com/r/nextjs/comments/12dngvg/small_mistake_lead s_to_3000_bill_from_vercel_and/
32. Starter repo https://github.com/aurorascharff/rsc-workshop- starter
33. React 19
34. https://en.wikipedia.org/wiki/Progressive_enhancement Progressive enhancement
35. “Progressive enhancement is a strategy that puts emphasis on web content first, allowing everyone to access the basic functionality whilst users with additional browser features or faster Internet access receive an enhanced version instead.” https://en.wikipedia.org/wiki/Progressive_enhancement
36. React 19 > Server Components > Actions > Server Functions > Form component > New hooks: useActionState(), useOptimistic(), useFormStatus() > use() > … and more https://react.dev/blog/2024/04/25/react-19
37. Actions
38. Server Functions https://19.react.dev/reference/rsc/server-functions
39. <form> https://19.react.dev/reference/react-dom/components/form
40. useFormStatus() https://19.react.dev/reference/react-dom/hooks/useFormStatus
41. useActionState() https://19.react.dev/reference/react/useActionState
42. useOptimistic() https://19.react.dev/reference/react/useOptimistic
43. Exercise Task 1: Implement Task 2: Handle loading states for mutations with React 19 useFormStatus() https://19.react.dev/reference/react- dom/hooks/useFormStatus const response = confirm('Please confirm you want to delete this record.'); if (!response) {
44. Exercise Task 1: Make the favorite-button work Task 2: Make it progressively enhanced Task 3: Make it optimistic with React 19 useOptimistic() https://react.dev/reference/react/useOptimistic
45. Exercise Task: Make a “chat” or message box for each contact. Think about: 1. Loading states 2. Error states 3. Validation 4. Reducing JS on the client 5. Using new React 19 hooks if relevant
46. Exercise Challenge 1: Make it progressively enhanced Challenge 2: Make it optimistic Challenge 3: Make it both
47. Completed repo + exercise solution https://github.com/aurorascharff/next15-remix-contacts- rebuild-v2 https://next15-remix-contacts-rebuild-v2.vercel.app
48. Diagrams https://shorturl.at/OOhet Slides https://shorturl.at/Aj3GY
49. Resources https://19.react.dev/reference/rsc/server-components https://nextjs.org/docs/app
50. Thank you Twitter: @aurorascharff GitHub: @aurorascharff Blog: aurorascharff.no