Pre-rendering (SSG)

What is pre-rendering? Pre-rendering means to render the HTML of all our pages at build-time: normally, the HTML of a page is rendered at request-time (when the user navigates to that page) but, with pre-rendering, the HTML of a page is rendered at build-time instead.

Our app then consists only of static files (HTML, JS, CSS, images, ...) that we can deploy to so-called "static hosts" such as GitHub Pages, Cloudflare Pages, or Netlify. If we don't use pre-rendering, then we need to use a Node.js server to be able to render our pages' HTML at request-time.

To pre-render our pages, we use the CLI command prerender at the end of the build:

  • npm: $ npx vite build && npx vite build --ssr && npx vite-plugin-ssr prerender.
  • Yarn: $ yarn vite build && yarn vite build --ssr && yarn vite-plugin-ssr prerender.

After running $ vite-plugin-ssr prerender, all static assets are available at dist/client/

For pages with a parameterized route (e.g. /movie/:movieId), we have to use the prerender() hook and provide a list of URLs that are to be pre-rendered.

We can also use the prerender() hook to accelerate the pre-rendering process as it allows us to prefetch data for multiple pages at once.

We can skip pre-rendering for certain pages by using .page.server.js#doNotPrerender.

React Example:

Vue Example:

✍ Edit this page