What RSCs can do in Next.js today

Building app-like UX on the web has historically meant reaching for an SPA. You ship the data layer to the browser, manage a client cache, juggle loading states, coordinate mutations, and write a lot of code to keep the UI feeling fast and fresh. The result can be great, but the cost is high, and the model gets harder to maintain as your app grows.

Next.js takes a different path. Since React Server Components first landed, we’ve been working toward a way to build where each piece of your app runs where it belongs, while the mental model stays the same: components. In this talk, you’ll see how that translates into instant-feeling UX, streamed UI, fresh data, coordinated updates, caching across the stack, and strong Core Web Vitals that hold up as your product scales.

Transcript

1. REACT ALICANTE What RSCs can do in Next.js today Aurora Scharff / @aurorascharff DX, Docs & Education, Next.js team ▲ Vercel React Cert Lead at certificates.dev
2. Why we love React
3. Why we love React function HomePage() { return ( • Composable <h1>Welcome back</h1> <QuickPlayGrid /> <MostPlayed /> <PlaylistBrowse /> <TopGenresGrid /> ); < < }
4. Why we love React function DiscoverPage() { return ( • Composable <h1>Discover</h1> <TopGenresGrid /> <RecommendedTracks /> <PlaylistBrowse /> • Self-contained ); < < }
5. Why we love React function LibraryPage() { return ( • Composable <h1>Your Library</h1> <LibraryGrid /> <PlaylistBrowse /> <TopGenresGrid /> • Self-contained • Clear boundaries ); < < }
6. Agents work this way too
8. Adding data puts composability under pressure
9. useState + useEffect • The browser waits for the JavaScript before anything starts 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 }
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 export async function getServerSideProps() { const genres = await getTopGenres(); return { props: { genres }, }; } = function Page({ genres }) { return ( <TopGenresGrid genres={genres} /> ); } React Router v7 Tanstack Router export async function loader() { const genres = await getTopGenres(); return { genres }; } export const Route = createFileRoute('/library') ({ loader: () getTopGenres(), }); export default function Page({ loaderData, }) { return ( <TopGenresGrid function Page() { const genres = Route.useLoaderData(); return ( <TopGenresGrid genres={genres} /> ); } 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 Strong Core Web Vitals Fast first paint Coordinated UI Fresh data Instant navigations
15. Client-side fetching (useEffect) 5.1s Slow 4G, 6× CPU throttle Next.js Pages Router (loaders) 2.15s Source: Nadia Makarevich developerway.com/posts/react-servercomponents-performance App Router (RSCs + Suspense) 1.28s Time to all content visible
16. RSCs in Next.js got us most of the way there Self-contained components Strong Core Web Vitals Fast first paint Coordinated UI Fresh data Instant navigations
17. Next.js 16: Cache Components
18. 'use cache’ React provides the declarative component model. cacheTag() Next.js extends it to the cache layer. cacheLife()
19. What we’ve shipped in Next.js 16.3 Self-contained components Strong Core Web Vitals Fast first paint Coordinated UI Fresh data Instant navigations
20. The user should never wait on the network to see something.
21. Next.js 16.3: Instant Navigations DEVTOOLS RUNTIME
22. Next.js 16.3: Instant Navigations DEVTOOLS • Instant Insights RUNTIME
23. Next.js 16.3: Instant Navigations DEVTOOLS • Instant Insights • Navigation Inspector • Playwright instant() RUNTIME
24. Next.js 16.3: Instant Navigations DEVTOOLS • Instant Insights • Navigation Inspector • Playwright instant() RUNTIME • Partial Prefetching
25. Context Built for the agents you're already using Official Next.js Skills Actionable errors
26. Let me show you
27. The speed of the server, with the feel of the client.
28. next-beats.dev I can't wait to see what you'll be building. I can't wait to see what you'll be building. https://github.com/ vercel-labs/nextbeats
29. Agent skill https:// github.com/ aurorascharff/ nextjs-apparchitecture-skill
30. Thank You Aurora Scharff / @aurorascharff