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. Introduction > Aurora Scharff > Norway, Oslo > Consultant at Inmeta > Microsoft MVP in web dev > Active RSC developer with Next.js App Router
3. Aurora Scharff > Involved in React development community at Meta, represented them at their own conference React Conf in May > Spoke at Next.js Conf in San Francisco in October
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 > Introduction to React 19 (slides) > Server Functions, Actions 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
34. React 19
35. 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
36. Actions
37. Server Functions https://19.react.dev/reference/rsc/server-functions
38. <form> https://19.react.dev/reference/react-dom/components/form
39. useFormStatus() https://19.react.dev/reference/react-dom/hooks/useFormStatus
40. useActionState() https://19.react.dev/reference/react/useActionState
41. useOptimistic() https://19.react.dev/reference/react/useOptimistic
42. use() https://react.dev/reference/react/use
43. Exercise Task 1: Implement const response = confirm('Please confirm you want to delete this record.'); if (!response) { return; }
44. 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) { return; }
45. Exercise Task: Make the favorite-button work Bonus: Make it progressively enhanced Bonus: Make it optimistic with React 19 useOptimistic() https://react.dev/reference/react/useOptimistic
46. Exercise Task: Optimize initial page load time with React 19 use() and <Suspense/> https://react.dev/reference/react/use
47. 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
48. Exercise Challenge 1: Make it progressively enhanced Challenge 2: Make it optimistic Challenge 3: Make it both
49. Completed repo https://github.com/aurorascharff/next15-remix-contacts- rebuild-v2 https://next15-remix-contacts-rebuild-v2.vercel.app Deployed URL
50. Diagrams https://shorturl.at/OOhet Slides https://shorturl.at/Aj3GY
51. Resources https://19.react.dev/reference/rsc/server-components https://nextjs.org/docs/app
52. Thank you Twitter: @aurorascharff GitHub: @aurorascharff Blog: aurorascharff.no