Slide 1

Slide 1 text

Enhancing Forms with React Server Components Aurora Scharff @aurorascharff

Slide 2

Slide 2 text

Introduction > Aurora Scharff > Norway, Oslo > Consultant at Inmeta > Microsoft MVP in web dev > Active RSC developer with Next.js App Router

Slide 3

Slide 3 text

Single-page applications

Slide 4

Slide 4 text

× Slow initial load, blank screens × Needs backend for safe form submissions to the database Single-page applications

Slide 5

Slide 5 text

Server-side rendering No blank screens, but: × Longer total time to interactive × Seemingly interactive elements don’t work

Slide 6

Slide 6 text

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) { 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);

Slide 7

Slide 7 text

React Server Components

Slide 8

Slide 8 text

Partial hydration

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

React Server Components √ Fetch data asynchronously inside components √ Access backend resources √ Reduce bundle size √ Build performant apps with good DX

Slide 12

Slide 12 text

Task: Enhance forms with RSC > RSC framework: Next.js with App Router

Slide 13

Slide 13 text

Task: Enhance forms with RSC > RSC framework: Next.js with App Router > React 19 features (available in App Router) > Server Functions > > useActionState() > useFormStatus() > useOptimistic()

Slide 14

Slide 14 text

Server Functions https://19.react.dev/reference/rsc/server-functions

Slide 15

Slide 15 text

https://19.react.dev/reference/react-dom/components/form

Slide 16

Slide 16 text

useFormStatus() https://19.react.dev/reference/react-dom/hooks/useFormStatus

Slide 17

Slide 17 text

useActionState() https://19.react.dev/reference/react/useActionState

Slide 18

Slide 18 text

useOptimistic() https://19.react.dev/reference/react/useOptimistic

Slide 19

Slide 19 text

Demo

Slide 20

Slide 20 text

Actually…

Slide 21

Slide 21 text

GitHub Repo aurorascharff/next14-message-box

Slide 22

Slide 22 text

References > https://19.react.dev/reference/react > https://nextjs.org/docs/app/building-your- application/data-fetching/server-actions-and- mutations

Slide 23

Slide 23 text

Thank you Twitter: @aurorascharff GitHub: @aurorascharff Blog: aurorascharff.no