What RSCs can do in Next.js today

Transcript

1. What RSCs can do in Next.js today Aurora Scharff / @aurorascharff ▲ DX Engineer, Next.js team REACT SUMMIT AMSTERDAM
2. Why we love React
3. Why we love React • Composable function HomePage() { return ( < <h1>Welcome back</h1> <QuickPlayGrid /> <MostPlayed /> <PlaylistBrowse /> <TopGenresGrid /> < ); }
4. Why we love React function DiscoverPage() { return ( < <h1>Discover</h1> <TopGenresGrid /> <RecommendedTracks /> <PlaylistBrowse /> < ); } • Composable • Self-contained
5. Why we love React function LibraryPage() { return ( < <h1>Your Library</h1> <LibraryGrid /> <PlaylistBrowse /> <TopGenresGrid /> < ); } • Composable • Self-contained • Clear boundaries
6. Agents work this way too
8. Adding data puts composability under pressure
9. useState + useEffect function TopGenresGrid() { const [genres, setGenres] = useState(); const [loading, setLoading] = useState(true); const [error, setError] = useState(); useEffect(() => { fetch('/api/genres') .then(r => r.json()) .then(setGenres) .catch(setError) .finally(() => setLoading(false)); }, []); } • Sharing data means lifting state up • The browser waits for the JavaScript before anything starts
10. Client data libraries • Data lives in cache keys, not the component tree • Fetches still wait on the client const { data } = useQuery({ queryKey: ['genres'], queryFn: getTopGenres, }); // Elsewhere, after a mutation: queryClient.invalidateQueries({ queryKey: ['genres'], });
11. Route loaders Next.js Pages Router React Router Tanstack Router export async function getServerSideProps() { const genres = await getTopGenres(); return { props: { genres }, }; } function Page({ genres }) { return ( <TopGenresGrid genres={genres} /> ); } export const Route = createFileRoute('/library')({ loader: () = getTopGenres(), }); function Page() { const genres = Route.useLoaderData(); return ( <TopGenresGrid genres={genres} /> ); } export async function loader() { const genres = await getTopGenres(); return { genres }; } export default function Page({ loaderData, }) { return ( <TopGenresGrid genres={loaderData.genres} /> ); }
12. React Server Components • Components own their data again • Fetched on the server, next to where it lives export async function TopGenresGrid() { const genres = await db.genre.findMany({ orderBy: { plays: 'desc' }, take: 8, }); return <Grid>{/* … */}</Grid>; }
13. Declarative loading with Suspense Wrap a Suspense boundary to stream UI as it becomes ready. export default function LibraryPage() { return ( <PageHeader title="Your Library"> <ErrorBoundary fallback={<ErrorState />} > <Suspense fallback={<Skeleton />} > <TopGenresGrid /> <RecentlyPlayed /> </Suspense> </ErrorBoundary> </PageHeader>
14. What we actually want Self-contained components Instant navigations Coordinated UI Fast first paint Fresh data Strong Core Web Vitals
15. Self-contained components Instant navigations Coordinated UI Fast first paint Fresh data Strong Core Web Vitals RSCs in Next.js got us most of the way there
16. Time to content visible Client-side fetching (useEffect) App Router (RSCs + Suspense) Next.js Pages Router (loaders) 5.1s 1.28s 2.15s Source: Nadia Makarevich developerway.com/posts/react-server- components-performance Slow 4G, 6× CPU throttle
17. Self-contained components Instant navigations Coordinated UI Fast first paint Fresh data Strong Core Web Vitals What we were still missing
18. Next.js 16: Cache Components
19. 'use cache’ cacheTag() React provides the declarative component model. Next.js extends it to the cache layer. cacheLife()
20. Self-contained components Instant navigations Coordinated UI Fast first paint Fresh data Strong Core Web Vitals What we’re shipping now
21. The user should never wait on the network to see something.
22. Next.js 16.3: Instant Navigations • App Shells • Partial Prefetching RUNTIME DEVTOOLS
23. Next.js 16.3: Instant Navigations • App Shells • Partial Prefetching • Instant Insights • Navigation Inspector • Playwright utility RUNTIME DEVTOOLS
24. Foundation Official Next.js Skills Agent-ready errors Built for the agents you're already using Version-matched docs. Dev MCP server. Real browser verification. Source, cause, and fix options surfaced for agents. Guided workflows for verification and shell optimization.
25. Let me show you
26. One mental model. Same composition. Across the stack.
27. https://github.com/ vercel-labs/next- beats next-beats.dev
28. Aurora Scharff / @aurorascharff ▲ DX Engineer, Next.js team Thank You