Rendering the Future: Building a Dev-First Library With Streaming & Server Components

on YouTube ↗30m

" summary

Builds a React/Next.js component library (Vibes) that natively supports Server Components, streaming with Suspense, and partial pre-rendering so pages can be CDN-served where possible while streaming dynamic parts. Implements a reusable product list skeleton, accepts either sync data or promises via a new streamable type, uses the use() API to resolve promises, and adds a minimal promise cache to prevent infinite rerenders. Demoed on Next.js Canary and Netlify; 40 components planned.

AI-written summary · about

" chapters (12)

1. 0:00Introduction and personal story
2. 3:12Joining Makes Swift and Vibes
3. 5:23Building Vibes component library
4. 7:28Server components and data loading
5. 9:34Streaming and suspense in React
6. 13:30Developer experience challenges
7. 16:20Partial pre-rendering explained
8. 19:48Dynamic rendering in Next.js
9. 22:17React use API and flexibility
10. 24:41Simplifying component wrappers
11. 25:44Handling promise caching
12. 28:35AI and developer perspective

" related talks

• 54mReact Server Components: A New Way to Build Fast and Interactive Web AppsAurora Walberg Scharff · NDC Sydney 2024
• 45mReact Server Components: Fad or Real Progress?Thomas Simonnet · Devoxx France 2024
• 16mStreaming Server Side Rendering simplified with Next.JSMariappan Subramanian · React Nexus 2023
• 45mReact Server Components: A New Way to Build Fast and Interactive Web AppsAurora Walberg Scharff · NDC Oslo 2024
• 21mHow Next.js is delivering React’s vision for the futureSam Selikoff · Next.js Conf 2023
• 31mStreaming React for Faster UIsTejas Kumar · React Boston 2018
• 27mAnd Now You Understand React Server ComponentsKent C. Dodds · React Summit 2024
• 23mLet’s Make A FrameworkTejas Kumar · React Brussels 2023