vite-plugin-ssr

⚠️
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.

🔧 Control

Use any UI framework (React, Vue, Svelte, Solid, ...) and any tool you want (any frontend library, web technology, deploy environment, Vite plugin, ...).

With vite-plugin-ssr, you integrate tools manually and keep architectural control.

With vite-plugin-ssr, you control how your pages are rendered:

// /pages/about.page.js
// Environment: browser and server

// vite-plugin-ssr uses Filesystem Routing: the file `/pages/about.page.js` matches the URL `/about`.

// `Page` can be anything you want — typically a React/Vue/Svelte/... component.
export function Page() {
  return <>
    <h1>About</h1>
    <p>This is our first vite-plugin-ssr app.</p>
  </>
}

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

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

// You control how `Page` is rendered to HTML
export async function render({ Page }) {
  const pageHtml = await renderToHtml(Page)
  const title = 'My first vite-plugin-ssr app'
  return escapeInject`<!DOCTYPE html>
    <html>
      <head>
        <title>{title}</title>
      </head>
      <body>
        <div id="page-root">${dangerouslySkipEscape(pageHtml)}</div>
      </body>
    </html>`
}

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

import { hydrateDom } from 'my-favorite-ui-framework'

// You control how `Page` is hydrated
export async function render({ Page }) {
  await hydrateDom(Page)
}

This level of control means you can use and integrate any tool you want.

📦 Zero-config

vite-plugin-ssr gives you control only where it matters.

Everything else just works without the need to configure anything.

💫 Simple

With vite-plugin-ssr you integrate tools manually; while it means more work, it gives you a fundamentally simpler & more stable foundation to build upon.

The clean cut between vite-plugin-ssr and your UI framework (React/Vue/...) makes reasoning about your app easier.

Less easy, but simpler

With vite-plugin-ssr you integrate tools yourself. This usually means more work and it's less easy; getting started is often slower.

But the black box nature of frameworks like Next.js/Nuxt is limiting and requires brittle workarounds. In the end, you waste time fighting the framework.

In contrast, vite-plugin-ssr is transparent: it gets out of your way and integrating tools is simply a matter of following the tool's official installation guide.

In a nutshell: vite-plugin-ssr is less easy, but simpler.

Stable foundation

Frameworks need to constantly keep up with the ecosystem, whereas do-one-thing-do-it-well tools can quickly stabilize.

Actually, vite-plugin-ssr is already stable: breaking changes are only about improving the design of vite-plugin-ssr which means that you can expect your integrations to keep working in the future.

Clean cut

There is no conflation between vite-plugin-ssr and your UI framework (React/Vue/...). This makes reasoning about your app a lot easier.

Fun

Last but not least, manual integration is fun & insightful! (Whereas fighting a framework is unnecessary & pesky.)

Full-fledged

Filesystem Routing, Data fetching, Pre-rendering, Layouts, HMR, i18n, Link Prefetching, HTML Streaming.

Client Routing (fast page navigation) or Server Routing (simple architecture).

All render modes: SSR, SPA, MPA, SSG, HTML-only. Each page can use a different mode.

Fast HMR

Blazing fast HMR powered by Vite .

HMR stays fast as you scale thanks to Vite's novel lazy-transpiling approach.

Routing

Pages are automatically routed:

FILESYSTEM                        URL
pages/index.page.js               /
pages/about.page.js               /about
pages/faq/index.page.js           /faq
pages/movie/@id/index.page.js     /movie/1, /movie/2, /movie/3, ...

You can also use so-called Route Strings and Route Functions.

// Route String
export default '/movie/@id'

// Route Function — for full flexibility
export default pageContext => pageContext.urlPathname === '/admin' && pageContext.isAdmin

You can choose between:

Client Routing for a faster page navigation. (DOM mutation upon page navigation.)
Server Routing for a simpler app architecture. (Full HTML reload upon page navigation.)

