Skip to main content

React on Rails Pro

Node rendering and caching performance enhancements for React on Rails. Now supports React 19 with updates to React on Rails! Check the React on Rails CHANGELOG.md for details and the updates to the loadable-components instructions.

Getting Started​

The best way to see how React on Rails Pro works is to install this repo locally and take a look at the example application:

spec/dummy

  1. Uses a Shakapacker standard configuration.
  2. Has pages that demonstrate:
    1. caching
    2. loadable-components
  3. Has all the basic react_on_rails specs that run against the Node Renderer
  4. Demonstrates using HMR and loadable-components with almost the same example that is present in loadable-components for SSR

See the README.md in those sample apps for more details.

Features​

Node Renderer​

The Pro Node Renderer replaces ExecJS with a dedicated Node.js server for 10-100x faster SSR, proper Node.js tooling, and memory isolation from the Ruby process. See the Node Renderer overview.

Streaming SSR​

Stream HTML to the browser progressively using React 18/19's renderToPipeableStream, so users see content as it becomes ready instead of waiting for the slowest component. See the Streaming SSR overview.

Fragment Caching​

Cache the complete rendered output of a component — including props assembly, serialization, and JavaScript evaluation — so that on a cache hit, none of that work happens. See the Fragment Caching overview.

React Server Components​

Full RSC support with Rails integration. Server Components run on the server and stream their output to the client, reducing bundle size and enabling server-only data access. See the RSC tutorial.

Prerender Caching​

Cache JavaScript evaluation results with a single config line (config.prerender_caching = true). See the Caching guide.

Code Splitting​

Route-based code splitting with Loadable Components and SSR support. See Code Splitting.

Bundle Caching​

Skip redundant webpack builds across deployments. See the Bundle Caching docs.

Clearing of Global State​

Set config.ssr_pre_hook_js to run JavaScript that clears globally leaked state at the beginning of each server render call. See Rails Configuration.

Other Utility Methods​

See the Ruby API.

References​