Other Integrations

From an architectural perspective, VPS is versatile:

From a server perspective VPS is just an agnostic middleware, see API > renderPage().
We control how pages are rendered.

In practice, this means that we can use VPS with whatever tool we want. In fact, VPS is being used with all kinds of tools within all kinds of environments.

View tools

// /renderer/_default.page.server.js
// Environment: Node.js

import { escapeInject, dangerouslySkipEscape } from 'vite-plugin-ssr/server'
// This can be any UI framework (React, Vue, Svelte, ...)
import renderToHtml from 'some-ui-framework'

export { render }

async function render(pageContext) {
  // `Page` is the `export { Page }` of our `*.page.js` files;
  // `vite-plugin-ssr` doesn't do anything with `Page` and just makes it available as
  // `pageContex.Page`; we can export any `Page` value we want and do whatever we want with it.
  const { Page } = pageContext

  // We have control over how we use our UI framework to render our pages to HTML
  const pageHtml = await renderToHtml(Page)

  // We have control over the entire HTML
  return escapeInject`<html>
    <body>
      <head>
        <!-- Some libraries recommend loading code from a CDN -->
        <script src="https://cdn.example.com/some-library/3.3.7/lib.min.js"></script>
      </head>
      <div id="root">
        ${dangerouslySkipEscape(pageHtml)}
      </div>
    </body>
  </html>`
}

// /renderer/_default.page.client.js
// Environment: Browser

export { render }

import { hydrateDom } from 'some-ui-framework'

async render(pageContex) {
  const { Page } = pageContext
  // We have control over how our pages are hydrated
  await hydrateDom(Page)
}

Since we control how our pages are render to HTML and hydrated, we can use:

Any UI framework (React 16, React 17, Vue 2, Vue 3, petite-vue, Svelte, Solid, Preact, ...)
Any view library (Vuex, Redux, Relay, Apollo GraphQL, PullState, Recoil, Vue Router, React Router, ...)

And, more importantly, integrating a view tool is simply a matter of following its official installation guide.

Browser tools

// /renderer/_default.page.client.js
// Environment: Browser

export { render }

import { hydrateDom } from 'some-ui-framework'

// This is a good place to initialize error tracking such as Sentry or Bugsnag.
Sentry.init()
// And also for initializing a Service Worker.
navigator.serviceWorker.register(/* ... */)

async render(pageContex) {
  // Here we can integrate performance measurement tools, e.g. to measure hydration performance
  const { Page } = pageContex
  await hydrateDom(Page)
  init()
}

function init() {
  // After hydration we usually initialize vanilla JS component libraries, for example tooltips
  tooltip.init(document.querySelectorAll('.tooltip')
  // Or some vanilla JS modal library
  $('.my-modals').modal()
}

We can use:

Any CSS framework (Tailwind CSS, Bulma, Bootstrap, Material Design, ...)
Any browser library (Vanilla JS component libraries, Bugsnag, Sentry, jQuery, Google Analytics, ...)
Any browser technology (Service Workers, PWA, ...)

Integrating a browser tool is only a matter of following its official installation guide.

Server tools

From the perspective of our server architecture, vite-plugin-ssr is just a middleware:

// `app` can be any server framework such as Express.js/Fastify/Koa/Hapi/...
app.get('*', async (req, res) => {
  // renderPage() is just a function that, for a given URL, returns the result of
  // of our render() hook (usually an HTML string). The renderPage() function
  // can be used within any server environment, including serverless and edge
  // environments such as AWS Lambda, Cloudflare Workers, Vercel, ...
  const pageContext = await renderPage({ urlOriginal: req.url })
  res.send(pageContext.httpResponse.body)
})

By pre-rendering our pages we can remove the need for a production server and, instead, deploy to a static host.

We can use:

Any server framework (Express, Koa, Fastify, Hapi, ...)
Any authentication strategy/tool (email/password, OAuth, Auth.js, Passport.js, Grant, Keycloak, Auth0, ...).
Any serverless/edge environment (Cloudflare Workers, Vercel, Firebase, AWS Lambda, Google Cloud Functions, ...)
Any virtual private server (AWS EC2, Google Cloud, ...)
Any static host (Cloudflare Pages, GitHub Pages, Netlify, ...)

Examples

Official examples: GitHub > brillout/vite-plugin-ssr > examples/.

Beyond the offical examples, many tools have community examples of being used with vite-plugin-ssr – search this website (CTRL+K) for the tool you want an example of.

If an example is missing/outdated, PR welcome to add yours.

✍ Edit this page