Search
Docs Menu
API
Get Started

Guides > Pre-rendering (SSG) explains what pre-rendering is and how to use it.

By default, pre-rendering is disabled. To enable it:

// vite.config.js
 
import vike from 'vike/plugin'
 
export default {
  plugins: [
    vike({
      // Use default settings:
      prerender: true,
      // Or set settings:
      prerender: {
        partial: false,
        noExtraDir: false,
        parallel: 4,
        disableAutoRun: false
      }
    })
  ]
}

Toggle

In some situations, a page shouldn't be pre-rendered. For example a news page that displays the latest news fetched from a database should be rendered at request-time and certainly not at build-time.

Guides > Pre-rendering (SSG) explains in depth whether a page should be pre-rendered or not.

You can use prerender: false to tell Vike to skip a page from pre-rendering.

// /pages/news/+config.js
 
export default {
  prerender: false
}

Different defaults

You can define prerender in higher levels so it applies to more/all pages.

This is especially handy with Domain-Driven File Structure:

// /pages/marketing/+prerender.js
 
// Using Domain-Driven File Structure, +prerender.js applies to
// all marketing pages.
 
// Enable pre-rendering for all marketing pages
export const prerender = true

You can also make pre-rendering opt-in instead of opt-out:

// /renderer/+config.js
 
export default {
  // By default, pages are not pre-rendered
  prerender: false
}
// /pages/about-us/+prerender.js
 
// Opt-in pre-rendering
export const prerender = true

Conditional pre-rendering

You can pre-render pages conditionally:

// /renderer/+prerender.js
 
export const prerender = isCmsPreview() ? false : true

This is useful for previewing CMS pages (you don't want to pre-renderer a CMS deploy preview).

Note that onBeforePrerenderStart() hooks are always called, even if prerender is false. If you want to call onBeforePrerenderStart() hooks conditionally as well:

// /pages/movie/+prerender.js
 
export { prerender }
 
import { someCondition } from './someCondition'
 
const prerender = someCondition()
// /pages/movie/+onBeforePrerenderStart.js
 
export { onBeforePrerenderStart }
 
import { someCondition } from './someCondition'
 
const onBeforePrerenderStart = someCondition()
  ? async () => {
      // ...
      return listOfUrls
    }
  : null

Settings

partial

boolean (default: false)

Allow only some of your pages to be pre-rendered.

This setting doesn't affect the pre-rendering process: it merely suppresses the warning that some pages aren't pre-rendered.

As explained in Guides > Pre-rendering (SSG), if you don't pre-render all your pages then you need a production server.

That said, if you cannot or don't want to pre-render all your pages while still deploying to a static host, then see the workaround at #1476 - Pre-rendered dynamic routes (static host deployment).

Also, by using vite-plugin-vercel, you can statically deploy your pre-rendered pages while using a production server for your non-pre-rendered pages.

Vike shows a warning that a page cannot be pre-rendered when the page has a parameterized route (e.g. a Route String /movie/@movieId, or a Route Function) while there isn't any onBeforePrerenderStart() hook that provides at least one URL matching the page's route (e.g. /movie/42).

noExtraDir

boolean (default: false)

Don't create a new directory for each HTML file.

For example, generate dist/client/about.html instead of dist/client/about/index.html.

Generating a directory for each HTML file is the most reliable way for telling Static Hosts the static URL of each static HTML. But some static hosts prefer the other way.

parallel

boolean | number (default: os.cpus().length)

Number of concurrent pre-render jobs.

Set to false (or 1) to disable concurrency.

The default value is the fastest, but it may induce high spikes of memory usage.

Disable concurrency if:

  • You encounter JavaScript heap out of memory errors.
  • If pre-rendering takes an abnormal high amount of time. (Caused by the very slow process of memory swapping that kicks-in when memory starts to saturate).

disableAutoRun

boolean (default: false)

When running $ vite build, Vike automatically triggers pre-rendering. (If you enabled it.)

You can disable the automatic triggering:

// vite.config.js
 
import vike from 'vike/plugin'
 
export default {
  plugins: [
    vike({
      prerender: {
        // Stop `$ vite build` from initiating pre-rendering
        disableAutoRun: true
      }
    })
  ]
}

You can then manually trigger pre-rendering using:

See also disableAutoFullBuild.

See also