The Shift from Client-Side Rendering to Server-First Architecture
If you have spent the last few years building with Vite, you are accustomed to the Single Page Application (SPA) mental model. In that world, every component is a client component. Every useEffect runs in the browser, and every useState hook manages memory directly on the user's machine.
However, migrating to Next.js and the App Router changes this paradigm fundamentally. Next.js assumes every component is a Server Component by default. This shift offers massive performance gains by reducing bundle sizes, but it introduces a friction point: the 'use client' directive.
Why Modern Migration Tools Automate Injection
When transitioning a legacy Vite project to Next.js, manually auditing hundreds of files to decide whether they should be Server or Client components is a monumental task. This is why tools like ViteToNext.AI often default to injecting the 'use client' directive at the top of migrated files to ensure immediate functional parity with the original SPA logic.
