How to migrate 50,000 lines of code to React Server Components
summary
A migration of 50,000 lines moves a docs site and marketing site to the App Router and React Server Components, claiming tangible wins: reduced bundle size, localized data fetching, and perceptual gains via Suspense streaming. The concrete process is three steps: add the use client directive at page roots, push it down component by component, then apply advanced patterns. Examples include keeping heavy libs like Prism on the server and splitting CodeBlock into server and client halves to preserve interactivity while cutting shipped JS.
AI-written summary · about
chapters (8)
- 0:00React Server Components migration intro
- 1:44Three-step migration program
- 3:54Pushing client directives down
- 4:57Advanced Server Components patterns
- 6:01Handling unsupported libraries
- 6:48Mixing Client and Server Components
- 8:10Splitting components between server/client
- 9:13Should you migrate to RSC?
related talks
42mIntegrating React Into Legacy Projects
32mThe How, What and Why of Migrating to ReactJS
21mMigrating critical apps to React
26mHow to rewrite enterprise application into React ...
38mMigrating from PHP legacy code to React & Best Practices in React
28mLessons in Managing Technical Debt
10mRouting Reimagined: Upgrading to React Router v7
32mAnd Now You Understand React Server Components