Step 1: Start with a typed feature contract
Before choosing between Vite and Next.js, define the feature as a typed contract. For an MVP, this keeps the app honest: the UI, validation, API, database, and analytics all agree on what the core workflow actually is. Here is a simple project intake feature that could power a client portal or SaaS onboarding flow.
Step 2: Build the Vite version with React 19 form actions
For Vite, keep the client fast and push mutations through a small API endpoint. React 19 lets you model form submissions with `useActionState`, so the component stays readable while still giving users immediate feedback. This is a strong default for dashboards, portals, and internal tools.
Step 3: Use a tiny route handler as the mutation boundary
Whether the app is hosted on a Vite worker, Express server, Hono API, or serverless function, keep the mutation boundary boring: validate, authorize, write, notify, return a typed response. The UI should never be responsible for deciding whether submitted business data is trustworthy.
Step 4: Translate the same feature into a Next.js Server Action
In Next.js App Router, the same feature can move closer to the server with a Server Action. This is excellent when the mutation belongs to a page workflow and you want progressive enhancement, cache revalidation, and less client-side API glue.