One

One is a full-stack, cross-platform React framework and multi-target rendering engine designed to build web and native applications from a single codebase. It utilizes a Vite-based build pipeline to manage shared components while providing a type-safe file-system router that automatically generates navigation definitions.

The framework distinguishes itself by supporting a hybrid rendering strategy, allowing individual routes to be configured as static sites, server-rendered pages, or single-page applications. It employs platform-specific logic resolution and a shared Vite plugin to coordinate compilation for both web and native target environments.

The system covers a broad set of capabilities including server-side data loaders, API route management, and middleware-based request interception. It provides tools for native device feature integration and bridge-based layouts for mobile navigation, alongside performance optimizations such as parallel static generation and asset preloading.

Applications can be deployed to production servers or serverless edge platforms including Vercel and Cloudflare.

Features

Full-Stack Web Development - Provides an integrated environment for building scalable server-side APIs and client-side interfaces in one codebase.
File-System Based Routing - Maps application URLs to the directory structure automatically to generate type-safe navigation links.
Static Page Rendering - Pre-renders HTML and CSS at build-time to enable fast delivery via CDN without server-side JavaScript.
Platform-Specific Bundling - Bundles application code using high-performance tools or native-specific bundlers depending on the target platform.
Vite Build Pipelines - Utilizes a single Vite plugin to coordinate the compilation pipeline for both web and native targets.
Platform-Specific Source Resolution - Resolves platform-specific source files during the build process using file extensions like .web.js and .native.js.
Client Side Rendering - Generates JavaScript for the browser to render dynamic interfaces entirely on the client side.
Cross-Platform Application Development - Enables building applications that run across web and native mobile operating systems from a single codebase.
React Native Applications - Facilitates the development of native mobile applications using a unified build process.
Hybrid Rendering Architectures - Supports a rendering architecture that allows SSR, SSG, and SPA configurations on a per-route basis.
Multi-Platform Build Pipelines - Streamlines the build process using a flexible pipeline that supports multiple targets for web and native platforms.
API Route Management - Provides a system for creating server-side endpoints with integrated middleware for request interception.
React Full-Stack Frameworks - Provides a full-stack React framework with server-side rendering, file-based routing, and integrated backend functions.
Cross-Platform Development Frameworks - Offers a framework for building native desktop, mobile, and web applications from a single codebase.
Cross-Platform Frameworks - Enables developing for web and native targets from a single codebase using shared components and logic.
URL Route Mapping - Automatically maps application files and folder structures to URL paths using static and dynamic segments.
Platform-Specific Route Resolution - Serves different routes or page implementations based on the operating system using platform-specific file extensions.
File-System Routing - Automatically maps directory structures to application navigation paths with integrated type safety.
On-Demand Server Rendering - Generates HTML and CSS on the server for each request to provide dynamic content and better SEO.
Pre-Render Data Loaders - Provides route loaders that execute in parallel and deliver typed data to components before page rendering.
Hybrid Rendering Strategies - Allows individual routes to be configured as static sites, server-rendered pages, or single-page applications.
Route-Based Data Loading - Loads required route data using typed functions before the page renders to the user.
Type-Safe Navigation Frameworks - Generates static TypeScript definitions for route parameters and data loaders to ensure navigation type safety.
Server-Side Data Loaders - Implements server-side data loaders to retrieve required information before page rendering.
Type-Safe Routing Systems - Implements a routing system with end-to-end type safety generated from the project folder structure.
Parallel Static Generation - Uses parallel background processes to render static HTML pages at build time to reduce overall compilation time.
Serverless Deployment - Supports deploying applications to event-driven cloud environments such as Vercel and Cloudflare.
Edge Deployments - Offers simplified configuration for deploying serverless functions to edge networks for low-latency execution.
Native Layout Bridges - Communicates with native mobile navigation to implement platform-specific header and screen compositions.
Native Hardware Integrations - Integrates platform-specific mobile device hardware and OS features into application workflows.
Native Mobile App Development - Provides specialized development modes for creating high-performance native mobile applications.
Cross-Platform Data Integration - Loads data before rendering across web and native platforms using loaders that support caching and deduplication.
Edge Function Deployments - Supports deploying custom execution code to edge environments for low-latency request handling.
Request Context Management - Passes parsed data and shared state through sequential middlewares into final route handlers.
Request Interception Middleware - Processes incoming requests through a sequential chain of handlers for authentication and context management.
Environment Guards - Prevents modules from running in incorrect environments by limiting imports to specific server, client, native, or web targets.
Native Layout Builders - Implements native mobile layouts and header compositions through a bridge to native navigation systems.
Prefetching Navigations - Caches static payloads and preloads likely next routes based on user mouse movement for seamless transitions.
Proactive Cache Preloaders - Proactively loads necessary scripts during initial visits and link hovers to ensure instant navigation.
Nested Layouts - Wraps child routes in shared UI components using a file-system convention for nested layouts.
Production Application Servers - Includes a built-in production server to serve the application in a live environment.
Request Interception Middlewares - Runs custom logic before a request reaches its route to handle authentication, logging, and redirects.
Authorized Route Guarding - Intercepts requests during data loading to redirect unauthorized users before sending page content to the client.
Route Grouping - Clusters related routes into organizational folders that do not impact the final URL structure.
Logic Stripping - Fetches data on the server and removes the execution logic from the client bundle to reduce payload size.
Parallel Generation - Reduces build times by leveraging parallel worker threads to generate static HTML pages more quickly.

sveltejs/sapper

6,931View on GitHub

Sapper is a universal web application framework and server-side rendering framework for Svelte. It enables the development of applications that render views on the server for fast initial loads and hydrate them on the client for subsequent interactivity. The project features a file-based routing engine that maps URL paths to components based on the file system structure. It also functions as a static site generator, exporting production-ready HTML, CSS, and JavaScript files for hosting in environments without a live server. The framework covers full-stack development capabilities, including

react-static/react-static

10,343View on GitHub

react-static is a React static site generator that transforms components into static HTML files to improve page load speed and search engine optimization. It functions as a progressive web app framework, exporting static HTML that hydrates into a full interactive application to enable real-time updates and instant navigation. The project distinguishes itself as a static site asset optimizer, using code-splitting and an asset prefetching queue to reduce perceived load times. It includes a dedicated MDX content processor to generate routes from Markdown files with JSX and frontmatter, as well a

wakujs/waku

6,330View on GitHub

Waku is a minimal React framework built around React Server Components. It renders components exclusively on the server for data fetching and server-side logic, then hydrates client components in the browser for interactivity. The framework supports hybrid rendering, mixing static prerendering at build time with dynamic per-request rendering within a single application, and allows independently loading slice components that can be static or dynamic. The framework distinguishes itself through its file-based routing system that defines pages, layouts, and API endpoints by placing files in a dir

vikejs/vike

5,751View on GitHub

Vike is a full-stack web framework that provides server-side rendering with client-side hydration, static site generation, and file-based routing. It operates as a plugin-based web framework with a universal JavaScript runtime, allowing the same code to run on both server and client environments. The framework distinguishes itself through its flexible data fetching capabilities, enabling data retrieval at any lifecycle point including server start, browser start, or page render. Its plugin-based extensibility allows for custom integrations and modifications without altering the core framework

onejsone

Features

Open-source alternatives to One

sveltejs/sapper

react-static/react-static

wakujs/waku

vikejs/vike

Star history

Open-source alternatives to One

sveltejs/sapper

react-static/react-static

wakujs/waku

vikejs/vike