Dinou docs

Dinou is a lightweight, ejectable, bundler-agnostic React framework built on React primitives.

Instead of wrapping React in layers of proprietary abstractions and complex configuration files, Dinou embraces React as it is. It aims to remain transparent, understandable, and under your absolute control.

💡 Core Philosophy

Dinou is built around four fundamental architectural pillars designed to give developers maximum flexibility without sacrificing the power of modern React.

React Primitives First

Dinou utilizes official React APIs instead of building a parallel ecosystem of proprietary abstractions. It integrates Server Components, Server Functions, Suspense, and Streaming natively. If you understand React, you understand Dinou.

Lightweight by Design

A minimal core with less complexity, fewer dependencies, and zero "magic". We keep the framework codebase small and approachable so that any developer can read, understand, and explain its entire pipeline.

Fully Ejectable

No vendor lock-in or black-box servers. With a single command (npm run eject), the entire framework server, compiler setup, and asset pipelines are copied directly into your repository, turning Dinou into a standard, fully customizable Express.js app.

Bundler Agnostic

You choose the compiler that best fits your target environment. Dinou features first-class, built-in integrations for Webpack, Rollup, and Esbuild, allowing you to compile the exact same application with different bundlers seamlessly.

🤖 AI-Friendly by Design

In the era of AI coding assistants, framework architecture needs to be re-evaluated. Large, black-box frameworks with massive abstractions require excessive context exploration and often lead to hallucinations when asking AI to debug or extend them.

Dinou is designed to be easily analyzed by both humans and AI agents. Because the codebase is small and adheres strictly to standard React and Node.js primitives:

How Transparency Empowers AI Pair Programming

Fast Context Window Loading: AI agents can read and understand the entire core routing, server, and build files within a single conversation session.
Accurate Bug Fixing: Standard Express middleware and React primitives make it easy for AI to trace execution paths and propose patches without breaking hidden framework internals.
Autonomous Ejected Refactoring: Once you eject, an AI agent can help you seamlessly add custom server logic (like custom Auth middlewares or i18n routing rewrites) directly in your server.js.

📦 Feature Catalog

Dinou provides a complete, modern stack for building full-stack web applications with high performance.

React Server Components (RSC)

Render React components on the server for faster initial page loads and smaller client bundles. Safely fetch database queries and write secure, server-side code directly inside your React components.

Server Functions ("use server")

Call server-side methods directly from client-side interactive buttons and forms. Dinou handles the RPC networking automatically, allowing you to return rich data, database mutations, or streaming React components back to the browser.

Hybrid Rendering Engine

Combine Server-Side Rendering (SSR), Static Site Generation (SSG), Incremental Static Generation (ISG), and background Incremental Static Regeneration (ISR) seamlessly in the same application.

On-Demand Cache Invalidation

Purge and regenerate static pages instantly on demand using revalidatePath(path) or tag-based queries with revalidateTag(tag). Perfect for blogs, e-commerce, and real-time inventory updates.

Granular Slot Error Boundaries

Parallel slot layouts isolated by directories starting with @ can fail gracefully. If a specific slot throws an error, it is caught locally by its local error.tsx without crashing the rest of the page layout or halting compiler builds.

Client-Side Router (SPA transitions)

Soft navigation transitions with prefetching on hover, cache busting via the fresh prop, and active loading indicators with the useNavigationLoading hook.

Why Dinou?