React Server Components: A New Mental Model for Web Development

The React Server Components mental model shift nobody talks about 🧵 After shipping three production apps with Next.js 14+ and RSC, I've realized the biggest challenge isn't learning the new APIs—it's unlearning how we think about React components. For years, we've been trained: "components are just functions that return UI." They run in the browser, they re-render on state changes, and you useEffect() your way to data. Simple mental model. React Server Components break this completely. Now we have components that: 1- Run only on the server, never ship to the client 2- Can directly access databases and filesystems 3- Never re-render (they're not reactive) 4- Can't use hooks or browser APIs Here's what clicked for me: (the snippet attached as image 👇 ) No useState. No useEffect. No loading states. No client-side data fetching library. Just... async/await and JSX. The real benefits I've seen: 1- Bundle size wins: Our dashboard went from 340KB → 180KB JS. Half the user's code is now Server Components that never shipped. 2- Waterfall elimination: Previously, we'd fetch user → fetch posts → fetch comments. Now it's parallel at the framework level. 2.8s → 900ms on our slowest page. 3- Zero hydration errors: Because 60% of our components never hydrate. They're just HTML. No "useEffect runs twice" debugging sessions. 4- Backend integration: We're using Prisma directly in components. No API routes. No tRPC layer. Just... query and render. Common misconceptions I had: ❌ "RSC means everything is server-rendered" → No. You can still have SPAs, client routing, and instant transitions. ❌ "This kills interactivity" → Client Components still exist. Use them for interactive bits. Most apps need maybe 20-30% client components. ❌ "Too complicated for small projects" → Actually, it's simpler. Less state management, less effect cleanup, fewer API routes to maintain. When NOT to use this: - Building a dashboard that's 90% interactive charts and forms - You're on Next.js 13 or earlier (just wait) - Your team is still getting comfortable with basic React hooks - You need full offline-first capabilities When it shines: - Content-heavy apps (blogs, docs, marketing sites) - Dashboards with lots of data fetching - Apps where initial load performance matters - Teams tired of maintaining parallel API and frontend code The biggest mindset shift? Stop trying to make Server Components "reactive." They're not. They're request-scoped, they run once, and they're gone. For interactivity, nest a Client Component inside. This composition model is the whole point. I spent two weeks fighting this. Once I embraced it, everything got simpler. 💡 What's been your biggest "aha moment" with Server Components? Or are you still skeptical about the mental model shift? #React #NextJS #ReactServerComponents #WebDev #Frontend #FullStack

  • text

To view or add a comment, sign in

Explore content categories