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:
Currently Pages supports Vike 1.0.5+ and full-stack deployment. Node.js 22 and above versions.
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
1. Installing the Vike Adapter for Pages
The Vike adapter for Pages is @edgeone/vite, which can automatically adapt the build results of Vike (based on Vite) applications to the Pages platform. Installation command:
npm install @edgeone/vite
2. Configuring Vite.Config
In the project's
vite.config.ts (or vite.config.js), integrate the adapter and designate serverWrapper: 'vike':import { defineConfig } from "vite";import vike from "vike/plugin";import edgeone from "@edgeone/vite";export default defineConfig({plugins: [vike(), edgeone({ serverWrapper: "vike" })],});
The build command uses
npm run build (internal execution vike build), with the output directory as dist for Pages usage.edgeone() allows input of the following options (all are selectable):serverWrapper (
'vike' | 'autoDetect' | 'ssrRender' | 'webHandler'): Server runtime mode. Set it to 'vike' when deploying a Vike project; 'autoDetect' automatically selects based on whether to use the vike plug-in; ssrRender / webHandler are common SSR or Web Handler presets.clientBuildDir (
string): Client build artifact directory, overwriting the default dist/client detection logic.serverBuildDir (
string): Server build product directory, overwriting the default dist/server detection logic.serverEntry (
string): Server entry file path, overwriting the default entry-server.js detection logic.routes (
string[]): Custom routing list (such as ['/','/about']). If not provided, Vike will auto-scan from pages/.ssr (
boolean): Whether to enable SSR, default inferred by the adapter based on the project.3. Deploying the 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;
