Reusable Server Components in React Workshop
summary
Builds a Next.js app using the app directory and Miro tooling, actually imports moment.js on the server so the client bundle size stays unchanged (demo shows gzip ~18.1 KB and no growth after removal), scaffolds with yarn create miro app, patches and runs yarn start and yarn build, lists Miro boards and item routes with nested layouts, shows a client timer component for live updates versus server-rendered content, warns RSCs are beta and not for production.
AI-written summary · about
chapters (13)
- 0:00Reusable Server Components workshop
- 1:48Workshop tools and setup
- 5:05Why React Server Components matter
- 8:18Next.js boilerplate app
- 19:13Project credentials and running
- 21:04Optimizing bundle with server components
- 26:54Server vs client components
- 31:09Building interactive client components
- 36:14Next.js routing with app dir
- 44:00Displaying Miro boards
- 59:49Deep linking to board items
- 1:05:53Loading and error states
- 1:10:18Workshop recap and next steps
related talks
45mReact 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
54mReact Server Components: A New Way to Build Fast and Interactive Web Apps
43mReact Applications on the Server
45mReact Server Components: Fad or Real Progress?
12mExploring the Power of React Server Components
50mReact Server Components: A New Way to Build Fast and Interactive Web Apps
21mReact Server Components