Vike — Flexible Vite-Powered Full-Stack Framework

Introduction

Vike (formerly vite-plugin-ssr) is a full-stack framework built on top of Vite that gives developers control over rendering strategies while providing framework-level features like file-system routing, data loading, and server-side rendering. Unlike opinionated frameworks, Vike lets you choose your UI library (React, Vue, Solid, or others) and rendering mode per page.

What Vike Does

• Provides server-side rendering, static site generation, and client-side rendering with per-page control over which strategy to use
• Implements file-system routing with support for parameterized routes, route guards, and nested layouts
• Offers a data loading system with hooks for fetching data on the server before rendering
• Integrates with any Vite-compatible UI library including React, Vue, Solid, Svelte, and Preact
• Supports deployment to Node.js servers, serverless platforms, edge runtimes, and static hosting

Architecture Overview

Vike extends Vite as a plugin, hooking into the build pipeline to handle server-side rendering and code splitting. Each page is defined by a set of files (+Page, +data, +guard, +Layout) that follow a convention-based structure. During server rendering, Vike resolves the matching route, runs data hooks, renders the page component to HTML, and injects hydration scripts. The client-side runtime handles navigation by fetching data and rendering pages without full page reloads. This architecture keeps Vike's core minimal while delegating UI rendering to the chosen framework's own SSR capabilities.

Self-Hosting & Configuration

• Install as a Vite plugin: npm install vike plus the integration package for your UI library (vike-react, vike-vue, vike-solid)
• Configure in vite.config.js by adding the Vike plugin alongside your UI framework's Vite plugin
• Deploy to any Node.js server (Express, Fastify, Hono), or use adapters for Vercel, Cloudflare Workers, and Netlify
• Per-page rendering configuration via +config files lets you mix SSR and SSG in the same project
• Environment variables and server-only code are handled through +server files that never ship to the client

Key Features

• Framework-agnostic: use React, Vue, Solid, Svelte, or any other UI library with the same routing and data loading API
• Per-page rendering strategy: choose SSR, SSG, or SPA mode for each route independently
• Pre-rendering support for generating static HTML at build time for pages that do not need runtime server rendering
• Route guards and authentication hooks that run before page rendering on both server and client
• First-class TypeScript support with typed route parameters and data loading hooks

Comparison with Similar Tools

• Next.js — React-only framework with tight Vercel integration; Vike is UI-library-agnostic and deployment-target-agnostic
• Nuxt — Vue-specific full-stack framework; Vike supports Vue with the same features but also supports React and Solid
• Astro — Content-focused framework with island architecture; Vike is better suited for interactive applications with client-side navigation
• SvelteKit — Svelte-specific framework; Vike provides similar capabilities but decouples the framework from the UI library choice
• Remix — React framework focused on web standards and progressive enhancement; Vike offers more control over rendering strategies per page

FAQ

Q: Is Vike a replacement for Next.js? A: Vike provides similar capabilities (SSR, SSG, routing, data loading) but is not tied to React or any specific deployment platform. Teams that want framework flexibility or custom rendering control may prefer Vike.

Q: Can I use Vike with an existing Vite project? A: Yes. Vike is a Vite plugin, so adding it to an existing Vite project requires installing the package and updating vite.config.js.

Q: Does Vike support serverless deployment? A: Yes. Vike can deploy to Vercel, Cloudflare Workers, Netlify Functions, AWS Lambda, and other serverless platforms through community adapters.

Q: How does Vike handle data fetching? A: Data fetching is done through +data files that export an async function. This function runs on the server during SSR and the result is serialized and passed to the page component.

Sources

• https://github.com/vikejs/vike
• https://vike.dev