Vike

The V1 design is released, see migration guide.

Vite-plugin-ssr has been renamed Vike, see migration guide.

🔧 Control

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

With Vike, you integrate tools manually and keep architectural control.

With Vike, you control how your pages are rendered:

// /pages/about/+Page.js
// Environment: browser and server
 
export { Page }
 
// Vike 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.
function Page() {
  return <>
    <h1>About</h1>
    <p>This is our first Vike app.</p>
  </>
}

// /renderer/+onRenderHtml.js
// Environment: server
 
export { onRenderHtml }
 
import { escapeInject, dangerouslySkipEscape } from 'vike/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
async function onRenderHtml({ Page }) {
  const pageHtml = await renderToHtml(Page)
  const title = 'My first Vike app'
  return escapeInject`<!DOCTYPE html>
    <html>
      <head>
        <title>{title}</title>
      </head>
      <body>
        <div id="page-root">${dangerouslySkipEscape(pageHtml)}</div>
      </body>
    </html>`
}

// /renderer/+onRenderClient.js
// Environment: browser
 
export { onRenderClient }
 
import { hydrateDom } from 'my-favorite-ui-framework'
 
// You control how `Page` is hydrated
async function onRenderClient({ Page }) {
  await hydrateDom(Page)
}

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

📦 Zero-config

Vike gives you control only where it matters.

Everything else just works without the need to configure anything.

💫 Simple

With Vike 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 Vike and your UI framework (React/Vue/...) makes reasoning about your app easier.

Less easy, but simpler

With Vike 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, Vike 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: Vike 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, Vike is already stable: breaking changes are only about improving the design of Vike which means that you can expect your integrations to keep working in the future.

Clean cut

There is no conflation between Vike 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/movie/@id/+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://vike.dev, 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 a server, Vike is just a middleware:

// renderPage() doesn't depend on Node.js and can be used within any JavaScript environment:
// Node.js, AWS, Cloudflare, Vercel, Deno, Bun, Lagon, ...
import { renderPage } from 'vike/server'
 
// Any server: Express.js, Cloudflare Worker, AWS Lambda Function, Fastify, Hono, Nitro, ...
server.addMiddleware({
  method: 'GET',
  route: '*', // catch-all
  async handler(request) {
    const pageContextInit = { urlOriginal: request.url }
    const pageContext = await renderPage(pageContextInit)
    // `body` is the HTML of the page with a route matching pageContextInit.urlOriginal
    const { body, statusCode, headers } = pageContext.httpResponse
    const response = { body, statusCode, headers }
    return response
  }
})

You can embed renderPage() into any server.

Alternatively, instead of using renderPage(), you can pre-render your pages and 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.
vike pre-rendering HTML...
✓ 3 HTML documents pre-rendered.
dist/client/index.html
dist/client/about/index.html
dist/client/404.html

Cloudflare Workers + Vike = ❤

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

💎 Rock-solid

The source code of Vike 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, Vike is transparent: you keep control over both the server- and browser-side.

As you scale, you usually need increasingly custom SSR integrations; Vike's flexibility accommodates such needs.

Vite + SSR + Scale = ❤

At (very) large scale, you can progressively replace Vike 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 Vike 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

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

With Vike, you are under control which is addictively fun.

Build Your Own Framework

Use Vike 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.