Vercel

You can deploy Vike to Vercel simply by using a Vercel API Route. Alternatively, you can use vite-plugin-vercel for a full-fledged Vercel integration with ISR and Edge Middlewares.

We recommend using the Vercel API Route technique because it's a simple and sturdy integration. Later, if the need arises, you can switch to vite-plugin-vercel.

You can use Bati to scaffold a Vike app that uses Vercel.

API Route

You can integrate Vercel simply by creating a Vercel API Route api/ssr.js that server-side renders your app.

Example:

2024.03 GitHub > brillout/vike-with-vercel

⚠️
Make sure to properly set OUTPUT DIRECTORY in your Vercel dashboard, see the example's README.md 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 you've set the server-side rendering API Route, you can expect it to work for the foreseeable future.

vite-plugin-vercel

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

If you pre-render your pages only partially, you can also use vite-plugin-vercel to statically deploy your pre-rendered pages while dynamically serving your 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, you can directly use the Build Output API.

Example:

2022.07 GitHub > brillout/vite-plugin-ssr_vercel_build-output-api

vite-plugin-ssr was the previous name of Vike.

Data APIs (GraphQL, RESTful, RPC)

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

This means that you need to integrate your data layer twice:

Using Vercel's API Routes, for Vercel deployment.
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.
tRPC integrates over a single HTTP endpoint as well.

In other words, you can add a data layer by:

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

When using SSR, we recommend using RPC instead of GraphQL, leading to a substantial simplification and increased development speed.