[Framework]: Dinou

[roggc]

Name

Dinou

Homepage

https://dinou.dev

Install instructions

https://dinou.dev/docs/getting-started

Is your framework open source?

Yes

Well maintained

Dinou has had 287 commits since its initial commit, and follows Keep a Changelog and Semantic Versioning conventions, with every release tracked in a public CHANGELOG.md. As an example of recent release cadence and responsiveness:

[4.0.16] - 2026-06-30

• Fixed: cookie deletion now correctly serializes domain, secure, and sameSite, so browsers match scopes and delete cookies as expected.
• Fixed: a defensive fallback in the redirect resolver prevents server crashes when a destination path is invalid.

[4.0.13] - 2026-06-29

• Added: full redirect support across Server Components, getProps, Server Actions, and client-side SPA navigation.
• Security: redirect sanitization blocking unsafe external domains, protocol-relative URLs, and javascript: payloads.

[4.0.12] - 2026-06-28

• Security: replaced inline <script> injection in client-side proxies with a data-driven, CSP-compatible streaming protocol, removing all 'unsafe-inline' requirements.

Active community

Dinou is currently maintained and promoted by a single developer. The project has 10 GitHub stars and 1 fork (github.com/roggc/dinou) at this stage, and I am the primary author of public content about it so far. Community adoption is still early — I'm actively working on growing it, and a listing on react.dev would meaningfully help with that visibility.

Clear onboarding

https://dinou.dev/docs/getting-started

There are two ways to start:

CLI (fastest):

npx create-dinou@latest my-app
cd my-app
npm run dev

Manual setup:

mkdir my-app && cd my-app
npm init -y
npm i react react-dom dinou
mkdir src

Create src/page.jsx:

"use client"
export default function Page(){
  return <div>Hi from Dinou!</div>
}

Then run npx dinou dev.

Ecosystem compatibility

Dinou has been tested and confirmed to work with common React ecosystem tools, including Tailwind CSS, CSS Modules, and global CSS out of the box; state libraries such as Jotai (via jotai-wrapper); and react-enhanced-suspense for granular, key-based data re-fetching. I haven't identified incompatibilities with standard React libraries so far, though as a young framework it hasn't been exercised against the full breadth of the ecosystem yet.

Self-hosting option

The framework runs on a standard Node.js/Express server (./dinou/core/server.js) using the --conditions react-server flag and a custom module loader for native React Server Components support.

If not ejected (installed manually):

npx dinou build
npx dinou start

If ejected, or installed via npx create-dinou@latest my-app:

npm run build
npm run start

Three bundlers are supported for the build: esbuild (default), Rollup, and Webpack (npm run build:rollup, etc).

Limitations when self-hosting: all features (SSR, RSC, ISG/ISR) work fully on any environment that allows passing custom Node.js flags at runtime, since the production server requires --conditions react-server. VPS providers, Docker containers, and platforms like DigitalOcean App Platform, Render, Fly.io, or Railway all work. Platforms that don't allow custom start commands or Node flags — Netlify is a current example — aren't supported yet. Beyond that, there are no cloud or third-party service dependencies.

Server required: yes, a Node.js runtime is required to execute the production backend and handle server-side rendering.

Example package.json scripts when ejected:

{
  "scripts": {
    "dev": "npm run dev:esbuild",
    "build": "npm run build:esbuild",
    "start": "npm run start:esbuild",
    "dev:rollup": "concurrently \"npm run dev:express\" \"npm run dev_rollup\"",
    "build:rollup": "cross-env NODE_ENV=production rollup -c ./dinou/rollup/rollup.config.js",
    "start:rollup": "cross-env NODE_ENV=production node --conditions react-server --import ./dinou/core/register-loader.mjs ./dinou/core/server.js",
    "dev:webpack": "concurrently \"npm run dev:express:webpack\" \"npm run dev_webpack\"",
    "build:webpack": "cross-env NODE_ENV=production webpack --config dinou/webpack/webpack.config.js",
    "start:webpack": "cross-env NODE_ENV=production DINOU_BUILD_TOOL=webpack node --conditions react-server --import ./dinou/core/register-loader.mjs ./dinou/core/server.js",
    "dev:express": "node --conditions react-server --import ./dinou/core/register-loader.mjs ./dinou/core/server.js",
    "build:esbuild": "cross-env NODE_ENV=production node dinou/esbuild/build.mjs",
    "start:esbuild": "cross-env NODE_ENV=production node --conditions react-server --import ./dinou/core/register-loader.mjs ./dinou/core/server.js"
  }
}

Developer Experience

Fast Refresh is currently supported when developing with esbuild (npm run dev) and Rollup (npm run dev:rollup). Webpack support for Fast Refresh in dev mode is planned but not yet implemented. React Compiler is integrated across all three bundlers: Rollup (dev and build), Webpack (dev and build), and esbuild (build only, to keep dev startup fast).

User Experience

Dinou is a lightweight, full-stack React 19 framework for building high-performance, responsive applications. It integrates React Server Components (RSC), Server Functions, and streaming SSR out of the box, across three interchangeable bundlers (esbuild, Rollup, Webpack).

A key architectural feature is complete ejectability: npm run eject copies the entire build pipeline, compiler configuration, and runtime server core into the local codebase for full custom control, while the framework also works out-of-the-box as a standard, unejected npm dependency for projects that don't need that.

Routing is file-system based (page.jsx, layout.jsx, error.jsx, not_found.jsx) with dynamic, optional, and catch-all segments, nested layouts, and parallel route slots (@slot). The whole routing tree is resolved into an in-memory Virtual File System at server startup, so production route matching is O(1) with no disk I/O on the request path.

Rendering is hybrid by default: pages are statically generated (SSG) unless they read request-specific data (cookies, headers, search params), in which case Dinou automatically falls back to SSR. On-demand Incremental Static Generation (ISG) promotes dynamic routes to static once they prove eligible, background revalidation (ISR) refreshes expired static pages, and writes are atomic (temp file + rename) to avoid corruption under concurrent traffic.

Data fetching happens directly inside async Server Components. A single getProps function exported from page_functions.ts can resolve data for both a route's layout and page in one pass (using Promise.all for concurrent queries), avoiding layout-to-page fetch waterfalls.

Full documentation: https://dinou.dev/docs

Compatible with our future vision for React

Dinou is designed around Server Components and Server Functions as the foundation for full-stack React apps. It builds directly on React 19's native rendering APIs (renderToPipeableStream, react-server-dom-webpack) rather than inventing a parallel component model — the custom machinery in Dinou (process isolation between the RSC and SSR rendering environments, the in-memory routing VFS, the module loader) exists to make those native APIs runnable on a plain Node/Express server, not to replace them.

One pattern unique to Dinou — documented as the "Dinou Pattern" — is that Server Functions can return rendered Client Components, not just data. After a mutation, a Server Function can return a small "headless" Client Component that updates a global state atom (e.g. via Jotai) on mount; combined with react-enhanced-suspense bound to that state as a resourceId, only the affected Suspense boundary re-fetches its data, without a full page reload. Full details: https://dinou.dev/docs/data-fetching