Enhancing Forms with React Server Components
summary
Demo uses React 19 server components inside Next.js app router to build a message form that actually submits to the database via a submit message server function (marked with use server and callable as a hidden POST), validates with Zod, revalidates with revalidatePath, enforces a max‑message limit (demo toggles 5 → 8), and progressively enhances with an auto‑scroller client component and useActionState and useFormStatus for pending UI and error handling; optimistic updates use useOptimistic and the form still works with JavaScript disabled.
AI-written summary · about
chapters (12)
- 0:00Introduction to talk
- 2:09React Server Components benefits
- 4:56Demo setup and starting point
- 5:59Making form interactive with server actions
- 8:49Adding automatic scrolling
- 9:54Server-side validation with Zod
- 12:43Handling server responses with useActionState
- 15:38Progressive enhancement without JavaScript
- 17:44Testing form without JavaScript
- 19:30Creating reusable SubmitButton component
- 22:46Optimistic UI with useOptimistic
- 24:53Framework comparison and conclusion
related talks
28mEnhancing Forms with React Server Components
27mEnhancing Forms with React Server Components and React 19
20mEnhancing Forms with React Server Components
26mThe Art of Building Modern Dynamic Forms
27mBuilding better forms with React 19
25mRe-Form the future. Rethinking Form Validations in React
45mReact Server Components: A New Way to Build Fast and Interactive Web Apps
01mMeet Aurora Scharff