@vite-plugin-vercel/vike

vike integration for vite-plugin-vercel.

• Versions >=0.3.3 are compatible with vike@0.4.x and above
• Versions 0.1.x are compatible with vike@0.4.x
• Versions 0.0.x are compatible with vike@0.3.x

Features

• Support for ISR/Prerender Functions
• Route strings and filesystem routing are compiled to routes rules
• A Serverless Function is created by default to handle SSR route. No need to manually create it
  • If you need to customize the Function, some helpers are available

Usage

Install vite-plugin-vercel and @vite-plugin-vercel/vike and make sure only vite-plugin-vercel is added as a vite plugin.

vite-plugin-vercel will auto load @vite-plugin-vercel/vike when necessary.

1// vite.config.ts
2import { defineConfig } from 'vite';
3import ssr from 'vike/plugin';
4import vercel from 'vite-plugin-vercel';
5
6export default defineConfig(async ({ command, mode }) => {
7  return {
8    plugins: [ssr(), vercel()],
9  };
10});

ISR/Prerender Functions

Official documentation: https://vercel.com/docs/build-output-api/v3/primitives#prerender-functions

:warning: Pages with route function are not compatible with ISR. A warning will be shown if this occurs.

vike 0.4.x

Take any of your .page file (not .page.server) and add the following export:

1// Now this page is a Prerender Function, meaning that it will be cached on Edge network for 15 seconds.
2// Check official documentation for further details on how it works.
3export const isr = { expiration: 15 };

vike V1 design

Take any of your page config file, and add the following configuration:

1import type { Config } from 'vike/types';
2
3export default {
4  // Now this page is a Prerender Function, meaning that it will be cached on Edge network for 15 seconds.
5  // Check official documentation for further details on how it works.
6  isr: { expiration: 15 },
7} satisfies Config;

Custom Serverless Function for vike

By default, a Serverless Function is created to handle all SSR routes. If for any reason you need to customize it, some tools are available:

1import type { VercelRequest, VercelResponse } from '@vercel/node';
2import { renderPage } from 'vike/server';
3import {
4  getDefaultEmptyResponseHandler,
5  // higly recommended to use at least this one, as it handles some internals
6  // that overrides `request.url`
7  getDefaultPageContextInit,
8  getDefaultResponseHandler,
9} from '@vite-plugin-vercel/vike/helpers';
10
11export default async function handler(
12  request: VercelRequest,
13  response: VercelResponse,
14) {
15  // pageContextInit.url is not necessarily equal to request.url.
16  // It is required for `renderPage` to work properly.
17  const pageContextInit = getDefaultPageContextInit(request);
18  const pageContext = await renderPage(pageContextInit);
19  const { httpResponse } = pageContext;
20
21  if (!httpResponse) {
22    return getDefaultEmptyResponseHandler(response);
23  }
24
25  return getDefaultResponseHandler(response, httpResponse);
26}