Server Components vs Client Components: The Mental Model Shift Every Vite Developer Needs

Introduction

If you have been building applications using Vite and standard React for the last few years, you’ve likely mastered the Single Page Application (SPA) paradigm. You know that everything runs in the browser, all your state is managed via useState or useQuery, and your "server" is just a collection of API endpoints.

However, as you move toward Next.js and the App Router, the most significant hurdle isn't the file-based routing—it is the mental shift required to understand React Server Components (RSC). For a Vite developer, this feels like learning React all over again.

In this guide, we will break down the fundamental differences and how to bridge the gap between these two worlds.

The Vite Paradigm: Everything is Client-Side