[Framework]: Dinou

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 over 290 commits since its initial commit and strictly follows Keep a Changelog and Semantic Versioning conventions. Every release is documented in a public CHANGELOG.md.

As an example of our development velocity and response to framework evolution, here are the recent release notes:

[5.0.0] - 2026-07-05

• Refactored (Native RSC Flight Payload Streaming): Replaced custom process-to-process JSON serialization with React's native RSC Flight payload streaming, utilizing createFromNodeStream on the SSR process for server hydration and component tree reconstruction.
• Added (Dynamic Parameter Validation): Added support for synchronous or asynchronous validateParams in page_functions.ts to sanitize dynamic route segments on the server prior to rendering, returning a 404 response immediately if invalid.
• Added (On-Demand ISG Control): Introduced allowISG in page_functions.ts to disable on-demand Incremental Static Generation (ISG) for undeclared route parameters, returning 404 instead.
• Added (Anti-Bot Shield): Integrated an in-memory Express middleware firewall to detect and intercept bot scanner probes instantly.

[4.0.16] - 2026-06-30

• Fixed: Cookie deletion now correctly serializes domain, secure, and sameSite parameters so browsers match scopes and delete cookies as expected.
• Fixed: Added defensive fallbacks in the redirect resolver to prevent server crashes when a destination path is invalid.

Active community

Dinou is currently maintained by a single developer. The project is in its early stages with 10 GitHub stars and 1 fork (github.com/roggc/dinou). While adoption is early-stage, I am actively supporting the codebase and working on growing the community. Inclusion in the react.dev directory would provide invaluable visibility to help attract early testers and contributors.

Clear onboarding

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

Getting started takes less than a minute:

CLI Scaffold (Recommended):

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 a Server Component page in src/page.jsx:

export default function Page() {
  return <h1>Hello from Dinou Server Components!</h1>;
}

Then run the development server directly:

npx dinou dev

Ecosystem compatibility

Dinou works out-of-the-box with standard React ecosystem tools:

• Styling: Built-in support for Tailwind CSS, CSS Modules (.module.css), and global CSS.
• State Management: Fully compatible with libraries like Jotai (or jotai-wrapper).
• Data Fetching / Re-fetching: Integrates with react-enhanced-suspense for granular key-based promise re-fetching on the client.

No incompatibilities with standard React 19 libraries have been identified. As a young framework, we continue to test compatibility across wider community tools.

Self-hosting option

Dinou runs on a standard Node.js/Express server.

Process Isolation Architecture:
Because the React Server Components runtime requires running Node with the --conditions react-server flag, but rendering the final HTML on the server (SSR) requires importing react-dom/server (which is incompatible with that flag in the same context), Dinou cleanly runs two isolated processes:

1. Main Process: Handles routing, Server Functions, and RSC compilation, running with the --conditions react-server flag.
2. Child Process (SSR side): Generates the final HTML by consuming the RSC Flight payload stream from the main process via React's native createFromNodeStream API, and outputs the stream using renderToPipeableStream.

Deployment Commands:
If installed as an npm dependency (unejected):

npx dinou build
npx dinou start

If ejected, or scaffolded via create-dinou:

npm run build
npm run start

Dinou is bundler-agnostic, supporting Esbuild (default), Rollup, and Webpack via execution scripts (e.g., npm run build:rollup).

Hosting compatibility:
All features (RSC, SSR, ISG/ISR) run on any cloud platform or hosting provider (e.g., DigitalOcean App Platform) that allows starting the Node.js process with the custom --conditions react-server flag. Platforms that forbid passing custom Node.js startup flags (such as Netlify) are not supported yet. There are no proprietary database or cloud service requirements.

Example of ejected package.json scripts:

{
  "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=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: Fully supported in development when using the Esbuild (npm run dev) or Rollup (npm run dev:rollup) compilation scripts.
• React Compiler: Automatically integrated to handle fine-grained memoization across all three bundler setups: Rollup (dev/build), Webpack (dev/build), and Esbuild (production build).
• Ejectability: Developers are never locked in. Running npm run eject copies the entire framework code (100% of it) into a local dinou/ directory in the user's project root. This includes the core of the framework and all three bundler configurations (Webpack, Rollup, and Esbuild), enabling developers to edit, debug, or customize the framework's internal code directly.

User Experience

Dinou is a lightweight-ejectable full-stack React 19 framework optimized for progressive rendering and deployment flexibility.

• Routing: File-system based supporting dynamic, optional, and catch-all path segments, nested layouts, and parallel routes (@slot with layout error containment). The routing hierarchy is compiled into an in-memory Virtual File System (VFS) at startup, ensuring O(1) matching.
• Zero-Config Hybrid Rendering: Static by default (SSG). Automatically falls back to dynamic request-time evaluation whenever request-specific context (cookies, headers, or query parameters) is read via the server-only getContext() API.
• Generation Strategies: Support for background Incremental Static Regeneration (ISR) and on-demand Incremental Static Generation (ISG). Static file writes in development and build steps are atomic (temporary file + rename swap) to prevent page corruption.
• Flexible Data Fetching: Supports fetching data directly inside async Server Components or via getProps(params) (without Suspense, preventing waterfalls). Alternatively, supports streaming data using Suspense wrapping Server Functions inside Server Components (HTML streaming), or client-side reactive streaming in Client Components (via react-enhanced-suspense).
• Page Functions (page_functions.ts): Allows page-level functions to inject static props (getProps(params)) avoiding waterfall fetches, pre-declare static paths (getStaticPaths), configure cache regeneration (revalidate), force dynamic request-time rendering (dynamic), validate path parameters (validateParams), or opt-out of on-demand ISG compilation (allowISG).

Compatible with our future vision for React

Dinou is designed around Server Components and Server Functions as the architectural baseline for full-stack applications. It builds on React 19's native streaming APIs (renderToPipeableStream, react-server-dom-webpack, and ESM stream parsing).

A key pattern unique to Dinou is the "Dinou Pattern" (documented at https://dinou.dev/docs/pattern): Server Functions can return rendered Client Components directly to the browser. For instance, a form mutation Server Function can return a headless Client Component that updates a global state atom (e.g., via Jotai) on mount. When paired with react-enhanced-suspense bound to that state atom's key as a resourceId, only the affected <Suspense> boundary is re-fetched and hydrated, bypassing full page reloads and providing a granular, reactive user experience.

Bắt đầu bằng cách xem lại trang chủ Dinou và tài liệu bắt đầu sử dụng, sau đó so sánh nội dung gửi lên với thư mục framework hiện có trên react.dev. Xác minh các thông tin đã nêu về React, Node.js và dịch vụ lưu trữ trước khi quyết định framework có đáp ứng các yêu cầu của thư mục hay không; công việc được xem là hoàn tất khi có quyết định đưa vào được ghi chép hoặc một tập hợp các thay đổi được yêu cầu đã được xác định rõ ràng.