VPS (vite-plugin-ssr) differs from Next.js in three fundamental ways:
VPS is completely agnostic to React and its source code has zero dependency on React. You can actually use VPS with any other UI Framework (Vue, Preact, Solid, etc.).
With VPS, you implement and fully control the React integration, which has many benefits. For example, you can use Relay in the same way that Facebook does (with a render-as-you-fetch stream) which isn't possible with Next.js.
With VPS, you keep full control over your server and you can use any deployment strategy.
All dependencies are either shared with Vite (e.g.
fast-glob
) or fully/transitively owned (e.g.@brillout/json-serializer
). Adding VPS to your Vite app doesn't add any frivolous dependency.We believe VPS hits the sweet spot of being a full-fledged frontend tool while avoiding unnecessary bells and whistles.
Beyond these structural differences, VPS introduces features such as blazing fast HMR (powered by Vite), first-class SPA support (especially with the upcoming new VPS design), Domain-driven File Structure, state-of-the-art Code Splitting (powered by Vite/Rollup), Automatic Deployment Synchronization, Build Your Own Framework, etc.
Turbopack replicates some of Vite's blazing fast DX techniques, but it's still in its infancy and it'll take a while until Turbopack is production-ready. With Vite, you can use lightning fast DX today.
Finally, VPS is a community project: instead of leaning on a framework with business interests that are fundamentally at odds with yours, use a community-driven project that is sponsored by and made for the community.
With VPS, you integrate React yourself. This means you need to write a little bit more boilerplate but, in exchange, you get a lot more flexibility.
Because you integrate React yourself, you have full control over the frontend integration of your favorite tools (data fetching, state management, authentication, etc.).
For example, you can use Relay and Apollo in ways that aren't possible with Next.js.
Relay is a state-of-the-art GraphQL client developed and used at scale by Facebook (which invented GraphQL). The YouTube video "Re-introducing Relay" explains in details the benefits of Relay.
Many users and sponsors leverage VPS's flexibility to integrate Relay with SSR Streaming.
Except of React, VPS includes everything you'd expect from a frontend framework: Client-side Routing, HMR, Filesystem Routing, Pre-rendering, Data Fetching, Code Splitting, Layouts, i18n, etc.
From a server persepctive, VPS is just a middleware that can run anywhere (AWS, Vercel, Cloudflare, Deno Deploy, etc.).
To integrate VPS, you simply add VPS's middleware to your server (Express.js, Fastify, Edge Worker, Serverless Function, etc.).
With VPS, you have full control over your server and deployment, one of the most critical aspect of your architecture.
As depicted above, VPS's philosophy is that you integrate tools manually instead of being locked into decisions made by your framework. Use any tool you want, however you want.
All-in-all, VPS is less easy, but simpler. For large scale projects, simplicity is fundamentally more important than being "easy".
Last but not least, manual integration is fun and insightful. (Whereas fighting a framework is pesky.)
VPS is designed from the ground up to enable users to build frameworks on top of VPS.
You can build your own Next.js with only hundreds of lines of code.
While there are many uses cases for building your own framework, the most prominent one is building company internal frameworks.
We foster the proliferation of React frameworks, highly-tailored to specific use cases.
/public
directory after it was built, i.e. user uploaded images.getServerSideProps()
, Next.js blocks client-side rendering.From @patryk-smc and @redbar0n:
VPS | Next.js | |
---|---|---|
UI Framework | Any (React, Preact, Solid, etc.) | React only |
Code-splitting and bundling | Yes | Yes |
HMR | Yes, fast | Yes, slow |
SPA | Yes | Limited |
SSR | ||
Control | Full control | Limited / Black box |
Renderers | Yes, create as many you need | Just one (_app.ts file) |
RSC (React Server Components) | Work in progress | Yes, experimental |
Routing | ||
Filesystem Routing | Yes | Yes |
Domain-driven Filesystem Routing | Yes | No |
Client Routing | Yes | Yes |
Server Routing | Yes | No |
Base URL | Yes | Limited |
Integrations | ||
HTTP server | No*, bring your own | Baked-in, custom server partially supported with caveats[1][2] |
Apollo Client with SSR | Fully supported | Partially supported |
Relay with SSR | Fully supported | Partially supported |
Extras | ||
Head component | No*, use a tool like react-helmet. | Yes, next/head |
Image component | No*, use a Vite plugin like:See awesome-vite. | Yes, next/image |
API routes | No*, use your server or an RPC tool. | Yes |
Internationalization (i18n) | Yes | Limited |
Deployment synchronization | Yes | No |
Build your own framework | Yes | No |
Deployment options | ||
Vercel | Yes, minimal config | Yes, zero config |
Cloudflare Workers | Yes, minimal config | No, work in progress |
Node server (Docker, Heroku, Digital Ocean etc.) | Yes, minimal config | Yes, but limited |
(*) VPS doesn't ship those extras by design.