prerender() programmatic

See Guides > Pre-rendering (SSG) for an overview of what pre-rendering is and how to enable it.

Pre-rendering is automatically initiated when running $ vite build. (If pre-rendering is enabled.)

Instead, we can programmatically initiate pre-rendering:

// vite.config.js

import { ssr } from 'vite-plugin-ssr/plugin'

export default {
  plugins: [
    ssr({
      prerender: {
        // Stop `$ vite build` from initiating pre-rendering
        disableAutoRun: true
      }
    })
  ]
}

// my-custom-build-script.js

import { prerender } from 'vite-plugin-ssr/prerender'

// Without options
prerender()

// All options are optional
prerender({
  pageContextInit,
  viteConfig,
  onPagePrerender
})

pageContextInit

The initial value of each page's pageContext object.

prerender({
  pageContextInit: {
    someData: 42,
    // ...
  }
})

viteConfig

The Vite config.

It's optional: if omitted, Vite automatically loads our vite.config.js.

We recommend to either omit this option or set it to prerender({ viteConfig: { root }}): the vite.config.js file living at root will be loaded.

Alternatively you can:

• Set:

  prerender({
    viteConfig: {
      configFile: require.resolve('./path/to/vite.config.js')
    }
  })

• Not load any vite.config.js file and, instead, use prerender({ viteConfig: { configFile: false, ...myViteConfig }}) to programmatically define the entire Vite config.

You can also load a vite.config.js file while overriding parts of the Vite config.

See Vite > JavaScript API > InlineConfig.

onPagePrerender()

DON'T use this option without having contacted a vite-plugin-ssr maintainer: this functionality may be completely changed/removed at any time if you don't.

This feature is experimental and may be changed in any minor version update.

The onPagePrerender option allows us to override where the HTML is written.

prerender({
  // If we provide `onPagePrerender` then vite-plugin-ssr won't write the HTML to the filesystem
  onPagePrerender(pageContext) {
    // TODO: write the HTML to the filesystem.
    // ...
  }
})

More configs

For more configurations, see the global config at API > config.prerender.