Enhancing Forms with React Server Components

In this talk, we explore the application of React Server Components (RSC) to elevate the functionality and efficiency of forms. We will touch upon the core principles of RSC and their specific benefits for form development, such as improved load times and streamlined server-side processing. Additionally, we’ll learn the latest advancements in React 19 and the introduction of multiple new hooks.

Attendees will gain insights into practical strategies for integrating RSC into forms, focusing on enhancing user experience and reducing front-end complexities.

Transcript

1. Enhancing Forms with React Server Components Aurora Walberg Scharff @aurorascharff
2. Introduction > Aurora Walberg Scharff > Consultant at Inmeta > Norway, Oslo > Full-stack, web-focused: active RSC developer
3. Singe Page Applications
4. Singe Page Applications × Slow initial load, blank screens × Needs backend for safe form submissions to the database
5. Sever-Side Rendering No blank screens, but: × Longer total time to interactive × Seemingly interactive elements don’t work
6. Pages Router Struggles × Manual creation of API endpoints × Need for tRPC for type safety × Excess, messy code × Not a good DX async function onSubmit(event: FormEvent<HTMLFormElement>) { event.preventDefault(); setIsLoading(true); setError(null); // Clear previous erro when a new request starts try { const formData = new FormData(event.currentTarget); const response = await fetch('/api/submit', { body: formData, method: 'POST', }); if (!response.ok) { throw new Error('Failed to submit data. Please try again.'); } // Handle response if necessary const data = await response.json(); // ... } catch (error) { // Capture the error message to disp to the user setError(error.message);
7. React Server Components √ Fetch data asynchronously inside components √ Access backend resources √ Reduce bundle size √ Build performant apps with good DX
8. https://en.wikipedia.org/wiki/Progressive_enhancement Progressive Enhancement
9. “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
10. Task: Enhance forms with RSC
11. Task: Enhance forms with RSC > RSC framework: Next.js with App Router > React 18 features > useTransition()
12. Task: Enhance forms with RSC > RSC framework: Next.js with App Router > React 18 features > useTransition() > React Canary features (available in App Router) > Server Actions > <form> > useFormState() > useFormStatus() > useOptimistic()
13. useTransition() https://react.dev/reference/react/useTransition
14. Server Actions https://react.dev/reference/react/use-server
15. <form> https://react.dev/reference/react-dom/components/form
16. useFormStatus() https://react.dev/reference/react-dom/hooks/useFormState
17. useFormState() https://react.dev/reference/react-dom/hooks/useFormStatus
18. useOptimistic() https://react.dev/reference/react/useOptimistic
19. Demo
20. Actually…
21. GitHub Repo aurorascharff/next14-remix-jokes-rebuild Branch: forms-demo-completed
22. References > https://react.dev/reference/react > https://nextjs.org/docs/app/building-your- application/data-fetching/server-actions-and- mutations
23. Merci Twitter: @aurorascharff GitHub: @aurorascharff Blog: aurorascharff.no