Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Enhancing Forms with React Server Components

Aurora Scharff
March 22, 2024
120

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.

Aurora Scharff

March 22, 2024
Tweet

Transcript

  1. Introduction > Aurora Scharff > Consultant at Inmeta > Norway,

    Oslo > Full-stack, web-focused: active RSC developer
  2. × Slow initial load, blank screens × Needs backend for

    safe form submissions to the database Singe-page applications
  3. Sever-side rendering No blank screens, but: × Longer total time

    to interactive × Seemingly interactive elements don’t work
  4. 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);
  5. React Server Components √ Fetch data asynchronously inside components √

    Access backend resources √ Reduce bundle size √ Build performant apps with good DX
  6. 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()