Outputs

Vite Deploy allows you to render your Vite project statically (SSG), on-demand (SSR) or both (hybrid).

Below is a recap of requirements for each output:

Output	Static	Hybrid	Server
Handler entrypoint	Yes	Yes	Yes
Prerender entrypoint	Yes	Yes	No
Server entrypoint*	No	Yes	Yes

* Some adapters require an extra server entrypoint for on-demand rendering.

Outputs

Static (SSG)

In development, the request handler is used for requests. During the build:

1. The prerender entrypoint is called to determine which routes should be rendered statically.
2. Requests are sent for each route, handled by the request handler. The result is stored as static HTML.
3. The server artifacts are removed, only leaving static assets.

Server (SSR)

In development, the request handler is used for requests. During the build:

1. A standard Vite build takes place
2. Some adapters require a different server entrypoint for production.
3. No artifacts are removed.

Hybrid

In development, the request handler is used for requests. During the build:

1. The prerender entrypoint is called to determine which routes should be rendered statically.
2. Requests are sent for each route, handled by the request handler. The result is stored as static HTML.
3. Some adapters require a different server entrypoint for production.
4. No artifacts are removed.

Configuration reference

output

Type: "static" | "server" | "hybrid"

Specifies the output target for builds:

vite.config.js

import netlify from "@vite-deploy/netlify";
import { defineConfig } from "vite";

export default defineConfig({
    plugins: [netlify({
        // ...
        output: "hybrid"
    })]
});

prerender

Type: PrerenderOptions | undefined
Default: undefined

Specifies options related to prerendering. Required if output is set to "static" or "hybrid":

vite.config.js

import netlify from "@vite-deploy/netlify";
import { defineConfig } from "vite";

export default defineConfig({
    plugins: [netlify({
        // ...
        output: "static",
        prerender: { /* ... */ }
    })]
});

prerender.entrypoint

Type: string | URL

Specifies what module should be used. It accepts:

• Paths relative to Vite’s root: ./src/prerender.ts.
• Absolute paths: /foo/prerender.ts.
• Package specifiers: @my-pkg/prerender.
• URLs: new URL("./src/prerender.ts", import.meta.url).

vite.config.js

import netlify from "@vite-deploy/netlify";
import { defineConfig } from "vite";

export default defineConfig({
    plugins: [netlify({
        // ...
        output: "static",
        prerender: {
            entrypoint: "./src/prerender.ts"
        }
    })]
});

The module must return a PrerenderEntrypoint, which lists URLs to prerender. It is processed by Vite:

src/prerender.ts

import type { PrerenderEntrypoint } from "@vite-deploy/netlify";

export default {
    getStaticPaths() {
        return ["/"];
    },
} satisfies PrerenderEntrypoint;

getStaticPaths() can also be asynchronous.

prerender.headers

Type: Headers | undefined
Default: undefined

Specifies headers to use during prerendering:

vite.config.js

import netlify from "@vite-deploy/netlify";
import { defineConfig } from "vite";

export default defineConfig({
    plugins: [netlify({
        // ...
        output: "static",
        prerender: {
            // ...
            headers: new Headers([["x-foo", "bar"]])
        }
    })]
});

These headers can then be retrieved during the request:

src/handler.ts

import type { ExportedHandler } from "@vite-deploy/netlify";

export default {
    fetch(request) {
        if (request.headers.has("x-foo")) {
            // ...
        }
        // ...
    },
} satisfies ExportedHandler;

prerender.format

Type: "directory" | "file"
Default: "file"

Specifies the output file format of each page:

• "file": Vite Deploy will generate an HTML file named for each page route. (e.g. /foo and /foo.html both build the file /foo.html).
• "directory": Vite Deploy will generate a directory with a nested index.html file for each page. (e.g. /foo and /foo.html both build the file /foo/index.html).

vite.config.js

import netlify from "@vite-deploy/netlify";
import { defineConfig } from "vite";

export default defineConfig({
    plugins: [netlify({
        // ...
        output: "static",
        prerender: {
            // ...
            output: "directory"
        }
    })]
});

import.meta.env.PRERENDER

In addition to built-in Vite environment variables, Vite Deploy exposes import.meta.env.PRERENDER.

It’s a boolean statically replaced which lets you know if the file is running during prerendering or not.

This is useful, for example, to expose some routes for prerendering only in hybrid builds:

src/handler.ts

import type { ExportedHandler } from "@vite-deploy/netlify";
import { Hono } from "hono";

const app = new Hono();

if (import.meta.env.DEV || import.meta.env.PRERENDER) {
  app.get("/", (c) => c.html("<div>foo</div>"));
}

app.get(
  "*",
  (c) =>
    new Response(
      `Running ${new URL(c.req.url).pathname} in ${navigator.userAgent}!`,
    ),
);

export default app satisfies ExportedHandler;