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 > Consultant at Inmeta > Norway, Oslo > Full-stack, web-focused: active RSC developer
3. Singe-page applications
4. × Slow initial load, blank screens × Needs backend for safe form submissions to the database Singe-page applications
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. Task: Enhance forms with RSC > RSC framework: Next.js with App Router
9. 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()
10. Server Functions https://19.react.dev/reference/rsc/server-functions
11. <form> https://19.react.dev/reference/react-dom/components/form
12. useFormStatus() https://19.react.dev/reference/react-dom/hooks/useFormStatus
13. useActionState() https://19.react.dev/reference/react/useActionState
14. useOptimistic() https://19.react.dev/reference/react/useOptimistic
15. Demo
16. Actually…
17. GitHub Repo aurorascharff/next14-message-box
18. References > https://19.react.dev/reference/react > https://nextjs.org/docs/app/building-your- application/data-fetching/server-actions-and- mutations
19. Thank you Twitter: @aurorascharff GitHub: @aurorascharff Blog: aurorascharff.no