@vite-plugin-vercel/vike
v9.0.2
Published
Use vike with vite-plugin-vercel
Downloads
1,322
Readme
@vite-plugin-vercel/vike
vike
integration for vite-plugin-vercel
.
- Versions
>=0.3.3
are compatible with [email protected] and above - Versions
0.1.x
are compatible with [email protected] - Versions
0.0.x
are compatible with [email protected]
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.
// vite.config.ts
import { defineConfig } from 'vite';
import ssr from 'vike/plugin';
import vercel from 'vite-plugin-vercel';
export default defineConfig(async ({ command, mode }) => {
return {
plugins: [ssr(), vercel()],
};
});
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:
// Now this page is a Prerender Function, meaning that it will be cached on Edge network for 15 seconds.
// Check official documentation for further details on how it works.
export const isr = { expiration: 15 };
vike V1 design
Take any of your page config file, and add the following configuration:
import type { Config } from 'vike/types';
export default {
// Now this page is a Prerender Function, meaning that it will be cached on Edge network for 15 seconds.
// Check official documentation for further details on how it works.
isr: { expiration: 15 },
} 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:
import type { VercelRequest, VercelResponse } from '@vercel/node';
import { renderPage } from 'vike/server';
import {
getDefaultEmptyResponseHandler,
// higly recommended to use at least this one, as it handles some internals
// that overrides `request.url`
getDefaultPageContextInit,
getDefaultResponseHandler,
} from '@vite-plugin-vercel/vike/helpers';
export default async function handler(
request: VercelRequest,
response: VercelResponse,
) {
// pageContextInit.url is not necessarily equal to request.url.
// It is required for `renderPage` to work properly.
const pageContextInit = getDefaultPageContextInit(request);
const pageContext = await renderPage(pageContextInit);
const { httpResponse } = pageContext;
if (!httpResponse) {
return getDefaultEmptyResponseHandler(response);
}
return getDefaultResponseHandler(response, httpResponse);
}