⚠️
The vite-plugin-ssr project has been renamed Vike.
  • If you are already using vite-plugin-ssr then migrate to Vike.
  • For new projects, don't use vite-plugin-ssr but use Vike instead.

Other Integrations

If the tool you want to use isn't in the list of integration guides, you'll still most likely be able to use it.

Vite-plugin-ssr is versatile:

In principle, you should be able to use vite-plugin-ssr with any tool you want.

If you struggle integrating a tool, don't hesitate to create a new GitHub Discussion.

UI tools

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

import { escapeInject, dangerouslySkipEscape } from 'vite-plugin-ssr/server'
// This can be any UI framework (React, Vue, Solid, 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 control how we use our UI framework to render our pages to HTML
  const pageHtml = await renderToHtml(Page)

  // We control 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 control how our pages are hydrated
  await hydrateDom(Page)
}

Since you control how your pages are rendered, you can use:

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

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

Client-side 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()
}

You can use:

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

Integrating a client-side tool is usually only a matter of following its official installation guide.

Server-side tools

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

// renderPage() doesn't depend on Node.js and can be used in any JavaScript environment:
// AWS, Cloudflare, Vercel, Node.js, Deno, Bun, Lagon, ...
import { renderPage } from 'vite-plugin-ssr/server'

// Can be any server: Express.js, Fastify, Hono, Cloudflare Worker, AWS Lambda Function, ...
server.addMiddleware({
  method: 'GET',
  route: '*', // Catch-all
  async handler(request) {
    const pageContextInit = { urlOriginal: request.url }
    const pageContext = await renderPage(pageContextInit)
    const { body, statusCode, headers } = pageContext.httpResponse
    const response = { body, statusCode, headers }
    return response
  }
})

The vite-plugin-ssr middleware is versatile and can be used within any server environment.

Alternatively, you can pre-render your pages to remove the need for a production server and deploy to a static host instead.

You can use:

  • Any server framework (Express, Fastify, Hono, Nitro, HatTip, Koa, 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, Deno Deploy, ...)
  • Any virtual private server (AWS EC2, Google Cloud, ...)
  • Any static host (Cloudflare Pages, GitHub Pages, Netlify, ...)

See also:

Examples

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

Beyond the official 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, contribution welcome to create/improve one.