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

In this workshop, we will explore React's latest features: Server Components, Server Functions, 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 Functions, and Forms in the Next.js App Router Aurora Scharff @aurorascharff
2. Aurora Scharff > Norway, Oslo > Consultant at Crayon Consulting > Microsoft MVP in Web Technologies > Active RSC developer with Next.js App Router
3. Aurora Scharff > Using own experience to teach advanced concepts > Technical blog posts, talks, demo-code, Twitter/X > Involved in React development community, spoke at Metas React Conf in May > + Vercels Next.js Conf 2024 in San Francisco
4. In this workshop, we will explore React's latest features: Server Components, Server Functions, and forms. Discover how to optimize server-side rendering, enhance application interactivity with Server Functions 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 > LUNCH BREAK 12.00 – 13.00 > Introduction to React 19 (slides) > Server Functions, Actions and forms > React 19 > Exercise (leftover time)
6. Rendering on the web
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
34. React 19
35. Features in React 19 Improvements Server APIs Client APIs
36. Relevant features in React 19 Server APIs > Server Components and Client Components > Server Functions Client APIs > Actions > Form component > New hooks: useActionState(), useOptimistic(), useFormStatus() > use() https://react.dev/blog/2024/04/25/react-19
37. Actions https://react.dev/reference/react/useTransition
38. Async Actions https://react.dev/reference/react/useTransition
39. Server Functions https://19.react.dev/reference/rsc/server-functions
40. <form> https://19.react.dev/reference/react-dom/components/form
41. useFormStatus() https://19.react.dev/reference/react-dom/hooks/useFormStatus
42. useActionState() https://19.react.dev/reference/react/useActionState
43. useOptimistic() https://19.react.dev/reference/react/useOptimistic
44. HTTPS://REACT.DEV/REFERENCE/REACT/USE use()
45. https://aurorascharff.no/react-19-cheatsheet
46. Exercise Task: Implement Bonus: Add a confirm modal before deletion const response = confirm('Please confirm you want to delete this record.'); if (response) { // Do something }
47. Exercise Task: Handle loading states for mutations with React 19 useFormStatus() https://19.react.dev/reference/react- dom/hooks/useFormStatus
48. Exercise Task: Make the favorite-button work Bonus: Make it optimistic with React 19 useOptimistic() https://react.dev/reference/react/useOptimistic
49. Exercise Task: Display validation errors with React 19 useActionState() https://react.dev/reference/react /useActionState https://aurorascharff.no/posts/handling-form-validation-errors-and-resets- with-useactionstate/
50. 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
51. Exercise Challenge 1: Make it progressively enhanced Challenge 2: Make it optimistic Challenge 3: Make it both
52. Completed repo https://github.com/aurorascharff/next15-remix-contacts- rebuild-v2 https://next15-remix-contacts-rebuild-v2.vercel.app Deployed URL
53. Diagrams https://shorturl.at/XCC66 Slides https://shorturl.at/Aj3GY
54. Resources > React 19 release-post: https://react.dev/blog/2024/12/05/react-19 > React docs: https://react.dev/reference/react > Next.js docs: https://nextjs.org/docs/app/building-your- application/rendering/composition-patterns
55. Thank you Twitter: @aurorascharff GitHub: @aurorascharff Blog: aurorascharff.no