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 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. Single-page applications
4. × Slow initial load, blank screens × Needs backend for safe form submissions to the database Single-page applications
5. Server-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
8. Partial hydration
11. React Server Components √ Fetch data asynchronously inside components √ Access backend resources √ Reduce bundle size √ Build performant apps with good DX
12. Task: Enhance forms with RSC > RSC framework: Next.js with App Router
13. Task: Enhance forms with RSC > RSC framework: Next.js with App Router > React 19 features (available in App Router) > Server Functions > <form> > useActionState() > useFormStatus() > useOptimistic()
14. Server Functions https://19.react.dev/reference/rsc/server-functions
15. <form> https://19.react.dev/reference/react-dom/components/form
16. useFormStatus() https://19.react.dev/reference/react-dom/hooks/useFormStatus
17. useActionState() https://19.react.dev/reference/react/useActionState
18. useOptimistic() https://19.react.dev/reference/react/useOptimistic
19. Demo
20. Actually…
21. GitHub Repo aurorascharff/next14-message-box
22. References > https://19.react.dev/reference/react > https://nextjs.org/docs/app/building-your- application/data-fetching/server-actions-and- mutations
23. Thank you Twitter: @aurorascharff GitHub: @aurorascharff Blog: aurorascharff.no