Add support for RSC

.github/workflows/rspec-package-specs.yml

@@ -47,6 +47,9 @@ jobs:
         git config user.email "[email protected]"
         git config user.name "Your Name"
         git commit -am "stop generators from complaining about uncommitted code"
+    - name: Set packer version environment variable
+      run: |
+        echo "CI_PACKER_VERSION=${{ matrix.versions == 'oldest' && 'old' || 'new' }}" >> $GITHUB_ENV
     - name: Run rspec tests
       run: bundle exec rspec spec/react_on_rails
     - name: Store test results

CHANGELOG.md

@@ -18,6 +18,17 @@ Please follow the recommendations outlined at [keepachangelog.com](http://keepac
 ### [Unreleased]
 Changes since the last non-beta release.
 
+See [Release Notes](docs/release-notes/15.0.0.md) for full details.
+
+#### Added
+- React Server Components Support (Pro Feature) [PR 1644](https://github.com/shakacode/react_on_rails/pull/1644) by [AbanoubGhadban](https://github.com/AbanoubGhadban).
+- Improved component and store hydration performance [PR 1656](https://github.com/shakacode/react_on_rails/pull/1656) by [AbanoubGhadban](https://github.com/AbanoubGhadban).
+
+#### Breaking Changes
+- `ReactOnRails.reactOnRailsPageLoaded` is now an async function
+- `force_load` configuration now defaults to `true`
+- `defer_generated_component_packs` configuration now defaults to `false`
+
 ### [14.2.0] - 2025-03-03
 
 #### Added

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    react_on_rails (14.1.1)
+    react_on_rails (14.2.0)
       addressable
       connection_pool
       execjs (~> 2.5)

docs/api/javascript-api.md

@@ -59,7 +59,7 @@ The best source of docs is the main [ReactOnRails.ts](https://github.com/shakaco
   getStore(name, throwIfMissing = true )
 
   /**
-   * Renders or hydrates the react element passed. In case react version is >=18 will use the new api.
+   * Renders or hydrates the React element passed. In case React version is >=18 will use the root API.
    * @param domNode
    * @param reactElement
    * @param hydrate if true will perform hydration, if false will render

docs/guides/configuration.md

@@ -189,9 +189,9 @@ ReactOnRails.configure do |config|
   # config.server_bundle_js_file for the filename.
   config.make_generated_server_bundle_the_entrypoint = false
 
-  # Default is true, which matches Webpacker/Shakapacker's defer default for `append_javascript_pack`
-  # Set this to false to have `defer: false` added to your `append_javascript_pack` calls for generated entrypoints.
-  config.defer_generated_component_packs = true
+  # Default is false
+  # Set this to true to have `defer: true` added to your `append_javascript_pack` calls for generated entrypoints.
+  config.defer_generated_component_packs = false
 
   ################################################################################
   # I18N OPTIONS

docs/guides/streaming-server-rendering.md

@@ -5,7 +5,7 @@ React on Rails Pro supports streaming server rendering using React 18's latest A
 ## Prerequisites
 
 - React on Rails Pro subscription
-- React 18 or higher (experimental version)
+- React 19
 - React on Rails v15.0.0-alpha.0 or higher
 - React on Rails Pro v4.0.0.rc.5 or higher
 
@@ -19,14 +19,14 @@ React on Rails Pro supports streaming server rendering using React 18's latest A
 
 ## Implementation Steps
 
-1. **Use Experimental React 18 Version**
+1. **Use React 19 Version**
 
-First, ensure you're using React 18's experimental version in your package.json:
+First, ensure you're using React 19 in your package.json:
 
 ```json
 "dependencies": {
-  "react": "18.3.0-canary-670811593-20240322",
-  "react-dom": "18.3.0-canary-670811593-20240322"
+  "react": "19.0.0",
+  "react-dom": "19.0.0"
 }
 ```
 

docs/release-notes/15.0.0.md

@@ -0,0 +1,78 @@
+# React on Rails 15.0.0 Release Notes
+
+## Major Features
+
+### 🚀 React Server Components Support
+Experience the future of React with full RSC integration in your Rails apps:
+- Seamlessly use React Server Components 
+- Reduce client bundle sizes
+- Enable powerful new patterns for data fetching
+- ⚡️ Requires React on Rails Pro - [See the full tutorial](https://www.shakacode.com/react-on-rails-pro/docs/react-server-components-tutorial)
+
+### Improved Component Hydration
+Major improvements to component and store hydration:
+- Components and stores now hydrate immediately rather than waiting for page load
+- Enables faster hydration, especially beneficial for streamed pages
+- Components can hydrate before the page is fully streamed
+- Can use `async` scripts in the page with no fear of race condition
+- No need to use `defer` anymore
+
+## Breaking Changes
+
+### Component Hydration Changes
+- The `defer_generated_component_packs` and `force_load` configurations now default to `false` and `true` respectively. This means components will hydrate early without waiting for the full page load. This improves performance by eliminating unnecessary delays in hydration.
+  - The previous need for deferring scripts to prevent race conditions has been eliminated due to improved hydration handling. Making scripts not defer is critical to execute the hydration scripts early before the page is fully loaded.
+  - The `force_load` configuration make `react-on-rails` hydrate components immediately as soon as their server-rendered HTML reaches the client, without waiting for the full page load.
+  - If you want to keep the previous behavior, you can set `defer_generated_component_packs: true` or `force_load: false` in your `config/initializers/react_on_rails.rb` file.
+  - If we want to keep the original behavior of `force_load` for only one or more components, you can set `force_load: false` in the `react_component` helper or `force_load` configuration.
+  - Redux store support `force_load` option now and it uses `config.force_load` value as the default value. Which means that the redux store will hydrate immediately as soon as its server-side data reaches the client. You can override this behavior for individual redux stores by setting `force_load: false` in the `redux_store` helper.
+
+- `ReactOnRails.reactOnRailsPageLoaded()` is now an async function:
+  - If you are manually calling this function to ensure components are hydrated (e.g. with async script loading), you must now await the promise it returns:
+  ```js
+  // Before
+  ReactOnRails.reactOnRailsPageLoaded();
+  // Code expecting all components to be hydrated
+
+  // After 
+  await ReactOnRails.reactOnRailsPageLoaded();
+  // Code expecting all components to be hydrated
+  ```
+
+## Store Dependencies for Components
+
+When using Redux stores with multiple components, you need to explicitly declare store dependencies to optimize hydration. Here's how:
+
+### The Problem
+
+If you have deferred Redux stores and components like this:
+
+```erb
+<% redux_store("SimpleStore", props: @app_props_server_render, defer: true) %>
+<%= react_component('ReduxApp', {}, {prerender: true}) %>
+<%= react_component('ComponentWithNoStore', {}, {prerender: true}) %>
+<%= redux_store_hydration_data %>
+```
+
+By default, React on Rails assumes components depend on all previously created stores. This means:
+- Neither `ReduxApp` nor `ComponentWithNoStore` will hydrate until `SimpleStore` is hydrated
+- Since the store is deferred to the end of the page, both components are forced to wait unnecessarily
+
+### The Solution
+
+Explicitly declare store dependencies for each component:
+
+```erb
+<% redux_store("SimpleStore", props: @app_props_server_render, defer: true) %>
+<%= react_component('ReduxApp', {}, {
+  prerender: true
+  <!-- No need to specify store_dependencies - it automatically depends on SimpleStore -->
+}) %>
+<%= react_component('ComponentWithNoStore', {}, {
+  prerender: true,
+  store_dependencies: [] <!-- Explicitly declare no store dependencies -->
+}) %>
+<%= redux_store_hydration_data %>
+```
+
+This allows `ComponentWithNoStore` to hydrate immediately without waiting for `SimpleStore`, improving page performance.

jest.config.js

@@ -1,5 +1,17 @@
+const nodeVersion = parseInt(process.version.slice(1), 10);
+
 module.exports = {
   preset: 'ts-jest/presets/js-with-ts',
   testEnvironment: 'jsdom',
   setupFiles: ['<rootDir>/node_package/tests/jest.setup.js'],
+  // React Server Components tests are compatible with React 19
+  // That only run with node version 18 and above
+  moduleNameMapper:
+    nodeVersion < 18
+      ? {
+          'react-on-rails-rsc/client': '<rootDir>/node_package/tests/emptyForTesting.js',
+          '^@testing-library/dom$': '<rootDir>/node_package/tests/emptyForTesting.js',
+          '^@testing-library/react$': '<rootDir>/node_package/tests/emptyForTesting.js',
+        }
+      : {},
 };

knip.ts

@@ -4,11 +4,20 @@ const config: KnipConfig = {
   // ! at the end means files are used in production
   workspaces: {
     '.': {
-      entry: ['node_package/src/ReactOnRails.ts!', 'node_package/src/ReactOnRails.node.ts!'],
-      project: ['node_package/src/**/*.[jt]s!', 'node_package/tests/**/*.[jt]s'],
+      entry: [
+        'node_package/src/ReactOnRails.node.ts!',
+        'node_package/src/ReactOnRailsRSC.ts!',
+        'node_package/src/registerServerComponent/client.ts!',
+        'node_package/src/registerServerComponent/server.ts!',
+        'node_package/src/RSCClientRoot.ts!',
+      ],
+      project: ['node_package/src/**/*.[jt]s{x,}!', 'node_package/tests/**/*.[jt]s{x,}'],
       babel: {
         config: ['node_package/babel.config.js'],
       },
+      ignore: [
+        'node_package/tests/emptyForTesting.js',
+      ],
       ignoreBinaries: [
         // Knip fails to detect it's declared in devDependencies
         'nps',
@@ -26,6 +35,8 @@ const config: KnipConfig = {
         'eslint-plugin-react',
         // Used in CI
         '@arethetypeswrong/cli',
+        // used by Jest
+        'jsdom',
       ],
     },
     'spec/dummy': {

lib/react_on_rails/configuration.rb

@@ -9,6 +9,8 @@ def self.configure
   end
 
   DEFAULT_GENERATED_ASSETS_DIR = File.join(%w[public webpack], Rails.env).freeze
+  DEFAULT_REACT_CLIENT_MANIFEST_FILE = "react-client-manifest.json"
+  DEFAULT_COMPONENT_REGISTRY_TIMEOUT = 5000
 
   def self.configuration
     @configuration ||= Configuration.new(
@@ -17,6 +19,8 @@ def self.configuration
       # generated_assets_dirs is deprecated
       generated_assets_dir: "",
       server_bundle_js_file: "",
+      rsc_bundle_js_file: "",
+      react_client_manifest_file: DEFAULT_REACT_CLIENT_MANIFEST_FILE,
       prerender: false,
       auto_load_bundle: false,
       replay_console: true,
@@ -39,9 +43,13 @@ def self.configuration
       i18n_output_format: nil,
       components_subdirectory: nil,
       make_generated_server_bundle_the_entrypoint: false,
-      defer_generated_component_packs: true,
+      defer_generated_component_packs: false,
       # forces the loading of React components
-      force_load: false
+      force_load: true,
+      # Maximum time in milliseconds to wait for client-side component registration after page load.
+      # If exceeded, an error will be thrown for server-side rendered components not registered on the client.
+      # Set to 0 to disable the timeout and wait indefinitely for component registration.
+      component_registry_timeout: DEFAULT_COMPONENT_REGISTRY_TIMEOUT
     )
   end
 
@@ -56,8 +64,8 @@ class Configuration
                   :server_render_method, :random_dom_id, :auto_load_bundle,
                   :same_bundle_for_client_and_server, :rendering_props_extension,
                   :make_generated_server_bundle_the_entrypoint,
-                  :defer_generated_component_packs,
-                  :force_load
+                  :defer_generated_component_packs, :force_load, :rsc_bundle_js_file,
+                  :react_client_manifest_file, :component_registry_timeout
 
     # rubocop:disable Metrics/AbcSize
     def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender: nil,
@@ -72,7 +80,8 @@ def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender
                    same_bundle_for_client_and_server: nil,
                    i18n_dir: nil, i18n_yml_dir: nil, i18n_output_format: nil, i18n_yml_safe_load_options: nil,
                    random_dom_id: nil, server_render_method: nil, rendering_props_extension: nil,
-                   components_subdirectory: nil, auto_load_bundle: nil, force_load: nil)
+                   components_subdirectory: nil, auto_load_bundle: nil, force_load: nil,
+                   rsc_bundle_js_file: nil, react_client_manifest_file: nil, component_registry_timeout: nil)
       self.node_modules_location = node_modules_location.present? ? node_modules_location : Rails.root
       self.generated_assets_dirs = generated_assets_dirs
       self.generated_assets_dir = generated_assets_dir
@@ -96,9 +105,12 @@ def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender
       self.raise_on_prerender_error = raise_on_prerender_error
       self.skip_display_none = skip_display_none
       self.rendering_props_extension = rendering_props_extension
+      self.component_registry_timeout = component_registry_timeout
 
       # Server rendering:
       self.server_bundle_js_file = server_bundle_js_file
+      self.rsc_bundle_js_file = rsc_bundle_js_file
+      self.react_client_manifest_file = react_client_manifest_file
       self.same_bundle_for_client_and_server = same_bundle_for_client_and_server
       self.server_renderer_pool_size = self.development_mode ? 1 : server_renderer_pool_size
       self.server_renderer_timeout = server_renderer_timeout # seconds
@@ -126,10 +138,19 @@ def setup_config_values
       error_if_using_packer_and_generated_assets_dir_not_match_public_output_path
       # check_deprecated_settings
       adjust_precompile_task
+      check_component_registry_timeout
     end
 
     private
 
+    def check_component_registry_timeout
+      self.component_registry_timeout = DEFAULT_COMPONENT_REGISTRY_TIMEOUT if component_registry_timeout.nil?
+
+      return if component_registry_timeout.is_a?(Integer) && component_registry_timeout >= 0
+
+      raise ReactOnRails::Error, "component_registry_timeout must be a positive integer"
+    end
+
     def check_autobundling_requirements
       raise_missing_components_subdirectory if auto_load_bundle && !components_subdirectory.present?
       return unless components_subdirectory.present?
@@ -241,10 +262,12 @@ def configure_generated_assets_dirs_deprecation
     def ensure_webpack_generated_files_exists
       return unless webpack_generated_files.empty?
 
-      files = ["manifest.json"]
-      files << server_bundle_js_file if server_bundle_js_file.present?
-
-      self.webpack_generated_files = files
+      self.webpack_generated_files = [
+        "manifest.json",
+        server_bundle_js_file,
+        rsc_bundle_js_file,
+        react_client_manifest_file
+      ].compact_blank
     end
 
     def configure_skip_display_none_deprecation