# shakacode/react_on_rails architecture

> Architecture diagram of the GitHub repository shakacode/react_on_rails, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-23). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/shakacode/react_on_rails
- Repository: https://github.com/shakacode/react_on_rails

## Overview

React on Rails embeds React in Rails applications: a Rails view invokes a helper to render a registered component, sends props through server rendering, and delivers HTML that the browser hydrates. The OSS runtime provides Rails-oriented SSR and client rendering; Pro adds Node rendering, streaming, React Server Components, caching, and TanStack Router SSR. Generators and Shakapacker integration support app setup and bundle workflows. The README documents these capabilities, but sampled source is limited, so links among unsampled subsystems are not asserted.

Main entry points: [`react_on_rails/lib/react_on_rails/helper.rb`](https://github.com/shakacode/react_on_rails/blob/main/react_on_rails/lib/react_on_rails/helper.rb) (View helper), [`packages/react-on-rails-pro/src/createReactOnRailsPro.ts`](https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails-pro/src/createReactOnRailsPro.ts) (Pro runtime), [`packages/react-on-rails/src/ComponentRegistry.ts`](https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails/src/ComponentRegistry.ts) (Component registry), [`react_on_rails/app/helpers/react_on_rails_helper.rb`](https://github.com/shakacode/react_on_rails/blob/main/react_on_rails/app/helpers/react_on_rails_helper.rb) (Rails view)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_rails["Rails integration"]
  node_rails_view["Rails view"]
  node_rails_helper["View helper<br/>[helper.rb]"]
  node_rails_controller["Rails controller<br/>[controller.rb]"]
  node_render_pool["SSR pool"]
end

subgraph group_runtime["React runtime"]
  node_rails_js_render["JS SSR"]
  node_component_registry["Component registry"]
  node_client_hydration["Client hydration"]
end

subgraph group_pro["Pro rendering"]
  node_pro_runtime["Pro runtime"]
  node_pro_streaming["Streaming SSR"]
  node_rsc_route["RSC routes<br/>[RSCRoute.tsx]"]
  node_rsc_fetch["RSC fetching"]
  node_async_props["Async props"]
  node_cache["Fragment cache<br/>[CacheHandler.ts]"]
  node_redis_cache[("Redis cache")]
  node_tanstack["TanStack SSR<br/>[serverRender.ts]"]
end

subgraph group_node["Node renderer"]
  node_node_renderer["Node renderer"]
  node_node_worker["Renderer worker<br/>[worker.ts]"]
end

subgraph group_setup["Setup and bundling"]
  node_shakapacker["Shakapacker<br/>[packer_utils.rb]"]
  node_generators["Rails generators"]
  node_app_creator["App creator<br/>[create-app.ts]"]
end

node_developer(("App developer"))
node_browser(("Browser"))
node_redis[("Redis")]
node_rails_app(("Rails application"))

node_rails_view -->|"invokes"| node_rails_helper
node_rails_helper -->|"resolves component"| node_component_registry
node_rails_helper -->|"requests SSR"| node_render_pool
node_render_pool -->|"executes render"| node_rails_js_render
node_rails_js_render -->|"renders registered"| node_component_registry
node_rails_helper -->|"returns markup"| node_rails_view
node_browser -->|"loads page"| node_client_hydration
node_client_hydration -->|"resolves component"| node_component_registry
node_rails_controller -->|"renders view"| node_rails_helper
node_rails_app -.->|"uses Node SSR"| node_node_renderer
node_node_renderer -->|"dispatches render"| node_node_worker
node_pro_runtime -->|"provides streaming"| node_pro_streaming
node_pro_runtime -->|"provides RSC"| node_rsc_route
node_rsc_route -->|"coordinates props"| node_async_props
node_browser -->|"requests component"| node_rsc_fetch
node_pro_runtime -->|"uses cache"| node_cache
node_cache -.->|"delegates storage"| node_redis_cache
node_pro_runtime -->|"enables SSR"| node_tanstack
node_developer -->|"installs integration"| node_generators
node_generators -->|"configures bundling"| node_shakapacker
node_developer -->|"creates app"| node_app_creator

click node_rails_view "https://github.com/shakacode/react_on_rails/blob/main/react_on_rails/app/helpers/react_on_rails_helper.rb"
click node_rails_helper "https://github.com/shakacode/react_on_rails/blob/main/react_on_rails/lib/react_on_rails/helper.rb"
click node_rails_controller "https://github.com/shakacode/react_on_rails/blob/main/react_on_rails/lib/react_on_rails/controller.rb"
click node_render_pool "https://github.com/shakacode/react_on_rails/blob/main/react_on_rails/lib/react_on_rails/server_rendering_pool.rb"
click node_rails_js_render "https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails/src/serverRenderReactComponent.ts"
click node_component_registry "https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails/src/ComponentRegistry.ts"
click node_client_hydration "https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails/src/reactHydrateOrRender.ts"
click node_pro_runtime "https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails-pro/src/createReactOnRailsPro.ts"
click node_pro_streaming "https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails-pro/src/streamServerRenderedReactComponent.ts"
click node_rsc_route "https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails-pro/src/RSCRoute.tsx"
click node_rsc_fetch "https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails-pro/src/getReactServerComponent.client.ts"
click node_async_props "https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails-pro/src/AsyncPropsManager.ts"
click node_cache "https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails-pro/src/cache/CacheHandler.ts"
click node_redis_cache "https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails-pro/src/cache/RedisCacheHandler.ts"
click node_tanstack "https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails-pro/src/tanstack-router/serverRender.ts"
click node_node_renderer "https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails-pro-node-renderer/src/ReactOnRailsProNodeRenderer.ts"
click node_node_worker "https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails-pro-node-renderer/src/worker.ts"
click node_shakapacker "https://github.com/shakacode/react_on_rails/blob/main/react_on_rails/lib/react_on_rails/packer_utils.rb"
click node_generators "https://github.com/shakacode/react_on_rails/blob/main/react_on_rails/lib/generators/react_on_rails/install_generator.rb"
click node_app_creator "https://github.com/shakacode/react_on_rails/blob/main/packages/create-react-on-rails-app/src/create-app.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_rails_view,node_rails_helper,node_rails_controller,node_render_pool,node_browser toneBlue
class node_rails_js_render,node_component_registry,node_client_hydration,node_redis toneAmber
class node_pro_runtime,node_pro_streaming,node_rsc_route,node_rsc_fetch,node_async_props,node_cache,node_redis_cache,node_tanstack toneMint
class node_node_renderer,node_node_worker toneRose
class node_shakapacker,node_generators,node_app_creator,node_developer,node_rails_app toneIndigo
```

## Components

### Rails integration

- [Rails view](https://github.com/shakacode/react_on_rails/blob/main/react_on_rails/app/helpers/react_on_rails_helper.rb): `react_on_rails/app/helpers/react_on_rails_helper.rb`
- [View helper](https://github.com/shakacode/react_on_rails/blob/main/react_on_rails/lib/react_on_rails/helper.rb): `react_on_rails/lib/react_on_rails/helper.rb`
- [Rails controller](https://github.com/shakacode/react_on_rails/blob/main/react_on_rails/lib/react_on_rails/controller.rb): `react_on_rails/lib/react_on_rails/controller.rb`
- [SSR pool](https://github.com/shakacode/react_on_rails/blob/main/react_on_rails/lib/react_on_rails/server_rendering_pool.rb): `react_on_rails/lib/react_on_rails/server_rendering_pool.rb`

### React runtime

- [JS SSR](https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails/src/serverRenderReactComponent.ts): `packages/react-on-rails/src/serverRenderReactComponent.ts`
- [Component registry](https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails/src/ComponentRegistry.ts): `packages/react-on-rails/src/ComponentRegistry.ts`
- [Client hydration](https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails/src/reactHydrateOrRender.ts): `packages/react-on-rails/src/reactHydrateOrRender.ts`

### Pro rendering

- [Pro runtime](https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails-pro/src/createReactOnRailsPro.ts): `packages/react-on-rails-pro/src/createReactOnRailsPro.ts`
- [Streaming SSR](https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails-pro/src/streamServerRenderedReactComponent.ts): `packages/react-on-rails-pro/src/streamServerRenderedReactComponent.ts`
- [RSC routes](https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails-pro/src/RSCRoute.tsx): `packages/react-on-rails-pro/src/RSCRoute.tsx`
- [RSC fetching](https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails-pro/src/getReactServerComponent.client.ts): `packages/react-on-rails-pro/src/getReactServerComponent.client.ts`
- [Async props](https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails-pro/src/AsyncPropsManager.ts): `packages/react-on-rails-pro/src/AsyncPropsManager.ts`
- [Fragment cache](https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails-pro/src/cache/CacheHandler.ts): `packages/react-on-rails-pro/src/cache/CacheHandler.ts`
- [Redis cache](https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails-pro/src/cache/RedisCacheHandler.ts): `packages/react-on-rails-pro/src/cache/RedisCacheHandler.ts`
- [TanStack SSR](https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails-pro/src/tanstack-router/serverRender.ts): `packages/react-on-rails-pro/src/tanstack-router/serverRender.ts`

### Node renderer

- [Node renderer](https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails-pro-node-renderer/src/ReactOnRailsProNodeRenderer.ts): `packages/react-on-rails-pro-node-renderer/src/ReactOnRailsProNodeRenderer.ts`
- [Renderer worker](https://github.com/shakacode/react_on_rails/blob/main/packages/react-on-rails-pro-node-renderer/src/worker.ts): `packages/react-on-rails-pro-node-renderer/src/worker.ts`

### Setup and bundling

- [Shakapacker](https://github.com/shakacode/react_on_rails/blob/main/react_on_rails/lib/react_on_rails/packer_utils.rb): `react_on_rails/lib/react_on_rails/packer_utils.rb`
- [Rails generators](https://github.com/shakacode/react_on_rails/blob/main/react_on_rails/lib/generators/react_on_rails/install_generator.rb): `react_on_rails/lib/generators/react_on_rails/install_generator.rb`
- [App creator](https://github.com/shakacode/react_on_rails/blob/main/packages/create-react-on-rails-app/src/create-app.ts): `packages/create-react-on-rails-app/src/create-app.ts`

### Other components

- **App developer**
- **Browser**
- **Redis**
- **Rails application**

## Connections

- Rails view → View helper: invokes
- View helper → Component registry: resolves component
- View helper → SSR pool: requests SSR
- SSR pool → JS SSR: executes render
- JS SSR → Component registry: renders registered
- View helper → Rails view: returns markup
- Browser → Client hydration: loads page
- Client hydration → Component registry: resolves component
- Rails controller → View helper: renders view
- Rails application → Node renderer: uses Node SSR
- Node renderer → Renderer worker: dispatches render
- Pro runtime → Streaming SSR: provides streaming
- Pro runtime → RSC routes: provides RSC
- RSC routes → Async props: coordinates props
- Browser → RSC fetching: requests component
- Pro runtime → Fragment cache: uses cache
- Fragment cache → Redis cache: delegates storage
- Pro runtime → TanStack SSR: enables SSR
- App developer → Rails generators: installs integration
- Rails generators → Shakapacker: configures bundling
- App developer → App creator: creates app