Edit

Vercel

We recommend using Photon for a seamless and full-fledged Vercel integration.

The entire documentation for using Vercel with Photon is contained on this page and vike-photon.

Alternatively, for more control, you can manually integrate Vercel instead of using Photon.

Photon is currently in beta — you can use it in production, but expect breaking changes more frequently than usual.

You can use Vercel to deploy static websites as well as SSR.

If you pre-render partially, then your pre-rendered pages are statically deployed while your SSR pages are served dynamically.

Get started

New app

Use vike.dev/new to scaffold a new Vike app that uses Vercel with Photon.

Add to existing app

If you're using vike-server then migrate to vike-photon.

1. Install

npm i vike-photon @photonjs/vercel

// pages/+config.js
 
import vikePhoton from 'vike-photon/config'
 
export default {
  extends: [vikePhoton] 
}

// pages/+config.ts
 
import type { Config } from 'vike/types'
import vikePhoton from 'vike-photon/config'
 
export default {
  extends: [vikePhoton]
} satisfies Config

Photon automatically uses @photonjs/vercel if it's listed in your package.json dependencies. No additional steps are required.

Under the hood, @photonjs/vercel uses Vercel's Build Output API.

2. Server (optional)

Photon includes a built-in server that supports basic features like SSR. If you need additional server functionalities (e.g. file uploads or API routes), see vike-photon > Server.

3. Deployment

See Deployment.

Deployment

You can deploy your app using either Vercel's CLI or Vercel's Git integration.

CLI

Install the Vercel CLI, then run the vercel command. The CLI will guide you through the necessary steps.

Git

See the official documentation.

ISR

Vike supports Incremental Static Regeneration (ISR) when using Photon.

// pages/some-route/+config.js
 
export default {
  // Options
  isr: {
    // Expiration time (in seconds) before the cached asset is re-generated
    expiration: 30
  }
}

// pages/some-route/+config.ts
 
import type { Config } from 'vike/types'
 
export default {
  // Options
  isr: {
    // Expiration time (in seconds) before the cached asset is re-generated
    expiration: 30
  },
} satisfies Config

Manual integration

API Route

A simple way to integrate Vercel is to create 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.

Build Output API

For maximum flexibility and configuration options, you can use the Build Output API instead of an API route.

Example:

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

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

API Routes with development

Vercel API Routes only work in production on Vercel's platform. This means, you may need to re-create your API routes integration for development.

For example, you typically need to integrate your 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.
• 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.