Enhancing your Static Sites with React Server Components

on YouTube ↗16m

" summary

Shows how react server components run at build/CI time inside static sites so components fetch data (GitHub API) and do build-time work (Shiki syntax highlighting) and the generated HTML already contains rendered sponsor cards. Demonstrates a GitHub sponsors component that accepts a username, renders only the first three sponsors (not all ~800), and that enabling this in nextjs config: output export works while still loading JS for client navigation.

AI-written summary · about

" chapters (10)

1. 0:00Introduction
2. 1:11Static sites and limitations
3. 2:35Data fetching approaches
4. 3:58Route-level data fetching
5. 6:45Component-level static data
6. 9:33Static analysis limits
7. 10:17React Server Components intro
8. 11:42Implementing React Server Components in static sites
9. 13:26Advantages of RSCs for static sites
10. 14:53Enabling RSCs in Next.js

" related talks

• 36mBuilding Static Sites with ReactIan Sinnott · Spotlight React 2016
• 12mExploring the Power of React Server ComponentsAdhithi Ravichandran · Next.js Conf 2023
• 14mHow to use React, webpack and other buzzwords if there is no needVarya Stepanova · React Finland 2018
• 32mThe Universality of Static SitesMark Dalgleish · ReactiveConf 2016
• 21mReact Server ComponentsTejas Kumar · React Day Berlin 2023
• 14mStatic Site Generators with JavaScriptNikas Praninskas · jsPoland 2018
• 54mReact Server Components: A New Way to Build Fast and Interactive Web AppsAurora Walberg Scharff · NDC Sydney 2024
• 01h 14mReusable Server Components in React WorkshopMettin Parzinski, Will Bishop · JSworld Conference 2023