Render Modes (SSR, SPA, SSG, HTML-only)

For each page, you can choose between:

SSR: the page's HTML is rendered at request-time.
SSG: the page's HTML is pre-rendered at build-time.
SPA: the page isn't rendered to HTML; it's only loaded & rendered in the browser.
HTML-only: the page is rendered only to HTML with zero/minimal browser-side JavaScript.

For example, you can render an admin panel as an SPA while rendering marketing pages only to HTML with zero browser-side JavaScript.

This very website, https://vite-plugin-ssr.com, is HTML-only and loads only few KBs of JavaScript (which implements the few bits of interactivity such as the collapsible LEARN MORE sections of this page).

🌍 Deploy anywhere

Deploy anywhere (Vercel Serverless/Edge/ISR, Cloudflare Workers, AWS EC2/Lambda, Netlify Functions/Edge, Firebase, Google Cloud, ...).

Pre-render your app and deploy it to any static host (Netlify, GitHub Pages, Cloudflare Pages, ...).

Fits Cloudflare Workers's small worker size requirement like a glove.

It's just a middleware

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.

Pre-rendering (aka SSG)

You can also pre-render your app to remove the need for a production Node.js server and deploy to any static host (Cloudflare Pages, GitHub Pages, Netlify, ...).

$ vite build 
vite building for production...
✓ 42 modules transformed.
vite-plugin-ssr pre-rendering HTML...
✓ 3 HTML documents pre-rendered.
dist/client/index.html
dist/client/about/index.html
dist/client/404.html

Cloudflare Workers + `vite-plugin-ssr` = ❤

Thanks to vite-plugin-ssr's lean architecture, your app is much less limited by Cloudflare Workers's 1MB bundle size limit.

💎 Rock-solid

The source code of vite-plugin-ssr has no known bugs, every release is assailed against a heavy suite of automated tests, and it's used in production by many companies.

🚀 Scalable

DX that scales to hundreds of kLOCs with HMR & development startup that stays fast. Powered by Vite .

Architectural flexibility that scales from small hobby projects to large-scale enterprise projects.

Lazy-transpiling

One of Vite's foundational novelty is lazy-transpiled development: instead of transpiling your entire codebase before starting developing, Vite transpiles only loaded code.

For example, if you define 100 pages and then open a page in the browser, then only the code for that one page is transpiled while the code for all other 99 pages is left untouched.

Thanks to lazy-transpiling, you can scale to a (very) large codebase while keeping fast HMR & development start.

No black box

At scale, Next.js/Nuxt's black-box nature become painfully limiting.

In contrast, vite-plugin-ssr is transparent: you keep control over both the server- and browser-side.

As you scale, you usually need increasingly custom SSR integrations; vite-plugin-ssr's flexibility accommodates such needs.

Vite + SSR + Scale = ❤

At (very) large scale, you can progressively replace vite-plugin-ssr with Vite's native SSR API which is lower-level and highly flexible. If you're Netflix and perfecting UX leads to a substantial revenue increase, then vite-plugin-ssr and Vite's native SSR API are what you are looking for.

Large production apps are using Vite for its speed.

Tweet 1398240747661533184

Tweet 1392901819135795202

Tweet 1409983946201370626

Tweet 1423324336845426691

⚡ Fast

State-of-the-art performance with Code Splitting, Client-side Routing, Link Prefetching, and Fast Production Cold Starts.

Lighthouse Score: 100%.

💖 Fun

vite-plugin-ssr is simple, clear, and robust: no magic, no unexpected behavior, no conflation, no bugs (known in vite-plugin-ssr's source code).

With vite-plugin-ssr, you are under control which is addictively fun.

Build Your Own Framework

Use vite-plugin-ssr to Build Your Own Framework. Hundreds of lines of code are enough to build your own Next.js / Nuxt.

Build internal company frameworks to scale your teams, or enhance your product with a bespoke framework to delight your users, or just keep architectural control.