We can deploy Vike to Vercel simply by using a Vercel API Route, or we can use vite-plugin-vercel if we want advanced Vercel features such as ISR and Edge Middleware.

Instead of manually integrating Vercel yourself, you can use vike-* packages and Bati. Bati helps you scaffold Vike projects. Bati and vike-* packages are going to get out of beta soon.

API Route

We can deploy our Vike app to Vercel simply by creating a Vercel API Route api/ssr.js that server-side renders our app.

Example: GitHub > brillout/vike-with-vercel.

Make sure to properly set OUTPUT DIRECTORY in your Vercel dashboard, see the example's instructions.

Using a Vercel API Route is a sturdy way to deploy to Vercel, as API Routes is a core Vercel feature: it's here to stay and, most importantly, stable. (Whereas Vercel's Build Output API is a moving target with occasional breaking changes.) Once we set up our server-side rendering API Route, we can expect it to work for the foreseeable future.


vite-plugin-vercel enables zero-configuration support for all Vercel features, including Incremental Static Regeneration (ISR) and Edge Middleware.

If we pre-render our pages only partially, we can also use vite-plugin-vercel to statically deploy our pre-rendered pages while dynamically serving our non-prerendered pages.

See Vike + vite-plugin-vercel installation instructions at vite-plugin-vercel > Usage with Vike.

Under the hood, vite-plugin-vercel uses Vercel's Build Output API.

Build Output API

For maximum flexibility and configuration options, we can also directly use the Build Output API.


Data APIs (GraphQL, RESTful, RPC)

Vercel API Routes only work on Vercel's platform; we cannot run them locally.

This means that we need to integrate our data layer twice:

  1. Using Vercel's API Routes, for Vercel deployment.
  2. Using a local server (e.g. Express.js), for development.

This is usually easy to achieve as most data layer tools integrate using a single HTTP endpoint. For example:

  • GraphQL integrates over a single HTTP endpoint /graphql.
  • Telefunc integrates over a single HTTP endpoint /_telefunc.

In other words, we add a data layer by:

  • Creating a new Vercel API Route, integrating that single endpoint.
  • Creating a new route to our local development server (e.g. Express.js), integrating that single endpoint.

When using SSR, we recommend using RPC instead of GraphQL, which most of the time leads to a drastic simplification and increased development speed.