createPageRenderer()

Environment: Node.js

We use createPageRenderer() to create the server middlware that performs server-side rendering:

// server/index.js

// In this example we use Express.js but we could use any other server framework.
const express = require('express')
const { createPageRenderer } = require('vite-plugin-ssr')

const isProduction = "production" === 'production'
const root = `${__dirname}/..`
const base = '/'

startServer()

async function startServer() {
  const app = express()

  let viteDevServer
  if (isProduction) {
    app.use(express.static(`${root}/dist/client`))
  } else {
    const vite = require('vite')
    viteDevServer = await vite.createServer({
      root,
      server: { middlewareMode: true }
    })
    app.use(viteDevServer.middlewares)
  }

  const renderPage = createPageRenderer({ viteDevServer, isProduction, root, base })
  app.get('*', async (req, res, next) => {
    const url = req.originalUrl
    const pageContextInit = { url }
    const pageContext = await renderPage(pageContextInit)
    if (!pageContext.httpResponse) return next()
    res.status(pageContext.httpResponse.statusCode).send(pageContext.httpResponse.body)
  })

  const port = 3000
  app.listen(port)
  console.log(`Server running at http://localhost:${port}`)
}

• viteDevServer is the Vite dev server.
• isProduction is a boolean. When set to true, vite-plugin-ssr loads already-transpiled code from dist/ instead of on-the-fly transpiling code.
• root is the absolute path of our app's root directory. The root directory is usually the directory where vite.config.js lives. All our .page.js files need to be descendent of the root directory.
• base is the Base URL.
• pageContext.httpResponse is null when a) an error occurred while rendering _error.page.js, or b) we didn't define the page _error.page.js and and an error occured.
• pageContext.httpResponse.statusCode is either 200, 404, or 500.
• pageContext.httpResponse.body is the HTML-sanitized string returned by the render() hook with added assets that vite-plugin-ssr automatically injected.

Since createPageRenderer() and renderPage() are agnostic to Express.js, we can use vite-plugin-ssr with any server framework (Koa, Hapi, Fastify, vanilla Node.js, ...) and any deploy environment such as Cloudflare Workers or Vercel.

Examples:

• JavaScript
• TypeScript