Dinouv7
npmGitHub
Dinou v7
React 19 Framework

Introduction to Dinou

A transparent, lightweight, and 100% ejectable React 19 framework. Built on web standards with intuitive file-system routing, predictable caching, and multi-runtime freedom.

React 19 Native
Tri-Bundler (esbuild / Rollup / Webpack)
2D Caching & PPR
100% Ejectable
Universal Deploy

1. Quick Start in 30 Seconds

The fastest way to get started with Dinou is using the official CLI starter:

# Create a new project with the interactive wizard
npx create-dinou@latest my-app
# or
npm create dinou@latest my-app

# Navigate to project and launch dev server
cd my-app
npm run dev
Instant Dev Server: Boots on http://localhost:3000 with in-memory Hot Module Replacement (HMR) and instant CSS reload.
Installation Guide

2. Core Capabilities

Dinou provides a complete, modern toolchain focused on clarity, performance, and developer freedom:

React 19 & RSC First-Class
  • Components render on the server by default with zero client JavaScript overhead.
  • Native support for Server Actions and Server Functions ('use server').
  • Direct integration with React 19 Suspense streaming for fast, progressive UI delivery.
Suspense-Wrapped Server Functions from Client Components
  • Seamlessly call asynchronous server functions directly from client components ('use client') wrapped inside <Suspense> boundaries.
  • Eliminates boilerplate API routes, synthetic fetch hooks, and manual loading state management.
  • The server executes the logic and streams the response directly to the client fallback.
Static by Default (SSG), ISR & Dynamic SSR
  • Routes are pre-rendered statically by default (SSG) for maximum performance and instant CDN delivery.
  • Incremental Static Regeneration (ISR) is declared simply with revalidate in seconds (e.g. revalidate = 60) in companion page_functions.ts files.
  • Live on-demand server rendering (SSR) is activated whenever revalidate = 0 or dynamic request parameters are accessed.
  • Clean server data fetching: getProps returns data directly passed to your component as typed props.
2D Layered Caching & Partial Prerendering (PPR)
  • Horizontal layout caching: Layouts define their own TTLs via layout_functions.ts, preserving layout state across route transitions without unmounting or re-rendering child trees.
  • Vertical component caching: Micro-cache expensive Server Components with <DinouCacheSlot> and refresh them independently from the client.
  • Partial Prerendering (PPR): Serve an instant static shell at edge CDN latency (<20ms) while dynamic components concurrently stream into Suspense holes.
Intuitive File-System Router
  • Clean file structure inside src/ where folders directly map to URLs.
  • Support for nested layouts (layout.tsx), dynamic parameter segments ([slug]), and route groups.
  • Routing-ignored folders prefixed with _ (e.g. _draft, _legacy) allow you to collocate scratch work or private modules without exposing them as endpoints.
Type-Safe Routing & Compile-Time Autocompletion
  • Automatic TypeScript route generation provides full IDE autocompletion for <Link href="..."> and navigation hooks.
  • Zero runtime overhead: route type checking happens during compilation with zero bytes added to the client bundle.
  • Compile-time dead-link validation prevents broken links from reaching production.
Universal Multi-Runtime Deployment (Deploy Everywhere)
  • Deploy the exact same application code to Node.js servers, Bun standalone single-binary executables, Deno, or Cloudflare Workers at the edge.
  • Supports pure static site export (SSG) for static hosts like Netlify, Vercel, or GitHub Pages.
Single-Process Dual-Bundle Engine (0-Fork)

React 19 requires conflicting module conditions: "react-server" for Server Components vs. "browser" for SSR. Instead of spawning separate Node.js subprocesses via child_process.fork(), Dinou compiles both in a single in-memory process through a 3-pass pipeline:

  • Pass A (RSC Engine): Bundles via bundler with ["react-server"] package export conditions, binding Server Functions and generating client reference descriptors.
  • Pass B (SSR Engine): Bundles via bundler with ["browser"] package export conditions, packaging react-dom/server.edge and client hydration manifests.
  • Pass C (Orchestration): Bridges RSC and SSR via standard W3C ReadableStream with zero disk I/O and zero IPC serialization latency.
  • Deploy Anywhere: Halves memory consumption and enables native execution on edge runtimes (Cloudflare Workers, Deno, Bun) where process spawning is strictly prohibited. Read architectural specification →
Zero-Disk In-Memory Dev Experience (DX)
  • Development builds emit directly to in-memory buffers, completely bypassing disk I/O.
  • Instant React Fast Refresh, live CSS injection, and rapid SWC transform caching.
