DOCSEARCHbyAlgolia
Submit Docs

React on Rails

website·Indexed 32 days ago

https://reactonrails.com

Integrate React components into Ruby on Rails applications with support for server-side rendering, hot reloading, and automated bundle generation. The framework provides tools for both OSS and Pro versions, offering integration options via npx create-react-on-rails-app, Shakapacker, and Rspack.

Tokens
185.1K
Snippets
768
Records
1.2K
Agent score
64%

What's inside React on Rails

  1. Overview of Bundle Caching in React on Rails Pro

    Bundle caching avoids redundant webpack builds by caching bundles based on a digest of source files. This is particularly useful in CI/CD pipelines (Review apps, Staging, Production) or when deploying Ruby-only changes that don't require a full JS rebuild. The cache key is generated from:

    1. Source files defined in config/shakapacker.yml.
    2. Files defined in config.dependency_globs (excluding config.excluded_dependency_globs).
    3. The NODE_ENV value.
    4. The version of React on Rails Pro.
    5. Custom environment values defined in the remote_bundle_cache_adapter.cache_keys method.

  2. Overview of React Compiler in React on Rails

    The React Compiler (stable v1.0) is a build-time tool that provides automatic memoization, reducing the need for manual useMemo, useCallback, and React.memo usage. In React on Rails, the compiler is configured within the application's build tool (Babel or SWC) rather than inside the React on Rails engine itself. It is compatible with React 19 runtime (~19.0.x) and does not require a specific React 19.2 bump.

  3. Overview of React 19 Native Metadata Hoisting

    React 19 introduces built-in support for rendering metadata tags anywhere in the component tree, which are then automatically hoisted into the document <head>. This replaces the need for react-helmet and react_component_hash for metadata management.

    Hoisted Elements:

    • <title>: The last rendered title wins.
    • <meta>: All variants (name, property, httpEquiv, charSet) are hoisted.
    • <link rel="stylesheet">: Hoisted; requires the precedence prop for ordering.
    • <link rel="preload"> and <link rel="icon">: Hoisted.
    • <script async src="...">: Only async scripts with a source are hoisted.
    • <style>: Hoisted if the precedence prop is provided.

    Non-Hoisted Elements:

    • Inline <script> tags (including those using dangerouslySetInnerHTML) and <script defer> are NOT hoisted and will render where they are placed in the component tree.

  4. Overview of React on Rails

    React on Rails is a framework that integrates React components into Ruby on Rails applications. It allows developers to render React components directly from Rails views using the react_component helper, passing props from Rails to React without requiring a separate API. Key features include built-in server-side rendering (SSR) for SEO and performance, hot module replacement (HMR) for development, and integration via Shakapacker.

  5. Overview of Web Components in React on Rails

    React on Rails supports native Web Components (Custom Elements) alongside React components. They can be used in server-rendered React components, client-only React components, and directly in ERB templates. Web components are treated as standard HTML tags; they pass through server rendering as plain HTML and upgrade to interactive components once the JavaScript bundle loads and the element is registered via customElements.define().

  6. Handle mutations in React on Rails

    In React on Rails, mutations (writes) are kept in Rails controllers. Unlike Next.js Server Actions or TanStack Start server functions, React on Rails does not move write logic into the Node renderer. The Node renderer is strictly for rendering and streaming read-only UI. All forms, buttons, or API mutations should submit to a Rails route to leverage Rails' authentication, authorization, strong parameters, ActiveRecord transactions, and validations.

  7. Compare Prerender Caching vs Fragment Caching

    React on Rails Pro offers two levels of SSR caching to eliminate redundant server-side rendering. Prerender caching is a low-effort 'quick win' that caches only the JS execution result, while Fragment caching is a high-performance option that caches the entire output, skipping database queries and prop serialization.
    FeaturePrerender CachingFragment Caching
    What it cachesJS evaluation result (SSR output for given props)Entire rendered fragment (props assembly + serialization + SSR)
    Setup effortOne config lineRequires choosing cache keys and passing props as a block
    Cache keyAutomatic (hash of bundle + JS code)User-defined (models, timestamps, locale, etc.)
    Skips prop evaluation?NoYes
    Best forReducing JS evaluation overheadMaximum performance; expensive prop assembly (DB/API calls)

  8. Understand React Server Rendering in Rails

    Server rendering in React on Rails works by executing JavaScript on the Rails server during the HTML rendering process to create a string of HTML, which is then embedded in the Rails view output.

    By default, the framework uses ExecJS as the JavaScript interpreter. For higher performance and the removal of ExecJS constraints, React on Rails Pro provides a dedicated Node.js renderer that supports persistent worker processes and streaming SSR (via React 18/19's renderToPipeableStream) for faster Time to First Byte (TTFB).

  10. Understand ExecJS synchronous rendering limitations

    React on Rails uses ExecJS as the default server-side rendering engine. ExecJS evaluates the server bundle in an isolated context and calls the render function synchronously. Because of this synchronous model, ExecJS cannot wait for asynchronous operations (like Promises or data fetching) to complete before returning the HTML string to Rails.

  11. Compare React on Rails vs Next.js with Rails API

    Next.js is a React-first architecture where Rails acts as a backend API. This is best for teams wanting a frontend-led architecture. In contrast, React on Rails keeps the application as a single Rails app.

    Trade-offs of Next.js + Rails API:

    • Requires separating frontend and backend concerns.
    • Duplicates routing, authentication, and session management across two layers.
    • Rails-backed Server Components communicate via HTTP API, whereas React on Rails Pro provides deeper integration for streaming props.

  12. Understand why Rspack is used instead of Vite for RSC

    React on Rails Pro uses Rspack as the default bundler (starting from version 17.0.0) because its React Server Components (RSC) pipeline is built on the webpack/rspack plugin contract. The RSC implementation requires a three-bundle architecture (client, server/SSR, and RSC bundles) coordinated by the react-on-rails-rsc package. Because Rspack implements the webpack loader and plugin interfaces, the RSC pipeline can be ported from Webpack to Rspack as an incremental swap. Vite uses a different plugin architecture and does not support the webpack/rspack contract, meaning the manifest plugins, loader integration, and flight chunk handling would require a complete rewrite to work with Vite.