Vike
Vike is a full-stack Web framework based on Vite, using file-based routing and convention over configuration, suitable for various scenarios from static sites to dynamic applications.
Note:
@edgeone/vite adapter adopts the Universal Deploy protocol starting from version 2.0, requiring Vike ≥ 0.4.257, Node.js 18+, and Vite 7+. For projects not yet upgraded to Vike 0.4.257, continue to use @edgeone/vite@1.Core Features (Vike)
File-based routing: Automatically generate routes based on the agreed files in the
pages/ directory (+Page.*, +config.ts, +data.ts, +onBeforeRender.ts), supporting dynamic routing (such as pages/posts/@category/@slug/).Per-page configuration: Each route is independently configurable for
prerender, stream, passToClient, etc., enabling SSG, streaming, or SSR per page without a one-size-fits-all global approach.Data and lifecycle: Fetch data on the server side via
+data.ts and inject it into the webpage, modify pageContext via +onBeforeRender before rendering, with clear separation between data and rendering logic.Multi-view layer: The primary application can use React (vike-react), Vue (vike-vue), or Svelte (vike-svelte); within the same project, different frameworks can be used per route.
Vite-driven: Both build and development are based on Vite, supporting rapid HMR, code splitting and TypeScript, with ecological compatibility with the existing Vite ecosystem.
Advantages
Lightweight and flexible: Seamlessly integrate with the Vite ecosystem, with consistent build experience, rapid HMR and efficient packaging.
Per-page control: Within the same project, you can choose SSR, SSG, or streaming rendering per route without a global unified solution, making it easy to optimize performance and SEO.
Multi-framework option: Support React, Vue, Svelte, and can be used per route within the same application, with cost-effective migration or mixed use.
Type Friendly: Works well with TypeScript, with
pageContext, routing parameters and data stream typed end-to-end.Wide scenario coverage: From static websites and document sites to applications with authentication and dynamic data, it can handle all with flexible deployment methods.
Quick Start
Start deployment of a Vike project on EdgeOne Pages:
Import a Vike project from a Git repository.
Select the Vike Template from the Pages template library.
Use the Vike sample project.
In this template, the page to framework mapping is: homepage `/` → React, SSG page `/ssg` → Vue, Posts dynamic routing `/posts/@category/@slug` → Svelte, making it easy to experience view layer switching by route within the same application.
Vike Support on Pages
Pages support Vike projects via the
@edgeone/vite adapter. The following table lists the key characteristics currently supported. The platform will continue to refine support, and experimental features may not yet be fully stable.Vike Feature | Support Status |
File-based routing (pages/) | ✓ |
server-side rendering (SSR) | ✓ |
Static site generation (SSG / prerender) | ✓ |
HTML streaming (stream) | ✓ |
Dynamic Routing (@param) | ✓ |
Multi-view layer (React / Vue / Svelte) | ✓ |
Data and Lifecycle (+data.ts) | ✓ |
server API interface | Not supported. |
Deploying a Vike Project on Pages
Pages deploy Vike projects via the
@edgeone/vite adapter. Starting with version 2.0, the adapter is based on Universal Deploy (UD) — a common deployment protocol for the Vite ecosystem — aiming to cover deployment for ALL Vite full-stack frameworks with a single adapter.When Vike enables
server: true, it will register its own server entry to the UD store during the build process. The @edgeone/vite adapter needs to read these entries from the store to automatically perform packaging and deployment product generation, without any special handling targeting Vike. This means:Common Vite adapter: Currently
@edgeone/vite has supported Vike, TanStack Start, and native Vite SSR. In the future, any full-stack Vite framework with UD protocol integration will automatically obtain Pages deployment capability, without waiting for an adapter update.Zero framework configuration: You don't need to manually specify framework-specific parameters like `serverWrapper` and `serverEntry` (these were legacy adapter practices). The adapter auto-discovers everything via the UD protocol.
Natural decoupling: Framework upgrade will not affect adapter compatibility, nor will adapter upgrade destroy framework behavior. Both independently evolve through the UD protocol.
1. Installing the Vike Adapter for Pages
@edgeone/vite can automatically adapt the build results of Vike (based on Vite) applications to the Pages platform. Installation command:npm install @edgeone/vite
@edgeone/vite adapter has two major versions: 2.x (based on UD protocol, recommended), suitable for Vike ≥ 0.4.257; 1.x applicable to earlier Vike editions. According to your Vike version, refer to the corresponding configuration steps.2. Configuring Vite.Config
In the project's
vite.config.ts (or vite.config.js), integrate the adapter. 2.x uses the UD protocol for auto-discovery of framework entry, and the serverWrapper parameter in 1.x is no longer needed to specify the framework:// ——— Adapter 2.x ———import { defineConfig } from "vite";import vike from "vike/plugin";import { edgeoneAdapter } from "@edgeone/vite"; // named exportexport default defineConfig({plugins: [vike(), ...edgeoneAdapter()], // spread operator, no need for framework parameter});// ——— Adapter 1.x ———import { defineConfig } from "vite";import vike from "vike/plugin";import edgeone from "@edgeone/vite"; // default exportexport default defineConfig({plugins: [vike(), edgeone({ serverWrapper: "vike" })], // need to be specified serverWrapper});
3. Configuring Vike
Adapter 2.x requires enabling
server: true in pages/+config.ts first to let Vike register the server entry to the UD store, while 1.x does not need this step.// pages/+config.ts (required only for 2.x)export default {server: true,}
4. Deploying a Project
Git Connection Deployment
After seamless integration with the adapter, submit the project to GitHub or GitLab and use Git connection deployment.
CLI Deployment
Install the scaffolding tool for Pages (see EdgeOne CLI), then use the command to deploy once configured:
edgeone pages deploy
Server-Side Rendering (SSR)
In Vike, pages with
prerender: true not set default to server-side rendering: each time a request is made, the server executes data logic and renders the page, then returns the complete HTML.data: Define server-side data functions in
+data.ts. The return value will be injected into pageContext. Page components can use it via usePageContext() or props. It supports async, making it easy to fetch APIs and read cookies at the time of request.Pre-render hook:
+onBeforeRender.ts executes before rendering, allowing modification of pageContext, performing redirection, or determining whether to render based on routeParams/request information.Per-page independence: SSR and SSG/streaming are configured per route, allowing some webpages in the same application to use SSR while others just pre-render.
Build Settings: The build command
npm run build (internal vike build), with the output directory dist (generated by Vite + @edgeone/vite).Static Site Generation (SSG)
To pre-render a page as static HTML during build, set
prerender: true in the page's +config.ts. The build stage will generate corresponding static files. After deployment, the route will directly hit the static files without the need to render on the server each time a request is made.Example (
pages/ssg/+config.ts):export default {prerender: true,};
Streaming Rendering
Streaming rendering means the server does not wait for the entire page to be ready, but first outputs partial HTML (such as the shell or above-the-fold content), then continuously pushes subsequent content in chunks, thereby improving TTFB and above-the-fold experience. Pages deploying Vike projects support this capability at the page level: set
stream: true in the corresponding route's +config.ts to enable HTML streaming output for that page, which can be configured per page like SSR/SSG and used together with other routes.How the view layer cooperates depends on the framework used (for example, async components, data dependency boundaries), determined by the framework's agreement and API. Pages is only responsible for enabling Vike's streaming response on the server side as configured.
Example (
pages/stream/+config.ts):import type { Config } from "vike/types";export default {stream: true,} satisfies Config;
More Resources