Tri-Bundler Freedom (esbuild, Rollup, Webpack)
  • Default to esbuild for blazing fast development bundling and lightning-quick compilation.
  • Switch seamlessly to Rollup or Webpack in dinou.config.ts whenever your application needs specialized enterprise plugins or legacy transforms with complete feature parity.
100% Ejectable Architecture (Total Stack Ownership)
  • Run npm run eject at any time: Dinou copies its entire internal engine, server, and bundler configurations directly into your repository.
  • Inspect, customize, or maintain the framework code on your own terms with zero vendor lock-in or dependency on closed-source packages.

3. Why Dinou? Origin & Evolution

To understand Dinou, it helps to understand the real problem that sparked its creation.

The Origin: Seamless Suspense & Server Functions

Dinou started with a very concrete need in modern React development: calling Server Functions ('use server') wrapped in React Suspense directly from Client Components.

Existing frameworks either did not allow this pattern, treated it as an edge case, or forced developers into heavy workarounds—writing synthetic REST/GraphQL endpoints, manual fetch wrappers, and complex client-side state flags just to stream a server result into a UI fallback.

The initial mission of Dinou was simple and direct: build a clean execution engine where a Client Component could invoke an asynchronous server action naturally inside a standard React 19 <Suspense> boundary, letting React handle streaming and fallbacks the way it was designed to.

The Evolution: A Transparent Full-Stack Framework

Solving that core problem cleanly required opening up the framework black box. Rather than piling monkey-patches onto an opaque compiler, Dinou was re-architected from first principles using standard Web APIs (Request, Response, ReadableStream).

From that foundation, Dinou naturally evolved into a complete full-stack framework: adding independent layout caching (layout_functions.ts), micro-caching with <DinouCacheSlot>, Partial Prerendering (PPR), multi-runtime portability (Node, Bun, Deno, Cloudflare Workers), and a 100% ejectable codebase.

4. AI-Friendly by Design

In the era of AI coding assistants (such as Google Antigravity, Claude, ChatGPT, and Cursor), framework architecture must be re-evaluated. Large, monolithic frameworks with deeply nested proprietary abstractions require excessive context exploration and frequently lead to hallucinations when asking AI models to debug or extend application code.

Dinou is engineered to be readily analyzed, understood, and modified by both human developers and AI agents. Its engine is lean, transparent, and strictly adheres to standard React and web platform primitives.

Effortless Context Ingestion & Full Ejectability

While common needs like custom middlewares, request lifecycle hooks, and plugins are handled cleanly through dinou.config.mjs, Dinou offers an unmatched advantage for AI-assisted workflows:

  • Immediate Context Comprehension: Because Dinou avoids layers of hidden macros and convoluted runtime indirection, coding assistants can ingest the entire execution flow in a single prompt, diagnosing errors deterministically without hallucinations.
  • Ejection for Edge-Case Fixes & Unreleased Features: In the rare scenario where your application encounters an internal engine bug or requires an unreleased low-level feature, running npm run eject copies the complete, readable engine into your repository. Thanks to Dinou's lean codebase, an AI agent can ingest the internal engine in seconds, inspect the exact execution flow, and autonomously patch or implement the required feature directly in your project.

5. Project Anatomy & Conventions

Dinou projects follow clean, predictable directory conventions. All application logic lives inside src/, while public assets are served directly from public/:

Directory Tree
my-app/
├── public/                    # Static root assets (served directly at /)
│   ├── favicon.ico
│   ├── robots.txt
│   └── site.webmanifest
├── src/
│   ├── page.tsx               # Root page (/)
│   ├── layout.tsx             # Root layout & shell
│   ├── layout_functions.ts    # Independent layout data fetching & caching
│   ├── globals.css            # Global styles & Tailwind
│   ├── _draft/                # 🚫 Routing-ignored folder (escapes router scan)
│   │   └── page.tsx           # Never routed (returns 404 Not Found)
│   └── docs/
│       ├── page.tsx           # /docs documentation route
│       ├── page_functions.ts  # Server data fetching & revalidate seconds
│       ├── layout.tsx         # /docs nested layout & sidebar
│       └── [slug]/
│           ├── page.tsx       # Dynamic segment (/docs/:slug)
│           └── page_functions.ts # Dynamic validation & ISR
├── dinou.config.ts            # Framework configuration (bundler, ppr, onRequest)
├── package.json
└── tsconfig.json
Routing-Ignored Folders (_ prefix)

Any folder prefixed with an underscore _ (such as _draft or _legacy) completely escapes the Dinou routing system. Even if these folders contain page.tsx files, they are never exposed as public endpoints. This makes them ideal for staging work-in-progress code or keeping internal helper components collocated near your routes.

Next
Installation