prerender() hook

Check out the Pre-rendering Guide to get an overview about how to pre-render a vite-plugin-ssr app.

The prerender() hook enables parameterized routes (e.g. /movie/:movieId) to be pre-rendered: by defining the prerender() hook we provide the list of URLs (/movie/1, /movie/2, ...) and (optionally) the pageContext for each URL.

If we don't have any parameterized route, then we can prerender our app without defining any prerender() hook. We can, however, still use the prerender() hook to increase the effeciency of pre-rendering as it enables us to fetch data for multiple pages at once.

// /pages/movie.page.route.js
// Environment: Node.js

export default '/movie/:movieId`
// /pages/movie.page.server.js
// Environment: Node.js

export { prerender }

async function prerender() {
  const movies = await Movie.findAll()

  const moviePages = (
    movies
    .map(movie => {
      const url = `/movie/${movie.id}`
      const pageProps = { movie }
      const pageContext = { pageProps }
      return {
        url,
        // Beacuse we already provide the `pageContext`, vite-plugin-ssr will *not* call
        // the `onBeforeRender()` hook for `url`.
        pageContext
      }
      /* We could also only return `url` and not provide `pageContext`. In that case
       * vite-plugin-ssr would call the `onBeforeRender()` hook. But that would be wasteful
       * since we already have all the data of all movies from our `await Movie.findAll()` call.
       */
      // return { url }
    })
  )

  // We can also return URLs that don't match the page's route.
  // That way we can provide the `pageContext` of other pages.
  // Here we provide the `pageContext` of the `/movies` page since
  // we already have the data.
  const movieListPage = {
    url: '/movies', // Note how the URL `/movies` isn't part of the page's route `/movie/:movieId`
    pageContext: {
      pageProps: {
        movieList: movies.map(({id, title}) => ({id, title})
      }
    }
  }

  return [movieListPage, ...moviePages]
}

The prerender() hook is only used for pre-rendering: if we don't call vite-plugin-ssr prerender then no prerender() hook is ever called.

Vue Example:

React Example:

✍ Edit this page