React Server Components Elevating Speed, Interactivity, and User Experience
summary
Shows a concrete Next.js 15 recipe: move async data fetches down into server components, wrap them in Suspense with sized skeletons to avoid CLS, and stream HTML so the page feels interactive even with slow queries. Demonstrates Prisma + Postgres, client-side enhancements (next Form, useRouter + startTransition), and React 19 APIs like use and useOptimistic, plus per-render cache and stale-time caching. Results: FCP/LCP drop to ~0.1s and a Lighthouse score near 99 while backend fetches remain ~2–3s.
AI-written summary · about
chapters (11)
- 0:00Introduction to React server components
- 1:37Understanding server component mechanics
- 4:27Analyzing the demo application
- 8:03Optimizing UX with suspense and streaming
- 11:33Client-side interactivity and hooks
- 14:17Progressive enhancement for search forms
- 17:10Optimistic UI and state management
- 20:38Advanced data fetching and caching
- 24:10Performance gains with partial pre-rendering
- 26:41Alternative search implementation
- 28:26Key takeaways and conclusions
related talks
45mReact Server Components: A New Way to Build Fast and Interactive Web Apps
54mReact Server Components: A New Way to Build Fast and Interactive Web Apps
48mReact Server Components: A New Way to Build Fast and Interactive Web Apps
22mReact - Server Components, Suspense, and the new mental model
21mReact Server Components
31mPerformance wins with React 18
45mReact Server Components: Fad or Real Progress?
30mReact Server Components