From 2d263045f3dd336ed5220e45e09c305cdfd3c795 Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Mon, 17 Mar 2025 12:55:37 +0200
Subject: [PATCH 01/31] add needed utils to use rsc payload on the server

---
 lib/react_on_rails/configuration.rb           | 21 ++++---
 .../webpack_assets_status_checker.rb          |  2 +
 lib/react_on_rails/utils.rb                   |  9 +++
 node_package/src/RSCServerRoot.ts             | 58 +++++++++++++++++++
 node_package/src/ReactOnRailsRSC.ts           |  4 +-
 node_package/src/loadJsonFile.ts              | 25 ++++++++
 node_package/src/loadReactClientManifest.ts   | 24 --------
 .../src/streamServerRenderedReactComponent.ts | 30 ++++++++++
 ...nsformRSCNodeStreamAndReplayConsoleLogs.ts | 31 ++++++++++
 node_package/src/types/index.ts               |  4 ++
 package.json                                  |  4 +-
 yarn.lock                                     | 14 +----
 12 files changed, 179 insertions(+), 47 deletions(-)
 create mode 100644 node_package/src/RSCServerRoot.ts
 create mode 100644 node_package/src/loadJsonFile.ts
 delete mode 100644 node_package/src/loadReactClientManifest.ts
 create mode 100644 node_package/src/transformRSCNodeStreamAndReplayConsoleLogs.ts

diff --git a/lib/react_on_rails/configuration.rb b/lib/react_on_rails/configuration.rb
index 48e81fdba..26e68ed78 100644
--- a/lib/react_on_rails/configuration.rb
+++ b/lib/react_on_rails/configuration.rb
@@ -10,6 +10,7 @@ def self.configure
 
   DEFAULT_GENERATED_ASSETS_DIR = File.join(%w[public webpack], Rails.env).freeze
   DEFAULT_REACT_CLIENT_MANIFEST_FILE = "react-client-manifest.json"
+  DEFAULT_REACT_SERVER_MANIFEST_FILE = "react-server-client-manifest"
   DEFAULT_COMPONENT_REGISTRY_TIMEOUT = 5000
 
   def self.configuration
@@ -21,6 +22,7 @@ def self.configuration
       server_bundle_js_file: "",
       rsc_bundle_js_file: "",
       react_client_manifest_file: DEFAULT_REACT_CLIENT_MANIFEST_FILE,
+      react_server_manifest_file: DEFAULT_REACT_SERVER_MANIFEST_FILE,
       prerender: false,
       auto_load_bundle: false,
       replay_console: true,
@@ -66,7 +68,7 @@ class Configuration
                   :same_bundle_for_client_and_server, :rendering_props_extension,
                   :make_generated_server_bundle_the_entrypoint,
                   :generated_component_packs_loading_strategy, :force_load, :rsc_bundle_js_file,
-                  :react_client_manifest_file, :component_registry_timeout
+                  :react_client_manifest_file, :react_server_manifest_file, :component_registry_timeout
 
     # rubocop:disable Metrics/AbcSize
     def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender: nil,
@@ -82,7 +84,8 @@ def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender
                    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,
-                   rsc_bundle_js_file: nil, react_client_manifest_file: nil, component_registry_timeout: nil)
+                   rsc_bundle_js_file: nil, react_client_manifest_file: nil, react_server_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
@@ -112,6 +115,7 @@ def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender
       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.react_server_manifest_file = react_server_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
@@ -301,12 +305,13 @@ def configure_generated_assets_dirs_deprecation
     def ensure_webpack_generated_files_exists
       return unless webpack_generated_files.empty?
 
-      self.webpack_generated_files = [
-        "manifest.json",
-        server_bundle_js_file,
-        rsc_bundle_js_file,
-        react_client_manifest_file
-      ].compact_blank
+      files = ["manifest.json"]
+      files << server_bundle_js_file if server_bundle_js_file.present?
+      files << rsc_bundle_js_file if rsc_bundle_js_file.present?
+      files << react_client_manifest_file if react_client_manifest_file.present?
+      files << react_server_manifest_file if react_server_manifest_file.present?
+
+      self.webpack_generated_files = files
     end
 
     def configure_skip_display_none_deprecation
diff --git a/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb b/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb
index f3014af8d..a201364a0 100644
--- a/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb
+++ b/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb
@@ -52,6 +52,8 @@ def all_compiled_assets
           webpack_generated_files = @webpack_generated_files.map do |bundle_name|
             if bundle_name == ReactOnRails.configuration.react_client_manifest_file
               ReactOnRails::Utils.react_client_manifest_file_path
+            elsif bundle_name == ReactOnRails.configuration.react_server_manifest_file
+              ReactOnRails::Utils.react_server_manifest_file_path
             else
               ReactOnRails::Utils.bundle_js_file_path(bundle_name)
             end
diff --git a/lib/react_on_rails/utils.rb b/lib/react_on_rails/utils.rb
index d53a64495..0d6469542 100644
--- a/lib/react_on_rails/utils.rb
+++ b/lib/react_on_rails/utils.rb
@@ -122,6 +122,15 @@ def self.react_client_manifest_file_path
                                     end
     end
 
+    # React Server Manifest is generated by the server bundle.
+    # So, it will never be served from the dev server.
+    def self.react_server_manifest_file_path
+      return @react_server_manifest_path if @react_server_manifest_path && !Rails.env.development?
+
+      asset_name = ReactOnRails.configuration.react_server_manifest_file
+      @react_server_manifest_path = File.join(generated_assets_full_path, asset_name)
+    end
+
     def self.running_on_windows?
       (/cygwin|mswin|mingw|bccwin|wince|emx/ =~ RUBY_PLATFORM) != nil
     end
diff --git a/node_package/src/RSCServerRoot.ts b/node_package/src/RSCServerRoot.ts
new file mode 100644
index 000000000..bc8aca344
--- /dev/null
+++ b/node_package/src/RSCServerRoot.ts
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { createFromNodeStream } from 'react-on-rails-rsc/client.node';
+import transformRSCStream from './transformRSCNodeStreamAndReplayConsoleLogs';
+import loadJsonFile from './loadJsonFile';
+
+if (!('use' in React && typeof React.use === 'function')) {
+  throw new Error('React.use is not defined. Please ensure you are using React 18 with experimental features enabled or React 19+ to use server components.');
+}
+
+const { use } = React;
+
+export type RSCServerRootProps = {
+  getRscPromise: NodeJS.ReadableStream,
+  reactClientManifestFileName: string,
+  reactServerManifestFileName: string,
+}
+
+const createFromFetch = (stream: NodeJS.ReadableStream, ssrManifest: Record<string, unknown>) => {
+  const transformedStream = transformRSCStream(stream);
+  return createFromNodeStream(transformedStream, ssrManifest);
+}
+
+const createSSRManifest = (reactServerManifestFileName: string, reactClientManifestFileName: string) => {
+  const reactServerManifest = loadJsonFile(reactServerManifestFileName);
+  const reactClientManifest = loadJsonFile(reactClientManifestFileName);
+
+  const ssrManifest = {
+    moduleLoading: {
+      prefix: "/webpack/development/",
+      crossOrigin: null,
+    },
+    moduleMap: {} as Record<string, unknown>,
+  };
+
+  Object.entries(reactClientManifest).forEach(([aboluteFileUrl, clientFileBundlingInfo]) => {
+    const serverFileBundlingInfo = reactServerManifest[aboluteFileUrl];
+    ssrManifest.moduleMap[(clientFileBundlingInfo as { id: string }).id] = {
+      '*': {
+        id: (serverFileBundlingInfo as { id: string }).id,
+        chunks: (serverFileBundlingInfo as { chunks: string[] }).chunks,
+        name: '*',
+      }
+    };
+  });
+
+  return ssrManifest;
+}
+
+const RSCServerRoot = ({
+  getRscPromise,
+  reactClientManifestFileName,
+  reactServerManifestFileName,
+}: RSCServerRootProps) => {
+  const ssrManifest = createSSRManifest(reactServerManifestFileName, reactClientManifestFileName);
+  return use(createFromFetch(getRscPromise, ssrManifest));
+};
+
+export default RSCServerRoot;
diff --git a/node_package/src/ReactOnRailsRSC.ts b/node_package/src/ReactOnRailsRSC.ts
index 428787eab..62c469773 100644
--- a/node_package/src/ReactOnRailsRSC.ts
+++ b/node_package/src/ReactOnRailsRSC.ts
@@ -11,7 +11,7 @@ import {
   streamServerRenderedComponent,
   transformRenderStreamChunksToResultObject,
 } from './streamServerRenderedReactComponent.ts';
-import loadReactClientManifest from './loadReactClientManifest.ts';
+import loadJsonFile from './loadJsonFile.ts';
 
 const stringToStream = (str: string) => {
   const stream = new PassThrough();
@@ -33,7 +33,7 @@ const streamRenderRSCComponent = (
 
   const { pipeToTransform, readableStream, emitError } =
     transformRenderStreamChunksToResultObject(renderState);
-  Promise.all([loadReactClientManifest(reactClientManifestFileName), reactRenderingResult])
+  Promise.all([loadJsonFile(reactClientManifestFileName), reactRenderingResult])
     .then(([reactClientManifest, reactElement]) => {
       const rscStream = renderToPipeableStream(reactElement, reactClientManifest, {
         onError: (err) => {
diff --git a/node_package/src/loadJsonFile.ts b/node_package/src/loadJsonFile.ts
new file mode 100644
index 000000000..68d562abe
--- /dev/null
+++ b/node_package/src/loadJsonFile.ts
@@ -0,0 +1,25 @@
+import * as path from 'path';
+import * as fs from 'fs/promises';
+
+type LoadedJsonFile = Record<string, unknown>;
+const loadedJsonFiles = new Map<string, LoadedJsonFile>();
+
+export default async function loadJsonFile(fileName: string) {
+  // Asset JSON files are uploaded to node renderer.
+  // Renderer copies assets to the same place as the server-bundle.js and rsc-bundle.js.
+  // Thus, the __dirname of this code is where we can find the manifest file.
+  const filePath = path.resolve(__dirname, fileName);
+  const loadedJsonFile = loadedJsonFiles.get(filePath);
+  if (loadedJsonFile) {
+    return loadedJsonFile;
+  }
+
+  try {
+    const file = JSON.parse(await fs.readFile(filePath, 'utf8'));
+    loadedJsonFiles.set(filePath, file);
+    return file;
+  } catch (error) {
+    console.error(`Failed to load JSON file: ${filePath}`, error);
+    throw error;
+  }
+}
diff --git a/node_package/src/loadReactClientManifest.ts b/node_package/src/loadReactClientManifest.ts
deleted file mode 100644
index 0295c2391..000000000
--- a/node_package/src/loadReactClientManifest.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as path from 'path';
-import * as fs from 'fs/promises';
-
-type ClientManifest = Record<string, unknown>;
-const loadedReactClientManifests = new Map<string, ClientManifest>();
-
-export default async function loadReactClientManifest(reactClientManifestFileName: string) {
-  // React client manifest is uploaded to node renderer as an asset.
-  // Renderer copies assets to the same place as the server-bundle.js and rsc-bundle.js.
-  // Thus, the __dirname of this code is where we can find the manifest file.
-  const manifestPath = path.resolve(__dirname, reactClientManifestFileName);
-  const loadedReactClientManifest = loadedReactClientManifests.get(manifestPath);
-  if (loadedReactClientManifest) {
-    return loadedReactClientManifest;
-  }
-
-  try {
-    const manifest = JSON.parse(await fs.readFile(manifestPath, 'utf8')) as ClientManifest;
-    loadedReactClientManifests.set(manifestPath, manifest);
-    return manifest;
-  } catch (error) {
-    throw new Error(`Failed to load React client manifest from ${manifestPath}: ${error}`);
-  }
-}
diff --git a/node_package/src/streamServerRenderedReactComponent.ts b/node_package/src/streamServerRenderedReactComponent.ts
index c57229c7f..307322b4f 100644
--- a/node_package/src/streamServerRenderedReactComponent.ts
+++ b/node_package/src/streamServerRenderedReactComponent.ts
@@ -9,12 +9,42 @@ import handleError from './handleError.ts';
 import { renderToPipeableStream, PipeableStream } from './ReactDOMServer.cts';
 import { createResultObject, convertToError, validateComponent } from './serverRenderUtils.ts';
 import type { RenderParams, StreamRenderState, StreamableComponentResult } from './types/index.ts';
+import loadJsonFile from './loadJsonFile.ts';
 
 type BufferedEvent = {
   event: 'data' | 'error' | 'end';
   data: unknown;
 };
 
+const createSSRManifest = async (
+  reactServerManifestFileName: string,
+  reactClientManifestFileName: string,
+) => {
+  const reactServerManifest = await loadJsonFile(reactServerManifestFileName);
+  const reactClientManifest = await loadJsonFile(reactClientManifestFileName);
+
+  const ssrManifest = {
+    moduleLoading: {
+      prefix: '/webpack/development/',
+      crossOrigin: null,
+    },
+    moduleMap: {} as Record<string, unknown>,
+  };
+
+  Object.entries(reactClientManifest).forEach(([aboluteFileUrl, clientFileBundlingInfo]) => {
+    const serverFileBundlingInfo = reactServerManifest[aboluteFileUrl];
+    ssrManifest.moduleMap[(clientFileBundlingInfo as { id: string }).id] = {
+      '*': {
+        id: (serverFileBundlingInfo as { id: string }).id,
+        chunks: (serverFileBundlingInfo as { chunks: string[] }).chunks,
+        name: '*',
+      },
+    };
+  });
+
+  return ssrManifest;
+};
+
 /**
  * Creates a new Readable stream that safely buffers all events from the input stream until reading begins.
  *
diff --git a/node_package/src/transformRSCNodeStreamAndReplayConsoleLogs.ts b/node_package/src/transformRSCNodeStreamAndReplayConsoleLogs.ts
new file mode 100644
index 000000000..2b8b6c64c
--- /dev/null
+++ b/node_package/src/transformRSCNodeStreamAndReplayConsoleLogs.ts
@@ -0,0 +1,31 @@
+import { Transform } from 'stream';
+
+export default function transformRSCStream(stream: NodeJS.ReadableStream): NodeJS.ReadableStream {
+  const decoder = new TextDecoder();
+  let lastIncompleteChunk = '';
+
+  const htmlExtractor = new Transform({
+    transform(oneOrMoreChunks, _, callback) {
+      try {
+        const decodedChunk = lastIncompleteChunk + decoder.decode(oneOrMoreChunks);
+        const separateChunks = decodedChunk.split('\n').filter((chunk) => chunk.trim() !== '');
+
+        if (!decodedChunk.endsWith('\n')) {
+          lastIncompleteChunk = separateChunks.pop() ?? '';
+        } else {
+          lastIncompleteChunk = '';
+        }
+
+        for (const chunk of separateChunks) {
+          const parsedData = JSON.parse(chunk) as { html: string };
+          this.push(parsedData.html);
+        }
+        callback();
+      } catch (error) {
+        callback(error as Error);
+      }
+    },
+  });
+
+  return stream.pipe(htmlExtractor);
+}
diff --git a/node_package/src/types/index.ts b/node_package/src/types/index.ts
index 16a8a8897..2a2f92051 100644
--- a/node_package/src/types/index.ts
+++ b/node_package/src/types/index.ts
@@ -376,6 +376,10 @@ export interface ReactOnRailsInternal extends ReactOnRails {
    * Current options.
    */
   options: ReactOnRailsOptions;
+  /**
+   * Indicates if the RSC bundle is being used.
+   */
+  isRSCBundle: boolean;
 }
 
 export type RenderStateHtml = FinalHtmlResult | Promise<FinalHtmlResult>;
diff --git a/package.json b/package.json
index e6ada551a..def521896 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,7 @@
     "publint": "^0.3.8",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-on-rails-rsc": "19.0.0",
+    "react-on-rails-rsc": "git+https://github.com/shakacode/react_on_rails_rsc.git#add-support-for-generating-client-components-manifest-for-server-bundle",
     "redux": "^4.2.1",
     "ts-jest": "^29.2.5",
     "typescript": "^5.8.3"
@@ -64,7 +64,7 @@
   "peerDependencies": {
     "react": ">= 16",
     "react-dom": ">= 16",
-    "react-on-rails-rsc": "19.0.0"
+    "react-on-rails-rsc": "git+https://github.com/shakacode/react_on_rails_rsc.git#add-support-for-generating-client-components-manifest-for-server-bundle"
   },
   "files": [
     "node_package/lib"
diff --git a/yarn.lock b/yarn.lock
index 9918ffe9a..0a7c48d25 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5215,17 +5215,9 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-on-rails-rsc@19.0.0:
-  version "19.0.0"
-  resolved "https://registry.yarnpkg.com/react-on-rails-rsc/-/react-on-rails-rsc-19.0.0.tgz#0061d8f3eb7cdf12a23c66985212f46e3e2ed2ef"
-  integrity sha512-70K46d9Zs071VgUNxZLz0ModMkPRKpSCu5XiICd/8ChMdivSyxdHEZzY4GSiztQnizzKFX7k25N0EIv/DmUPNg==
-  dependencies:
-    react-server-dom-webpack "19.0.0"
-
-react-server-dom-webpack@19.0.0:
-  version "19.0.0"
-  resolved "https://registry.yarnpkg.com/react-server-dom-webpack/-/react-server-dom-webpack-19.0.0.tgz#c60819b6cb54e317e675ddc0c5959ff915b789d0"
-  integrity sha512-hLug9KEXLc8vnU9lDNe2b2rKKDaqrp5gNiES4uyu2Up3FZfZJZmdwLFXlWzdA9gTB/6/cWduSB2K1Lfag2pSvw==
+"react-on-rails-rsc@git+https://github.com/shakacode/react_on_rails_rsc.git#add-support-for-generating-client-components-manifest-for-server-bundle":
+  version "19.0.0-rc.2"
+  resolved "git+https://github.com/shakacode/react_on_rails_rsc.git#f49dc3fd94629ff23c1c6a397b19b6feff437b2f"
   dependencies:
     acorn-loose "^8.3.0"
     neo-async "^2.6.1"

From fa4a981b65870dcd022d7ac357fe4a14420474ef Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Mon, 17 Mar 2025 12:58:07 +0200
Subject: [PATCH 02/31] Refactor component registration and rendering logic to
 support `server-component-reference` type

---
 node_package/src/ClientSideRenderer.ts        |  8 ++--
 node_package/src/ComponentRegistry.ts         | 30 ++++++++++----
 node_package/src/ReactOnRailsRSC.ts           |  6 +++
 node_package/src/createReactOutput.ts         |  6 +--
 .../src/registerServerComponent/server.ts     |  5 ++-
 node_package/src/serverRenderUtils.ts         |  2 +-
 .../src/streamServerRenderedReactComponent.ts | 18 +++++----
 node_package/src/types/index.ts               | 40 +++++++++++++------
 8 files changed, 77 insertions(+), 38 deletions(-)

diff --git a/node_package/src/ClientSideRenderer.ts b/node_package/src/ClientSideRenderer.ts
index b4978c598..49cb67e70 100644
--- a/node_package/src/ClientSideRenderer.ts
+++ b/node_package/src/ClientSideRenderer.ts
@@ -21,18 +21,16 @@ async function delegateToRenderer(
   domNodeId: string,
   trace: boolean,
 ): Promise<boolean> {
-  const { name, component, isRenderer } = componentObj;
-
-  if (isRenderer) {
+  if (componentObj.type === 'renderer-function') {
     if (trace) {
       console.log(
-        `DELEGATING TO RENDERER ${name} for dom node with id: ${domNodeId} with props, railsContext:`,
+        `DELEGATING TO RENDERER ${componentObj.name} for dom node with id: ${domNodeId} with props, railsContext:`,
         props,
         railsContext,
       );
     }
 
-    await (component as RenderFunction)(props, railsContext, domNodeId);
+    await componentObj.component(props, railsContext, domNodeId);
     return true;
   }
 
diff --git a/node_package/src/ComponentRegistry.ts b/node_package/src/ComponentRegistry.ts
index d6cf72a48..fb3707c76 100644
--- a/node_package/src/ComponentRegistry.ts
+++ b/node_package/src/ComponentRegistry.ts
@@ -18,14 +18,28 @@ export function register(components: Record<string, ReactComponentOrRenderFuncti
       throw new Error(`Called register with null component named ${name}`);
     }
 
-    const renderFunction = isRenderFunction(component);
-    const isRenderer = renderFunction && component.length === 3;
-
-    componentRegistry.set(name, {
-      name,
-      component,
-      renderFunction,
-      isRenderer,
+      if (isRenderFunction(component)) {
+        return componentRegistry.set(name, {
+          name,
+          component,
+          type: component.length === 3 ? 'renderer-function' : 'render-function',
+        });
+      }
+
+      componentRegistry.set(name, {
+        name,
+        component,
+        type: 'react-component',
+      });
+  });
+}
+
+export function registerServerComponentReferences(...references: string[]): void {
+  references.forEach((reference) => {
+      componentRegistry.set(reference, {
+      name: reference,
+      component: undefined,
+      type: 'server-component-reference',
     });
   });
 }
diff --git a/node_package/src/ReactOnRailsRSC.ts b/node_package/src/ReactOnRailsRSC.ts
index 62c469773..91c2f35bc 100644
--- a/node_package/src/ReactOnRailsRSC.ts
+++ b/node_package/src/ReactOnRailsRSC.ts
@@ -67,5 +67,11 @@ ReactOnRails.serverRenderRSCReactComponent = (options: RSCRenderParams) => {
   }
 };
 
+ReactOnRails.isRSCBundle = true;
+
+ReactOnRails.registerServerComponentReferences = () => {
+  throw new Error('registerServerComponentReferences is not supported in the RSC bundle. Server components themselves should be registered not referenced.');
+}
+
 export * from './types/index.ts';
 export default ReactOnRails;
diff --git a/node_package/src/createReactOutput.ts b/node_package/src/createReactOutput.ts
index a63f88649..9eabb736b 100644
--- a/node_package/src/createReactOutput.ts
+++ b/node_package/src/createReactOutput.ts
@@ -41,7 +41,7 @@ export default function createReactOutput({
   trace,
   shouldHydrate,
 }: CreateParams): CreateReactOutputResult {
-  const { name, component, renderFunction } = componentObj;
+  const { name, type, component } = componentObj;
 
   if (trace) {
     if (railsContext && railsContext.serverSide) {
@@ -61,12 +61,12 @@ export default function createReactOutput({
     }
   }
 
-  if (renderFunction) {
+  if (type === 'render-function') {
     // Let's invoke the function to get the result
     if (trace) {
       console.log(`${name} is a renderFunction`);
     }
-    const renderFunctionResult = (component as RenderFunction)(props, railsContext);
+    const renderFunctionResult = component(props, railsContext);
     if (isServerRenderHash(renderFunctionResult)) {
       // We just return at this point, because calling function knows how to handle this case and
       // we can't call React.createElement with this type of Object.
diff --git a/node_package/src/registerServerComponent/server.ts b/node_package/src/registerServerComponent/server.ts
index 40d68a1da..7b74672e0 100644
--- a/node_package/src/registerServerComponent/server.ts
+++ b/node_package/src/registerServerComponent/server.ts
@@ -31,7 +31,10 @@ import { ReactComponent } from '../types/index.ts';
  * ```
  */
 const registerServerComponent = (components: Record<string, ReactComponent>) => {
-  ReactOnRails.register(components);
+  if (ReactOnRails.isRSCBundle) {
+    return ReactOnRails.register(components);
+  }
+  ReactOnRails.registerServerComponentReferences(...Object.keys(components));
 };
 
 export default registerServerComponent;
diff --git a/node_package/src/serverRenderUtils.ts b/node_package/src/serverRenderUtils.ts
index d5ae25f2d..a3738bd90 100644
--- a/node_package/src/serverRenderUtils.ts
+++ b/node_package/src/serverRenderUtils.ts
@@ -28,7 +28,7 @@ export function convertToError(e: unknown): Error {
 }
 
 export function validateComponent(componentObj: RegisteredComponent, componentName: string) {
-  if (componentObj.isRenderer) {
+  if (componentObj.type === 'renderer-function') {
     throw new Error(
       `Detected a renderer while server rendering component '${componentName}'. See https://github.com/shakacode/react_on_rails#renderer-functions`,
     );
diff --git a/node_package/src/streamServerRenderedReactComponent.ts b/node_package/src/streamServerRenderedReactComponent.ts
index 307322b4f..8068847fe 100644
--- a/node_package/src/streamServerRenderedReactComponent.ts
+++ b/node_package/src/streamServerRenderedReactComponent.ts
@@ -229,13 +229,17 @@ export const streamServerRenderedComponent = <T, P extends RenderParams>(
     const componentObj = ComponentRegistry.get(componentName);
     validateComponent(componentObj, componentName);
 
-    const reactRenderingResult = createReactOutput({
-      componentObj,
-      domNodeId,
-      trace,
-      props,
-      railsContext,
-    });
+    if (componentObj.type === 'server-component-reference') {
+      const reactRenderingResult = React.createElement(componentObj.component as ReactComponent, props);
+    } else {
+      const reactRenderingResult = createReactOutput({
+        componentObj,
+        domNodeId,
+        trace,
+        props,
+        railsContext,
+      });
+    }
 
     if (isServerRenderHash(reactRenderingResult)) {
       throw new Error('Server rendering of streams is not supported for server render hashes.');
diff --git a/node_package/src/types/index.ts b/node_package/src/types/index.ts
index 2a2f92051..a5b97bf5e 100644
--- a/node_package/src/types/index.ts
+++ b/node_package/src/types/index.ts
@@ -122,20 +122,32 @@ export type {
   StreamableComponentResult,
 };
 
-export interface RegisteredComponent {
+export type RegisteredComponent = {
   name: string;
-  component: ReactComponentOrRenderFunction;
-  /**
-   * Indicates if the registered component is a RenderFunction
-   * @see RenderFunction for more details on its behavior and usage.
-   */
-  renderFunction: boolean;
-  // Indicates if the registered component is a Renderer function.
-  // Renderer function handles DOM rendering or hydration with 3 args: (props, railsContext, domNodeId)
-  // Supported on the client side only.
-  // All renderer functions are render-functions, but not all render-functions are renderer functions.
-  isRenderer: boolean;
-}
+} & ({
+  component: ReactComponent;
+  type: 'react-component';
+} | {
+  component: RenderFunction;
+  type:
+      /**
+       * Indicates if the registered component is a RenderFunction
+       * @see RenderFunction for more details on its behavior and usage.
+       */
+       'render-function' |
+      /**
+       * Indicates if the registered component is a Renderer function.
+       * Renderer function handles DOM rendering or hydration with 3 args: (props, railsContext, domNodeId)
+       * Supported on the client side only.
+       * All renderer functions are render-functions, but not all render-functions are renderer-functions.
+       */
+      'renderer-function';
+} | {
+  // This variant exists to support server component references, where we only need the type field
+  // but want to maintain consistent destructuring patterns like { type, component } = componentObj
+  component: undefined;
+  type: 'server-component-reference';
+});
 
 export interface RegisterServerComponentOptions {
   rscPayloadGenerationUrlPath: string;
@@ -204,6 +216,7 @@ export interface ReactOnRailsOptions {
   traceTurbolinks?: boolean;
   /** Turbo (the successor of Turbolinks) events will be registered, if set to true. */
   turbo?: boolean;
+  rscPayloadGenerationUrlPath: string;
 }
 
 export interface ReactOnRails {
@@ -213,6 +226,7 @@ export interface ReactOnRails {
    * @param components keys are component names, values are components
    */
   register(components: Record<string, ReactComponentOrRenderFunction>): void;
+  registerServerComponentReferences(...references: string[]): void;
   /** @deprecated Use registerStoreGenerators instead */
   registerStore(stores: Record<string, StoreGenerator>): void;
   /**

From c18983a7e47afd411e6bf56def0059d99d32bf3b Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Mon, 17 Mar 2025 12:58:14 +0200
Subject: [PATCH 03/31] Revert "Refactor component registration and rendering
 logic to support `server-component-reference` type"

This reverts commit 8df9e113edd01a8c9e284026a6b07213412c9316.
---
 node_package/src/ClientSideRenderer.ts        |  8 ++--
 node_package/src/ComponentRegistry.ts         | 30 ++++----------
 node_package/src/ReactOnRailsRSC.ts           |  6 ---
 node_package/src/createReactOutput.ts         |  6 +--
 .../src/registerServerComponent/server.ts     |  5 +--
 node_package/src/serverRenderUtils.ts         |  2 +-
 .../src/streamServerRenderedReactComponent.ts | 18 ++++-----
 node_package/src/types/index.ts               | 40 ++++++-------------
 8 files changed, 38 insertions(+), 77 deletions(-)

diff --git a/node_package/src/ClientSideRenderer.ts b/node_package/src/ClientSideRenderer.ts
index 49cb67e70..0cd74ed59 100644
--- a/node_package/src/ClientSideRenderer.ts
+++ b/node_package/src/ClientSideRenderer.ts
@@ -20,8 +20,10 @@ async function delegateToRenderer(
   railsContext: RailsContext,
   domNodeId: string,
   trace: boolean,
-): Promise<boolean> {
-  if (componentObj.type === 'renderer-function') {
+): boolean {
+  const { name, component, isRenderer } = componentObj;
+
+  if (isRenderer) {
     if (trace) {
       console.log(
         `DELEGATING TO RENDERER ${componentObj.name} for dom node with id: ${domNodeId} with props, railsContext:`,
@@ -30,7 +32,7 @@ async function delegateToRenderer(
       );
     }
 
-    await componentObj.component(props, railsContext, domNodeId);
+    (component as RenderFunction)(props, railsContext, domNodeId);
     return true;
   }
 
diff --git a/node_package/src/ComponentRegistry.ts b/node_package/src/ComponentRegistry.ts
index fb3707c76..00e91271a 100644
--- a/node_package/src/ComponentRegistry.ts
+++ b/node_package/src/ComponentRegistry.ts
@@ -18,28 +18,14 @@ export function register(components: Record<string, ReactComponentOrRenderFuncti
       throw new Error(`Called register with null component named ${name}`);
     }
 
-      if (isRenderFunction(component)) {
-        return componentRegistry.set(name, {
-          name,
-          component,
-          type: component.length === 3 ? 'renderer-function' : 'render-function',
-        });
-      }
-
-      componentRegistry.set(name, {
-        name,
-        component,
-        type: 'react-component',
-      });
-  });
-}
-
-export function registerServerComponentReferences(...references: string[]): void {
-  references.forEach((reference) => {
-      componentRegistry.set(reference, {
-      name: reference,
-      component: undefined,
-      type: 'server-component-reference',
+    const renderFunction = isRenderFunction(component);
+    const isRenderer = renderFunction && (component as RenderFunction).length === 3;
+
+    componentRegistry.set(name, {
+      name,
+      component,
+      renderFunction,
+      isRenderer,
     });
   });
 }
diff --git a/node_package/src/ReactOnRailsRSC.ts b/node_package/src/ReactOnRailsRSC.ts
index 91c2f35bc..62c469773 100644
--- a/node_package/src/ReactOnRailsRSC.ts
+++ b/node_package/src/ReactOnRailsRSC.ts
@@ -67,11 +67,5 @@ ReactOnRails.serverRenderRSCReactComponent = (options: RSCRenderParams) => {
   }
 };
 
-ReactOnRails.isRSCBundle = true;
-
-ReactOnRails.registerServerComponentReferences = () => {
-  throw new Error('registerServerComponentReferences is not supported in the RSC bundle. Server components themselves should be registered not referenced.');
-}
-
 export * from './types/index.ts';
 export default ReactOnRails;
diff --git a/node_package/src/createReactOutput.ts b/node_package/src/createReactOutput.ts
index 9eabb736b..a63f88649 100644
--- a/node_package/src/createReactOutput.ts
+++ b/node_package/src/createReactOutput.ts
@@ -41,7 +41,7 @@ export default function createReactOutput({
   trace,
   shouldHydrate,
 }: CreateParams): CreateReactOutputResult {
-  const { name, type, component } = componentObj;
+  const { name, component, renderFunction } = componentObj;
 
   if (trace) {
     if (railsContext && railsContext.serverSide) {
@@ -61,12 +61,12 @@ export default function createReactOutput({
     }
   }
 
-  if (type === 'render-function') {
+  if (renderFunction) {
     // Let's invoke the function to get the result
     if (trace) {
       console.log(`${name} is a renderFunction`);
     }
-    const renderFunctionResult = component(props, railsContext);
+    const renderFunctionResult = (component as RenderFunction)(props, railsContext);
     if (isServerRenderHash(renderFunctionResult)) {
       // We just return at this point, because calling function knows how to handle this case and
       // we can't call React.createElement with this type of Object.
diff --git a/node_package/src/registerServerComponent/server.ts b/node_package/src/registerServerComponent/server.ts
index 7b74672e0..40d68a1da 100644
--- a/node_package/src/registerServerComponent/server.ts
+++ b/node_package/src/registerServerComponent/server.ts
@@ -31,10 +31,7 @@ import { ReactComponent } from '../types/index.ts';
  * ```
  */
 const registerServerComponent = (components: Record<string, ReactComponent>) => {
-  if (ReactOnRails.isRSCBundle) {
-    return ReactOnRails.register(components);
-  }
-  ReactOnRails.registerServerComponentReferences(...Object.keys(components));
+  ReactOnRails.register(components);
 };
 
 export default registerServerComponent;
diff --git a/node_package/src/serverRenderUtils.ts b/node_package/src/serverRenderUtils.ts
index a3738bd90..d5ae25f2d 100644
--- a/node_package/src/serverRenderUtils.ts
+++ b/node_package/src/serverRenderUtils.ts
@@ -28,7 +28,7 @@ export function convertToError(e: unknown): Error {
 }
 
 export function validateComponent(componentObj: RegisteredComponent, componentName: string) {
-  if (componentObj.type === 'renderer-function') {
+  if (componentObj.isRenderer) {
     throw new Error(
       `Detected a renderer while server rendering component '${componentName}'. See https://github.com/shakacode/react_on_rails#renderer-functions`,
     );
diff --git a/node_package/src/streamServerRenderedReactComponent.ts b/node_package/src/streamServerRenderedReactComponent.ts
index 8068847fe..307322b4f 100644
--- a/node_package/src/streamServerRenderedReactComponent.ts
+++ b/node_package/src/streamServerRenderedReactComponent.ts
@@ -229,17 +229,13 @@ export const streamServerRenderedComponent = <T, P extends RenderParams>(
     const componentObj = ComponentRegistry.get(componentName);
     validateComponent(componentObj, componentName);
 
-    if (componentObj.type === 'server-component-reference') {
-      const reactRenderingResult = React.createElement(componentObj.component as ReactComponent, props);
-    } else {
-      const reactRenderingResult = createReactOutput({
-        componentObj,
-        domNodeId,
-        trace,
-        props,
-        railsContext,
-      });
-    }
+    const reactRenderingResult = createReactOutput({
+      componentObj,
+      domNodeId,
+      trace,
+      props,
+      railsContext,
+    });
 
     if (isServerRenderHash(reactRenderingResult)) {
       throw new Error('Server rendering of streams is not supported for server render hashes.');
diff --git a/node_package/src/types/index.ts b/node_package/src/types/index.ts
index a5b97bf5e..2a2f92051 100644
--- a/node_package/src/types/index.ts
+++ b/node_package/src/types/index.ts
@@ -122,32 +122,20 @@ export type {
   StreamableComponentResult,
 };
 
-export type RegisteredComponent = {
+export interface RegisteredComponent {
   name: string;
-} & ({
-  component: ReactComponent;
-  type: 'react-component';
-} | {
-  component: RenderFunction;
-  type:
-      /**
-       * Indicates if the registered component is a RenderFunction
-       * @see RenderFunction for more details on its behavior and usage.
-       */
-       'render-function' |
-      /**
-       * Indicates if the registered component is a Renderer function.
-       * Renderer function handles DOM rendering or hydration with 3 args: (props, railsContext, domNodeId)
-       * Supported on the client side only.
-       * All renderer functions are render-functions, but not all render-functions are renderer-functions.
-       */
-      'renderer-function';
-} | {
-  // This variant exists to support server component references, where we only need the type field
-  // but want to maintain consistent destructuring patterns like { type, component } = componentObj
-  component: undefined;
-  type: 'server-component-reference';
-});
+  component: ReactComponentOrRenderFunction;
+  /**
+   * Indicates if the registered component is a RenderFunction
+   * @see RenderFunction for more details on its behavior and usage.
+   */
+  renderFunction: boolean;
+  // Indicates if the registered component is a Renderer function.
+  // Renderer function handles DOM rendering or hydration with 3 args: (props, railsContext, domNodeId)
+  // Supported on the client side only.
+  // All renderer functions are render-functions, but not all render-functions are renderer functions.
+  isRenderer: boolean;
+}
 
 export interface RegisterServerComponentOptions {
   rscPayloadGenerationUrlPath: string;
@@ -216,7 +204,6 @@ export interface ReactOnRailsOptions {
   traceTurbolinks?: boolean;
   /** Turbo (the successor of Turbolinks) events will be registered, if set to true. */
   turbo?: boolean;
-  rscPayloadGenerationUrlPath: string;
 }
 
 export interface ReactOnRails {
@@ -226,7 +213,6 @@ export interface ReactOnRails {
    * @param components keys are component names, values are components
    */
   register(components: Record<string, ReactComponentOrRenderFunction>): void;
-  registerServerComponentReferences(...references: string[]): void;
   /** @deprecated Use registerStoreGenerators instead */
   registerStore(stores: Record<string, StoreGenerator>): void;
   /**

From 73fd4bb1048c0758807195f0397206605545039c Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Mon, 17 Mar 2025 16:22:57 +0200
Subject: [PATCH 04/31] Enhance ReactOnRails options management

---
 node_package/src/ReactOnRails.client.ts  | 27 ++++++++-----
 node_package/tests/ReactOnRails.test.jsx | 48 +++++++++++++++++++++++-
 2 files changed, 65 insertions(+), 10 deletions(-)

diff --git a/node_package/src/ReactOnRails.client.ts b/node_package/src/ReactOnRails.client.ts
index 97d4e1078..023d819b0 100644
--- a/node_package/src/ReactOnRails.client.ts
+++ b/node_package/src/ReactOnRails.client.ts
@@ -25,9 +25,10 @@ This could be caused by setting Webpack's optimization.runtimeChunk to "true" or
 Check your Webpack configuration. Read more at https://github.com/shakacode/react_on_rails/issues/1558.`);
 }
 
-const DEFAULT_OPTIONS = {
+const DEFAULT_OPTIONS: ReactOnRailsOptions = {
   traceTurbolinks: false,
   turbo: false,
+  rscPayloadGenerationUrlPath: '/rsc_payload',
 };
 
 globalThis.ReactOnRails = {
@@ -76,16 +77,22 @@ globalThis.ReactOnRails = {
       delete newOptions.traceTurbolinks;
     }
 
-    if (typeof newOptions.turbo !== 'undefined') {
-      this.options.turbo = newOptions.turbo;
-
-      // eslint-disable-next-line no-param-reassign
-      delete newOptions.turbo;
+    const validOptionKeys = Object.keys(DEFAULT_OPTIONS);
+    const providedOptionKeys = Object.keys(newOptions);
+    
+    const invalidOptions = providedOptionKeys.filter(key => !validOptionKeys.includes(key));
+    if (invalidOptions.length > 0) {
+      throw new Error(
+        `Invalid options passed to ReactOnRails.options: ${JSON.stringify(invalidOptions)}`,
+      );
     }
 
-    if (Object.keys(newOptions).length > 0) {
-      throw new Error(`Invalid options passed to ReactOnRails.options: ${JSON.stringify(newOptions)}`);
-    }
+    // Filter out undefined values before merging
+    const definedOptions = Object.fromEntries(
+      Object.entries(newOptions).filter(([_, value]) => value !== undefined)
+    );
+
+    this.options = { ...this.options, ...definedOptions };
   },
 
   reactOnRailsPageLoaded() {
@@ -188,6 +195,8 @@ globalThis.ReactOnRails = {
   resetOptions(): void {
     this.options = { ...DEFAULT_OPTIONS };
   },
+
+  isRSCBundle: false,
 };
 
 globalThis.ReactOnRails.resetOptions();
diff --git a/node_package/tests/ReactOnRails.test.jsx b/node_package/tests/ReactOnRails.test.jsx
index 3e7f757ad..116df1bc8 100644
--- a/node_package/tests/ReactOnRails.test.jsx
+++ b/node_package/tests/ReactOnRails.test.jsx
@@ -55,7 +55,53 @@ describe('ReactOnRails', () => {
   it('setOptions method throws error for invalid options', () => {
     ReactOnRails.resetOptions();
     expect.assertions(1);
-    expect(() => ReactOnRails.setOptions({ foobar: true })).toThrow(/Invalid option/);
+    expect(() => ReactOnRails.setOptions({ foobar: true })).toThrow(/Invalid options/);
+  });
+
+  it('setOptions allows setting multiple options at once', () => {
+    ReactOnRails.resetOptions();
+    ReactOnRails.setOptions({ 
+      traceTurbolinks: true, 
+      rscPayloadGenerationUrlPath: '/custom_rsc' 
+    });
+    expect(ReactOnRails.option('traceTurbolinks')).toBe(true);
+    expect(ReactOnRails.option('rscPayloadGenerationUrlPath')).toBe('/custom_rsc');
+  });
+
+  it('setOptions preserves unspecified options when setting specific ones', () => {
+    ReactOnRails.resetOptions();
+    
+    ReactOnRails.setOptions({ 
+      traceTurbolinks: true,
+      turbo: true,
+      rscPayloadGenerationUrlPath: '/custom_rsc'
+    });
+    
+    ReactOnRails.setOptions({ 
+      rscPayloadGenerationUrlPath: '/different_path' 
+    });
+    
+    expect(ReactOnRails.option('rscPayloadGenerationUrlPath')).toBe('/different_path');
+    
+    expect(ReactOnRails.option('traceTurbolinks')).toBe(true);
+    expect(ReactOnRails.option('turbo')).toBe(true);
+  });
+
+  it('setOptions ignores undefined values', () => {
+    ReactOnRails.resetOptions();
+    ReactOnRails.setOptions({
+      traceTurbolinks: true,
+      turbo: true,
+      rscPayloadGenerationUrlPath: '/custom_rsc'
+    });
+    
+    ReactOnRails.setOptions({
+      rscPayloadGenerationUrlPath: undefined
+    });
+  
+    expect(ReactOnRails.option('rscPayloadGenerationUrlPath')).toBe('/custom_rsc');
+    expect(ReactOnRails.option('traceTurbolinks')).toBe(true);
+    expect(ReactOnRails.option('turbo')).toBe(true);
   });
 
   it('registerStore throws if passed a falsey object (null, undefined, etc)', () => {

From 630dad9cc7afa04a43c3a5e5d578bd4c82222231 Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Mon, 17 Mar 2025 16:23:04 +0200
Subject: [PATCH 05/31] Revert "Enhance ReactOnRails options management"

This reverts commit 2f99ea9f6380efd42ded3ae25ffca10629f0cac2.
---
 node_package/src/ReactOnRails.client.ts  | 29 ++++++--------
 node_package/tests/ReactOnRails.test.jsx | 48 +-----------------------
 2 files changed, 12 insertions(+), 65 deletions(-)

diff --git a/node_package/src/ReactOnRails.client.ts b/node_package/src/ReactOnRails.client.ts
index 023d819b0..296c5bc45 100644
--- a/node_package/src/ReactOnRails.client.ts
+++ b/node_package/src/ReactOnRails.client.ts
@@ -25,10 +25,9 @@ This could be caused by setting Webpack's optimization.runtimeChunk to "true" or
 Check your Webpack configuration. Read more at https://github.com/shakacode/react_on_rails/issues/1558.`);
 }
 
-const DEFAULT_OPTIONS: ReactOnRailsOptions = {
+const DEFAULT_OPTIONS = {
   traceTurbolinks: false,
   turbo: false,
-  rscPayloadGenerationUrlPath: '/rsc_payload',
 };
 
 globalThis.ReactOnRails = {
@@ -77,22 +76,18 @@ globalThis.ReactOnRails = {
       delete newOptions.traceTurbolinks;
     }
 
-    const validOptionKeys = Object.keys(DEFAULT_OPTIONS);
-    const providedOptionKeys = Object.keys(newOptions);
-    
-    const invalidOptions = providedOptionKeys.filter(key => !validOptionKeys.includes(key));
-    if (invalidOptions.length > 0) {
+    if (typeof newOptions.turbo !== 'undefined') {
+      this.options.turbo = newOptions.turbo;
+
+      // eslint-disable-next-line no-param-reassign
+      delete newOptions.turbo;
+    }
+
+    if (Object.keys(newOptions).length > 0) {
       throw new Error(
-        `Invalid options passed to ReactOnRails.options: ${JSON.stringify(invalidOptions)}`,
+        `Invalid options passed to ReactOnRails.options: ${JSON.stringify(newOptions)}`,
       );
     }
-
-    // Filter out undefined values before merging
-    const definedOptions = Object.fromEntries(
-      Object.entries(newOptions).filter(([_, value]) => value !== undefined)
-    );
-
-    this.options = { ...this.options, ...definedOptions };
   },
 
   reactOnRailsPageLoaded() {
@@ -193,10 +188,8 @@ globalThis.ReactOnRails = {
   },
 
   resetOptions(): void {
-    this.options = { ...DEFAULT_OPTIONS };
+    this.options = Object.assign({}, DEFAULT_OPTIONS);
   },
-
-  isRSCBundle: false,
 };
 
 globalThis.ReactOnRails.resetOptions();
diff --git a/node_package/tests/ReactOnRails.test.jsx b/node_package/tests/ReactOnRails.test.jsx
index 116df1bc8..3e7f757ad 100644
--- a/node_package/tests/ReactOnRails.test.jsx
+++ b/node_package/tests/ReactOnRails.test.jsx
@@ -55,53 +55,7 @@ describe('ReactOnRails', () => {
   it('setOptions method throws error for invalid options', () => {
     ReactOnRails.resetOptions();
     expect.assertions(1);
-    expect(() => ReactOnRails.setOptions({ foobar: true })).toThrow(/Invalid options/);
-  });
-
-  it('setOptions allows setting multiple options at once', () => {
-    ReactOnRails.resetOptions();
-    ReactOnRails.setOptions({ 
-      traceTurbolinks: true, 
-      rscPayloadGenerationUrlPath: '/custom_rsc' 
-    });
-    expect(ReactOnRails.option('traceTurbolinks')).toBe(true);
-    expect(ReactOnRails.option('rscPayloadGenerationUrlPath')).toBe('/custom_rsc');
-  });
-
-  it('setOptions preserves unspecified options when setting specific ones', () => {
-    ReactOnRails.resetOptions();
-    
-    ReactOnRails.setOptions({ 
-      traceTurbolinks: true,
-      turbo: true,
-      rscPayloadGenerationUrlPath: '/custom_rsc'
-    });
-    
-    ReactOnRails.setOptions({ 
-      rscPayloadGenerationUrlPath: '/different_path' 
-    });
-    
-    expect(ReactOnRails.option('rscPayloadGenerationUrlPath')).toBe('/different_path');
-    
-    expect(ReactOnRails.option('traceTurbolinks')).toBe(true);
-    expect(ReactOnRails.option('turbo')).toBe(true);
-  });
-
-  it('setOptions ignores undefined values', () => {
-    ReactOnRails.resetOptions();
-    ReactOnRails.setOptions({
-      traceTurbolinks: true,
-      turbo: true,
-      rscPayloadGenerationUrlPath: '/custom_rsc'
-    });
-    
-    ReactOnRails.setOptions({
-      rscPayloadGenerationUrlPath: undefined
-    });
-  
-    expect(ReactOnRails.option('rscPayloadGenerationUrlPath')).toBe('/custom_rsc');
-    expect(ReactOnRails.option('traceTurbolinks')).toBe(true);
-    expect(ReactOnRails.option('turbo')).toBe(true);
+    expect(() => ReactOnRails.setOptions({ foobar: true })).toThrow(/Invalid option/);
   });
 
   it('registerStore throws if passed a falsey object (null, undefined, etc)', () => {

From bc19283a6a6058fe4b949a5960c4693e803ed5d7 Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Tue, 18 Mar 2025 09:56:54 +0200
Subject: [PATCH 06/31] add support for returning promise of react component
 from render function

---
 node_package/src/ReactOnRails.client.ts | 2 ++
 node_package/src/ReactOnRailsRSC.ts     | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/node_package/src/ReactOnRails.client.ts b/node_package/src/ReactOnRails.client.ts
index 296c5bc45..122a955be 100644
--- a/node_package/src/ReactOnRails.client.ts
+++ b/node_package/src/ReactOnRails.client.ts
@@ -190,6 +190,8 @@ globalThis.ReactOnRails = {
   resetOptions(): void {
     this.options = Object.assign({}, DEFAULT_OPTIONS);
   },
+
+  isRSCBundle: false,
 };
 
 globalThis.ReactOnRails.resetOptions();
diff --git a/node_package/src/ReactOnRailsRSC.ts b/node_package/src/ReactOnRailsRSC.ts
index 62c469773..dd8c6c572 100644
--- a/node_package/src/ReactOnRailsRSC.ts
+++ b/node_package/src/ReactOnRailsRSC.ts
@@ -67,5 +67,7 @@ ReactOnRails.serverRenderRSCReactComponent = (options: RSCRenderParams) => {
   }
 };
 
+ReactOnRails.isRSCBundle = true;
+
 export * from './types/index.ts';
 export default ReactOnRails;

From b99337b2f57577ce6c4198b4fb22c8f209dfb0b9 Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Tue, 18 Mar 2025 14:31:50 +0200
Subject: [PATCH 07/31] Update ReactOnRails configuration to rename server
 manifest file for consistency. Adjust related methods and references to use
 the new naming convention for the server client manifest file.

---
 lib/react_on_rails/configuration.rb                  | 12 ++++++------
 .../test_helper/webpack_assets_status_checker.rb     |  4 ++--
 lib/react_on_rails/utils.rb                          |  4 ++--
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/lib/react_on_rails/configuration.rb b/lib/react_on_rails/configuration.rb
index 26e68ed78..0a1b5ee6b 100644
--- a/lib/react_on_rails/configuration.rb
+++ b/lib/react_on_rails/configuration.rb
@@ -10,7 +10,7 @@ def self.configure
 
   DEFAULT_GENERATED_ASSETS_DIR = File.join(%w[public webpack], Rails.env).freeze
   DEFAULT_REACT_CLIENT_MANIFEST_FILE = "react-client-manifest.json"
-  DEFAULT_REACT_SERVER_MANIFEST_FILE = "react-server-client-manifest"
+  DEFAULT_REACT_SERVER_CLIENT_MANIFEST_FILE = "react-server-client-manifest.json"
   DEFAULT_COMPONENT_REGISTRY_TIMEOUT = 5000
 
   def self.configuration
@@ -22,7 +22,7 @@ def self.configuration
       server_bundle_js_file: "",
       rsc_bundle_js_file: "",
       react_client_manifest_file: DEFAULT_REACT_CLIENT_MANIFEST_FILE,
-      react_server_manifest_file: DEFAULT_REACT_SERVER_MANIFEST_FILE,
+      react_server_client_manifest_file: DEFAULT_REACT_SERVER_CLIENT_MANIFEST_FILE,
       prerender: false,
       auto_load_bundle: false,
       replay_console: true,
@@ -68,7 +68,7 @@ class Configuration
                   :same_bundle_for_client_and_server, :rendering_props_extension,
                   :make_generated_server_bundle_the_entrypoint,
                   :generated_component_packs_loading_strategy, :force_load, :rsc_bundle_js_file,
-                  :react_client_manifest_file, :react_server_manifest_file, :component_registry_timeout
+                  :react_client_manifest_file, :react_server_client_manifest_file, :component_registry_timeout
 
     # rubocop:disable Metrics/AbcSize
     def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender: nil,
@@ -84,7 +84,7 @@ def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender
                    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,
-                   rsc_bundle_js_file: nil, react_client_manifest_file: nil, react_server_manifest_file: nil,
+                   rsc_bundle_js_file: nil, react_client_manifest_file: nil, react_server_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
@@ -115,7 +115,7 @@ def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender
       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.react_server_manifest_file = react_server_manifest_file
+      self.react_server_client_manifest_file = react_server_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
@@ -309,7 +309,7 @@ def ensure_webpack_generated_files_exists
       files << server_bundle_js_file if server_bundle_js_file.present?
       files << rsc_bundle_js_file if rsc_bundle_js_file.present?
       files << react_client_manifest_file if react_client_manifest_file.present?
-      files << react_server_manifest_file if react_server_manifest_file.present?
+      files << react_server_client_manifest_file if react_server_client_manifest_file.present?
 
       self.webpack_generated_files = files
     end
diff --git a/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb b/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb
index a201364a0..fbd1889a0 100644
--- a/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb
+++ b/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb
@@ -52,8 +52,8 @@ def all_compiled_assets
           webpack_generated_files = @webpack_generated_files.map do |bundle_name|
             if bundle_name == ReactOnRails.configuration.react_client_manifest_file
               ReactOnRails::Utils.react_client_manifest_file_path
-            elsif bundle_name == ReactOnRails.configuration.react_server_manifest_file
-              ReactOnRails::Utils.react_server_manifest_file_path
+            elsif bundle_name == ReactOnRails.configuration.react_server_client_manifest_file
+              ReactOnRails::Utils.react_server_client_manifest_file_path
             else
               ReactOnRails::Utils.bundle_js_file_path(bundle_name)
             end
diff --git a/lib/react_on_rails/utils.rb b/lib/react_on_rails/utils.rb
index 0d6469542..5e50d4478 100644
--- a/lib/react_on_rails/utils.rb
+++ b/lib/react_on_rails/utils.rb
@@ -124,10 +124,10 @@ def self.react_client_manifest_file_path
 
     # React Server Manifest is generated by the server bundle.
     # So, it will never be served from the dev server.
-    def self.react_server_manifest_file_path
+    def self.react_server_client_manifest_file_path
       return @react_server_manifest_path if @react_server_manifest_path && !Rails.env.development?
 
-      asset_name = ReactOnRails.configuration.react_server_manifest_file
+      asset_name = ReactOnRails.configuration.react_server_client_manifest_file
       @react_server_manifest_path = File.join(generated_assets_full_path, asset_name)
     end
 

From d078ee2516811959d88caf7f9509eb54c243b19b Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Wed, 19 Mar 2025 21:35:37 +0200
Subject: [PATCH 08/31] Refactor ReactOnRails to support React Server
 Components (RSC) registration and rendering

---
 node_package/src/RSCServerRoot.ts             | 66 ++++++++++++++-----
 node_package/src/ReactOnRailsRSC.ts           |  7 +-
 .../src/registerServerComponent/server.rsc.ts | 26 ++++++++
 .../src/registerServerComponent/server.ts     | 38 +++++------
 .../src/streamServerRenderedReactComponent.ts | 30 ---------
 ...nsformRSCNodeStreamAndReplayConsoleLogs.ts |  6 +-
 node_package/src/types/index.ts               | 19 +++++-
 package.json                                  |  5 +-
 8 files changed, 125 insertions(+), 72 deletions(-)
 create mode 100644 node_package/src/registerServerComponent/server.rsc.ts

diff --git a/node_package/src/RSCServerRoot.ts b/node_package/src/RSCServerRoot.ts
index bc8aca344..503eaf2c3 100644
--- a/node_package/src/RSCServerRoot.ts
+++ b/node_package/src/RSCServerRoot.ts
@@ -1,28 +1,38 @@
 import * as React from 'react';
 import { createFromNodeStream } from 'react-on-rails-rsc/client.node';
+import type { RenderFunction, RailsContext } from './types';
 import transformRSCStream from './transformRSCNodeStreamAndReplayConsoleLogs';
 import loadJsonFile from './loadJsonFile';
 
+declare global {
+  function generateRSCPayload(
+    componentName: string,
+    props: Record<string, unknown>,
+    serverSideRSCPayloadParameters: unknown,
+  ): Promise<NodeJS.ReadableStream>;
+}
+
+type RSCServerRootProps = {
+  componentName: string;
+  componentProps: Record<string, unknown>;
+}
+
 if (!('use' in React && typeof React.use === 'function')) {
   throw new Error('React.use is not defined. Please ensure you are using React 18 with experimental features enabled or React 19+ to use server components.');
 }
 
 const { use } = React;
 
-export type RSCServerRootProps = {
-  getRscPromise: NodeJS.ReadableStream,
-  reactClientManifestFileName: string,
-  reactServerManifestFileName: string,
-}
-
-const createFromFetch = (stream: NodeJS.ReadableStream, ssrManifest: Record<string, unknown>) => {
+const createFromReactOnRailsNodeStream = (stream: NodeJS.ReadableStream, ssrManifest: Record<string, unknown>) => {
   const transformedStream = transformRSCStream(stream);
   return createFromNodeStream(transformedStream, ssrManifest);
 }
 
-const createSSRManifest = (reactServerManifestFileName: string, reactClientManifestFileName: string) => {
-  const reactServerManifest = loadJsonFile(reactServerManifestFileName);
-  const reactClientManifest = loadJsonFile(reactClientManifestFileName);
+const createSSRManifest = async (reactServerManifestFileName: string, reactClientManifestFileName: string) => {
+  const [reactServerManifest, reactClientManifest] = await Promise.all([
+    loadJsonFile(reactServerManifestFileName),
+    loadJsonFile(reactClientManifestFileName),
+  ]);
 
   const ssrManifest = {
     moduleLoading: {
@@ -46,13 +56,35 @@ const createSSRManifest = (reactServerManifestFileName: string, reactClientManif
   return ssrManifest;
 }
 
-const RSCServerRoot = ({
-  getRscPromise,
-  reactClientManifestFileName,
-  reactServerManifestFileName,
-}: RSCServerRootProps) => {
-  const ssrManifest = createSSRManifest(reactServerManifestFileName, reactClientManifestFileName);
-  return use(createFromFetch(getRscPromise, ssrManifest));
+const RSCServerRoot: RenderFunction = async ({ componentName, componentProps }: RSCServerRootProps, railsContext?: RailsContext) => {
+  if (!railsContext?.serverSide || !railsContext?.reactClientManifestFileName || !railsContext?.reactServerClientManifestFileName) {
+    throw new Error(
+      `${'serverClientManifestFileName and reactServerClientManifestFileName are required. ' +
+      'Please ensure that React Server Component webpack configurations are properly set ' +
+      'as stated in the React Server Component tutorial. The received rails context is: '}${  JSON.stringify(railsContext)}`
+    );
+  }
+
+  if (typeof generateRSCPayload !== 'function') {
+    throw new Error(
+      'generateRSCPayload is not defined. Please ensure that you are using at least version 4.0.0 of ' +
+      'React on Rails Pro and the node renderer, and that ReactOnRailsPro.configuration.enable_rsc_support ' +
+      'is set to true.'
+    );
+  }
+
+  const ssrManifest = await createSSRManifest(
+    railsContext.reactServerClientManifestFileName,
+    railsContext.reactClientManifestFileName
+  );
+  const rscPayloadStream = await generateRSCPayload(
+    componentName,
+    componentProps,
+    railsContext.serverSideRSCPayloadParameters
+  );
+  const serverComponentElement = createFromReactOnRailsNodeStream(rscPayloadStream, ssrManifest);
+
+  return () => use(serverComponentElement);
 };
 
 export default RSCServerRoot;
diff --git a/node_package/src/ReactOnRailsRSC.ts b/node_package/src/ReactOnRailsRSC.ts
index dd8c6c572..08f38eb81 100644
--- a/node_package/src/ReactOnRailsRSC.ts
+++ b/node_package/src/ReactOnRailsRSC.ts
@@ -24,7 +24,12 @@ const streamRenderRSCComponent = (
   reactRenderingResult: StreamableComponentResult,
   options: RSCRenderParams,
 ): Readable => {
-  const { throwJsErrors, reactClientManifestFileName } = options;
+  const { throwJsErrors } = options;
+  if (!options.railsContext?.serverSide || !options.railsContext.reactClientManifestFileName) {
+    throw new Error('Rails context is not available');
+  }
+
+  const { reactClientManifestFileName } = options.railsContext;
   const renderState: StreamRenderState = {
     result: null,
     hasErrors: false,
diff --git a/node_package/src/registerServerComponent/server.rsc.ts b/node_package/src/registerServerComponent/server.rsc.ts
new file mode 100644
index 000000000..8bd345512
--- /dev/null
+++ b/node_package/src/registerServerComponent/server.rsc.ts
@@ -0,0 +1,26 @@
+import ReactOnRails from '../ReactOnRails.client';
+import { ReactComponent, RenderFunction } from '../types';
+
+/**
+ * Registers React Server Components (RSC) with React on Rails for the RSC bundle.
+ * 
+ * This function handles the registration of components in the RSC bundle context,
+ * where components are registered directly into the ComponentRegistry without any
+ * additional wrapping. This is different from the server bundle registration,
+ * which wraps components with RSCServerRoot.
+ * 
+ * @param components - Object mapping component names to their implementations
+ *
+ * @example
+ * ```js
+ * registerServerComponent({
+ *   ServerComponent1: ServerComponent1Component,
+ *   ServerComponent2: ServerComponent2Component
+ * });
+ * ```
+ */
+const registerServerComponent = (
+  components: { [id: string]: ReactComponent | RenderFunction },
+) => ReactOnRails.register(components);
+
+export default registerServerComponent;
diff --git a/node_package/src/registerServerComponent/server.ts b/node_package/src/registerServerComponent/server.ts
index 40d68a1da..c14dfec57 100644
--- a/node_package/src/registerServerComponent/server.ts
+++ b/node_package/src/registerServerComponent/server.ts
@@ -1,24 +1,17 @@
 import ReactOnRails from '../ReactOnRails.client.ts';
-import { ReactComponent } from '../types/index.ts';
+import RSCServerRoot from '../RSCServerRoot.ts';
+import { ReactComponent, RenderFunction, RailsContext } from '../types/index.ts';
 
 /**
- * Registers React Server Components (RSC) with React on Rails for both server and RSC bundles.
- * Currently, this function behaves identically to ReactOnRails.register, but is introduced to enable
- * future RSC-specific functionality without breaking changes.
- *
- * Future behavior will differ based on bundle type:
- *
- * RSC Bundle:
- * - Components are registered as any other component by adding the component to the ComponentRegistry
- *
- * Server Bundle:
- * - It works like the function defined at `registerServerComponent/client`
- * - The function itself is not added to the ComponentRegistry
- * - Instead, a RSCServerRoot component is added to the ComponentRegistry
- * - This RSCServerRoot component will use the pre-generated RSC payloads from the RSC bundle to
- *   build the rendering tree of the server component instead of rendering it again
- *
- * This functionality is added now without real implementation to avoid breaking changes in the future.
+ * Registers React Server Components (RSC) with React on Rails for the server bundle.
+ * 
+ * This function wraps each component with RSCServerRoot, which handles the server-side
+ * rendering of React Server Components using pre-generated RSC payloads.
+ * 
+ * The RSCServerRoot component:
+ * - Uses pre-generated RSC payloads from the RSC bundle
+ * - Builds the rendering tree of the server component
+ * - Handles the integration with React's streaming SSR
  *
  * @param components - Object mapping component names to their implementations
  *
@@ -31,7 +24,14 @@ import { ReactComponent } from '../types/index.ts';
  * ```
  */
 const registerServerComponent = (components: Record<string, ReactComponent>) => {
-  ReactOnRails.register(components);
+  const componentsWrappedInRSCServerRoot: Record<string, RenderFunction> = {};
+  for (const [componentName] of Object.entries(components)) {
+    componentsWrappedInRSCServerRoot[componentName] = (
+      componentProps?: unknown,
+      railsContext?: RailsContext,
+    ) => RSCServerRoot({ componentName, componentProps }, railsContext);
+  }
+  return ReactOnRails.register(componentsWrappedInRSCServerRoot);
 };
 
 export default registerServerComponent;
diff --git a/node_package/src/streamServerRenderedReactComponent.ts b/node_package/src/streamServerRenderedReactComponent.ts
index 307322b4f..c57229c7f 100644
--- a/node_package/src/streamServerRenderedReactComponent.ts
+++ b/node_package/src/streamServerRenderedReactComponent.ts
@@ -9,42 +9,12 @@ import handleError from './handleError.ts';
 import { renderToPipeableStream, PipeableStream } from './ReactDOMServer.cts';
 import { createResultObject, convertToError, validateComponent } from './serverRenderUtils.ts';
 import type { RenderParams, StreamRenderState, StreamableComponentResult } from './types/index.ts';
-import loadJsonFile from './loadJsonFile.ts';
 
 type BufferedEvent = {
   event: 'data' | 'error' | 'end';
   data: unknown;
 };
 
-const createSSRManifest = async (
-  reactServerManifestFileName: string,
-  reactClientManifestFileName: string,
-) => {
-  const reactServerManifest = await loadJsonFile(reactServerManifestFileName);
-  const reactClientManifest = await loadJsonFile(reactClientManifestFileName);
-
-  const ssrManifest = {
-    moduleLoading: {
-      prefix: '/webpack/development/',
-      crossOrigin: null,
-    },
-    moduleMap: {} as Record<string, unknown>,
-  };
-
-  Object.entries(reactClientManifest).forEach(([aboluteFileUrl, clientFileBundlingInfo]) => {
-    const serverFileBundlingInfo = reactServerManifest[aboluteFileUrl];
-    ssrManifest.moduleMap[(clientFileBundlingInfo as { id: string }).id] = {
-      '*': {
-        id: (serverFileBundlingInfo as { id: string }).id,
-        chunks: (serverFileBundlingInfo as { chunks: string[] }).chunks,
-        name: '*',
-      },
-    };
-  });
-
-  return ssrManifest;
-};
-
 /**
  * Creates a new Readable stream that safely buffers all events from the input stream until reading begins.
  *
diff --git a/node_package/src/transformRSCNodeStreamAndReplayConsoleLogs.ts b/node_package/src/transformRSCNodeStreamAndReplayConsoleLogs.ts
index 2b8b6c64c..2502d7639 100644
--- a/node_package/src/transformRSCNodeStreamAndReplayConsoleLogs.ts
+++ b/node_package/src/transformRSCNodeStreamAndReplayConsoleLogs.ts
@@ -27,5 +27,9 @@ export default function transformRSCStream(stream: NodeJS.ReadableStream): NodeJ
     },
   });
 
-  return stream.pipe(htmlExtractor);
+  try {
+    return stream.pipe(htmlExtractor);
+  } catch (error) {
+    throw new Error(`Error transforming RSC stream (${stream.constructor.name}), (stream: ${stream}), stringified stream: ${JSON.stringify(stream)}, error: ${error}`);
+  }
 }
diff --git a/node_package/src/types/index.ts b/node_package/src/types/index.ts
index 2a2f92051..d7c82196b 100644
--- a/node_package/src/types/index.ts
+++ b/node_package/src/types/index.ts
@@ -17,7 +17,7 @@ type Store = {
 type ReactComponent = ComponentType<any> | string;
 
 // Keep these in sync with method lib/react_on_rails/helper.rb#rails_context
-export interface RailsContext {
+export type RailsContext = {
   componentRegistryTimeout: number;
   railsEnv: string;
   inMailer: boolean;
@@ -26,7 +26,6 @@ export interface RailsContext {
   rorVersion: string;
   rorPro: boolean;
   rorProVersion?: string;
-  serverSide: boolean;
   href: string;
   location: string;
   scheme: string;
@@ -35,7 +34,21 @@ export interface RailsContext {
   pathname: string;
   search: string | null;
   httpAcceptLanguage: string;
-}
+} & ({
+  serverSide: false;
+  rscPayloadGenerationUrl: string;
+} | {
+  serverSide: true;
+  // These parameters are passed from React on Rails Pro to the node renderer.
+  // They contain the necessary information to generate the RSC (React Server Components) payload.
+  // Typically, this includes the bundle hash of the RSC bundle.
+  // The react-on-rails package uses 'unknown' for these parameters to avoid direct dependency.
+  // This ensures that if the communication protocol between the node renderer and the Rails server changes,
+  // we don't need to update this type or introduce a breaking change.
+  serverSideRSCPayloadParameters: unknown;
+  reactClientManifestFileName?: string;
+  reactServerClientManifestFileName?: string;
+});
 
 // not strictly what we want, see https://github.com/microsoft/TypeScript/issues/17867#issuecomment-323164375
 type AuthenticityHeaders = Record<string, string> & {
diff --git a/package.json b/package.json
index def521896..2e4e5a9ed 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,10 @@
     },
     "./client": "./node_package/lib/ReactOnRails.client.js",
     "./registerServerComponent/client": "./node_package/lib/registerServerComponent/client.js",
-    "./registerServerComponent/server": "./node_package/lib/registerServerComponent/server.js"
+    "./registerServerComponent/server": {
+      "react-server": "./node_package/lib/registerServerComponent/server.rsc.js",
+      "default": "./node_package/lib/registerServerComponent/server.js"
+    }
   },
   "directories": {
     "doc": "docs"

From 245046e0e8dfda2a9027993b1c3f62e90458448f Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Wed, 26 Mar 2025 18:04:51 +0200
Subject: [PATCH 09/31] embed rsc payload inside the html page

---
 lib/react_on_rails/helper.rb                  |   7 +-
 node_package/src/RSCClientRoot.ts             |  50 ++++++++-
 node_package/src/RSCPayloadContainer.ts       | 100 ++++++++++++++++++
 node_package/src/RSCServerRoot.ts             |  25 ++++-
 node_package/src/buildConsoleReplay.ts        |   8 +-
 .../src/streamServerRenderedReactComponent.ts |  33 +++++-
 .../transformRSCStreamAndReplayConsoleLogs.ts |  58 +++++-----
 node_package/src/types/index.ts               |   2 +-
 8 files changed, 246 insertions(+), 37 deletions(-)
 create mode 100644 node_package/src/RSCPayloadContainer.ts

diff --git a/lib/react_on_rails/helper.rb b/lib/react_on_rails/helper.rb
index 6534fede9..f85f9d29c 100644
--- a/lib/react_on_rails/helper.rb
+++ b/lib/react_on_rails/helper.rb
@@ -362,6 +362,10 @@ def json_safe_and_pretty(hash_or_string)
     def rails_context(server_side: true)
       # ALERT: Keep in sync with node_package/src/types/index.ts for the properties of RailsContext
       @rails_context ||= begin
+        rsc_url = if ReactOnRails::Utils.react_on_rails_pro?
+                    ReactOnRailsPro.configuration.rsc_payload_generation_url_path
+                  end
+
         result = {
           componentRegistryTimeout: ReactOnRails.configuration.component_registry_timeout,
           railsEnv: Rails.env,
@@ -371,7 +375,8 @@ def rails_context(server_side: true)
           i18nDefaultLocale: I18n.default_locale,
           rorVersion: ReactOnRails::VERSION,
           # TODO: v13 just use the version if existing
-          rorPro: ReactOnRails::Utils.react_on_rails_pro?
+          rorPro: ReactOnRails::Utils.react_on_rails_pro?,
+          rscPayloadGenerationUrl: rsc_url
         }
         if ReactOnRails::Utils.react_on_rails_pro?
           result[:rorProVersion] = ReactOnRails::Utils.react_on_rails_pro_version
diff --git a/node_package/src/RSCClientRoot.ts b/node_package/src/RSCClientRoot.ts
index 7a1d09572..ce31f57b6 100644
--- a/node_package/src/RSCClientRoot.ts
+++ b/node_package/src/RSCClientRoot.ts
@@ -1,5 +1,7 @@
 'use client';
 
+/* eslint-disable no-underscore-dangle */
+
 import * as React from 'react';
 import * as ReactDOMClient from 'react-dom/client';
 import { createFromReadableStream } from 'react-on-rails-rsc/client';
@@ -13,6 +15,12 @@ if (typeof use !== 'function') {
   throw new Error('React.use is not defined. Please ensure you are using React 19 to use server components.');
 }
 
+declare global {
+  interface Window {
+    __FLIGHT_DATA: unknown[];
+  }
+}
+
 export type RSCClientRootProps = {
   componentName: string;
   rscPayloadGenerationUrlPath: string;
@@ -35,6 +43,45 @@ const fetchRSC = ({ componentName, rscPayloadGenerationUrlPath, componentProps }
   return createFromFetch(fetch(`/${strippedUrlPath}/${componentName}?props=${propsString}`));
 };
 
+const createRSCStreamFromPage = () => {
+  let streamController: ReadableStreamController<unknown> | undefined;
+  const stream = new ReadableStream({
+    start(controller) {
+      if (typeof window === 'undefined') {
+        return;
+      }
+      const handleChunk = (chunk: unknown) => {
+        controller.enqueue(chunk);
+      };
+      if (!window.__FLIGHT_DATA) {
+        window.__FLIGHT_DATA = [];
+      }
+      window.__FLIGHT_DATA.forEach(handleChunk);
+      window.__FLIGHT_DATA.push = (...chunks: unknown[]) => {
+        chunks.forEach(handleChunk);
+        return chunks.length;
+      };
+      streamController = controller;
+    }
+  });
+
+  if (typeof document !== 'undefined' && document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+      streamController?.close();
+    });
+  } else {
+    streamController?.close();
+  }
+
+  return stream;
+}
+
+const createFromRSCStream = () => {
+  const stream = createRSCStreamFromPage();
+  const transformedStream = transformRSCStreamAndReplayConsoleLogs(stream);
+  return createFromReadableStream<React.ReactNode>(transformedStream);
+}
+
 /**
  * RSCClientRoot is a React component that handles client-side rendering of React Server Components (RSC).
  * It manages the fetching, caching, and rendering of RSC payloads from the server.
@@ -53,7 +100,6 @@ const RSCClientRoot: RenderFunction = async (
   _railsContext?: RailsContext,
   domNodeId?: string,
 ) => {
-  const root = await fetchRSC({ componentName, rscPayloadGenerationUrlPath, componentProps });
   if (!domNodeId) {
     throw new Error('RSCClientRoot: No domNodeId provided');
   }
@@ -62,8 +108,10 @@ const RSCClientRoot: RenderFunction = async (
     throw new Error(`RSCClientRoot: No DOM node found for id: ${domNodeId}`);
   }
   if (domNode.innerHTML) {
+    const root = await createFromRSCStream();
     ReactDOMClient.hydrateRoot(domNode, root);
   } else {
+    const root = await fetchRSC({ componentName, rscPayloadGenerationUrlPath, componentProps })
     ReactDOMClient.createRoot(domNode).render(root);
   }
   // Added only to satisfy the return type of RenderFunction
diff --git a/node_package/src/RSCPayloadContainer.ts b/node_package/src/RSCPayloadContainer.ts
new file mode 100644
index 000000000..89b85db05
--- /dev/null
+++ b/node_package/src/RSCPayloadContainer.ts
@@ -0,0 +1,100 @@
+import * as React from 'react';
+
+type StreamChunk = {
+  chunk: string;
+  isLastChunk: boolean;
+}
+
+type RSCPayloadContainerProps = {
+  RSCPayloadStream: NodeJS.ReadableStream;
+}
+
+type RSCPayloadContainerInnerProps = {
+  chunkIndex: number;
+  getChunkPromise: (chunkIndex: number) => Promise<StreamChunk>;
+}
+
+function escapeScript(script: string) {
+  return script
+    .replace(/<!--/g, '<\\!--')
+    .replace(/<\/(script)/gi, '</\\$1');
+}
+
+const RSCPayloadContainer = (
+  { chunkIndex, getChunkPromise }: RSCPayloadContainerInnerProps,
+): React.ReactNode => {
+  const chunkPromise = getChunkPromise(chunkIndex);
+  const chunk = React.use(chunkPromise);
+
+  const scriptElement = React.createElement('script', {
+    dangerouslySetInnerHTML: {
+      __html: escapeScript(`(self.__FLIGHT_DATA||=[]).push(${chunk.chunk})`),
+    },
+    key: `script-${chunkIndex}`,
+  });
+
+  if (chunk.isLastChunk) {
+    return scriptElement;
+  }
+
+  return React.createElement(React.Fragment, null, [
+    scriptElement,
+    React.createElement(
+      React.Suspense,
+      { fallback: null, key: `suspense-${chunkIndex}` },
+      React.createElement(
+        RSCPayloadContainer,
+        { chunkIndex: chunkIndex + 1, getChunkPromise },
+      ),
+    ),
+  ]);
+}
+
+export default function RSCPayloadContainerWrapper({ RSCPayloadStream }: RSCPayloadContainerProps) {
+  const [chunkPromises] = React.useState<Promise<StreamChunk>[]>(() => {
+    const promises: Promise<StreamChunk>[] = [];
+    let resolveCurrentPromise: (streamChunk: StreamChunk) => void = () => {};
+    let rejectCurrentPromise: (error: Error) => void = () => {};
+    const decoder = new TextDecoder();
+
+    const createNewPromise = () => {
+      const promise = new Promise<StreamChunk>((resolve, reject) => {
+        resolveCurrentPromise = resolve;
+        rejectCurrentPromise = reject;
+      });
+
+      promises.push(promise);
+    };
+
+    createNewPromise();
+    RSCPayloadStream.on('data', (streamChunk) => {
+      resolveCurrentPromise({ chunk: decoder.decode(streamChunk), isLastChunk: false });
+      createNewPromise();
+    });
+
+    RSCPayloadStream.on('error', (error) => {
+      rejectCurrentPromise(error);
+      createNewPromise();
+    });
+
+    RSCPayloadStream.on('end', () => {
+      resolveCurrentPromise({ chunk: '', isLastChunk: true });
+    });
+
+    return promises;
+  });
+
+  const getChunkPromise = React.useCallback((chunkIndex: number) => {
+    if (chunkIndex > chunkPromises.length) {
+      throw new Error('React on Rails Error: RSC Chunk index out of bounds');
+    }
+
+    return chunkPromises[chunkIndex];
+  }, [chunkPromises]);
+
+  return React.createElement(
+    React.Suspense,
+    { fallback: null },
+    React.createElement(RSCPayloadContainer, { chunkIndex: 0, getChunkPromise }),
+  );
+}
diff --git a/node_package/src/RSCServerRoot.ts b/node_package/src/RSCServerRoot.ts
index 503eaf2c3..6e427d845 100644
--- a/node_package/src/RSCServerRoot.ts
+++ b/node_package/src/RSCServerRoot.ts
@@ -3,6 +3,8 @@ import { createFromNodeStream } from 'react-on-rails-rsc/client.node';
 import type { RenderFunction, RailsContext } from './types';
 import transformRSCStream from './transformRSCNodeStreamAndReplayConsoleLogs';
 import loadJsonFile from './loadJsonFile';
+import RSCPayloadContainer from './RSCPayloadContainer';
+import { PassThrough } from 'stream';
 
 declare global {
   function generateRSCPayload(
@@ -82,9 +84,28 @@ const RSCServerRoot: RenderFunction = async ({ componentName, componentProps }:
     componentProps,
     railsContext.serverSideRSCPayloadParameters
   );
-  const serverComponentElement = createFromReactOnRailsNodeStream(rscPayloadStream, ssrManifest);
 
-  return () => use(serverComponentElement);
+  // Tee the stream to pass it to the server component and the payload container
+  const rscPayloadStream1 = new PassThrough();
+  rscPayloadStream.pipe(rscPayloadStream1);
+  const rscPayloadStream2 = new PassThrough();
+  rscPayloadStream.pipe(rscPayloadStream2);
+  const serverComponentElement = createFromReactOnRailsNodeStream(rscPayloadStream1, ssrManifest);
+
+  return () => React.createElement(
+    React.Fragment,
+    null, [
+      React.createElement(
+        React.Fragment,
+        { key: 'serverComponentElement' },
+        use(serverComponentElement)
+      ),
+      React.createElement(
+        RSCPayloadContainer,
+        { RSCPayloadStream: rscPayloadStream2, key: 'rscPayloadContainer' },
+      ),
+    ]
+  );
 };
 
 export default RSCServerRoot;
diff --git a/node_package/src/buildConsoleReplay.ts b/node_package/src/buildConsoleReplay.ts
index a85437753..fe2a62263 100644
--- a/node_package/src/buildConsoleReplay.ts
+++ b/node_package/src/buildConsoleReplay.ts
@@ -51,8 +51,12 @@ export function consoleReplay(
 }
 
 export default function buildConsoleReplay(
-  customConsoleHistory: (typeof console)['history'] | undefined = undefined,
+  customConsoleHistory: typeof console['history'] | undefined = undefined,
   numberOfMessagesToSkip: number = 0,
 ): string {
-  return wrapInScriptTags('consoleReplayLog', consoleReplay(customConsoleHistory, numberOfMessagesToSkip));
+  const consoleReplayJS = consoleReplay(customConsoleHistory, numberOfMessagesToSkip);
+  if (consoleReplayJS.length === 0) {
+    return '';
+  }
+  return wrapInScriptTags('consoleReplayLog', consoleReplayJS);
 }
diff --git a/node_package/src/streamServerRenderedReactComponent.ts b/node_package/src/streamServerRenderedReactComponent.ts
index c57229c7f..41f22d563 100644
--- a/node_package/src/streamServerRenderedReactComponent.ts
+++ b/node_package/src/streamServerRenderedReactComponent.ts
@@ -87,16 +87,41 @@ export const transformRenderStreamChunksToResultObject = (renderState: StreamRen
   const consoleHistory = console.history;
   let previouslyReplayedConsoleMessages = 0;
 
+  let consoleReplayTimeoutId: NodeJS.Timeout;
+  const buildConsoleReplayChunk = () => {
+    const consoleReplayScript = buildConsoleReplay(consoleHistory, previouslyReplayedConsoleMessages);
+    previouslyReplayedConsoleMessages = consoleHistory?.length || 0;
+    if (consoleReplayScript.length === 0) {
+      return null;
+    }
+    const consoleReplayJsonChunk = JSON.stringify(createResultObject('', consoleReplayScript, renderState));
+    return consoleReplayJsonChunk;
+  }
+
   const transformStream = new PassThrough({
     transform(chunk, _, callback) {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
       const htmlChunk = chunk.toString() as string;
-      const consoleReplayScript = buildConsoleReplay(consoleHistory, previouslyReplayedConsoleMessages);
-      previouslyReplayedConsoleMessages = consoleHistory?.length || 0;
+      const jsonChunk = JSON.stringify(createResultObject(htmlChunk, '', renderState));
+      this.push(`${jsonChunk}\n`);
+
+      clearTimeout(consoleReplayTimeoutId);
+      consoleReplayTimeoutId = setTimeout(() => {
+        const consoleReplayChunk = buildConsoleReplayChunk();
+        if (consoleReplayChunk) {
+          this.push(`${consoleReplayChunk}\n`);
+        }
+      }, 0);
 
-      const jsonChunk = JSON.stringify(createResultObject(htmlChunk, consoleReplayScript, renderState));
+      callback();
+    },
 
-      this.push(`${jsonChunk}\n`);
+    flush(callback) {
+      clearTimeout(consoleReplayTimeoutId);
+      const consoleReplayChunk = buildConsoleReplayChunk();
+      if (consoleReplayChunk) {
+        this.push(`${consoleReplayChunk}\n`);
+      }
       callback();
     },
   });
diff --git a/node_package/src/transformRSCStreamAndReplayConsoleLogs.ts b/node_package/src/transformRSCStreamAndReplayConsoleLogs.ts
index 92c25d724..5b752f4a1 100644
--- a/node_package/src/transformRSCStreamAndReplayConsoleLogs.ts
+++ b/node_package/src/transformRSCStreamAndReplayConsoleLogs.ts
@@ -1,6 +1,6 @@
 import { RSCPayloadChunk } from './types/index.ts';
 
-export default function transformRSCStreamAndReplayConsoleLogs(stream: ReadableStream<Uint8Array>) {
+export default function transformRSCStreamAndReplayConsoleLogs(stream: ReadableStream<Uint8Array | RenderResult>) {
   return new ReadableStream({
     async start(controller) {
       const reader = stream.getReader();
@@ -9,35 +9,41 @@ export default function transformRSCStreamAndReplayConsoleLogs(stream: ReadableS
 
       let lastIncompleteChunk = '';
       let { value, done } = await reader.read();
-      while (!done) {
-        const decodedValue = lastIncompleteChunk + decoder.decode(value);
-        const chunks = decodedValue.split('\n');
-        lastIncompleteChunk = chunks.pop() ?? '';
+      
+      const handleJsonChunk = (chunk: RenderResult) => {
+        const { html, consoleReplayScript = '' } = chunk;
+        controller.enqueue(encoder.encode(html ?? ''));
+
+        const replayConsoleCode = consoleReplayScript.trim().replace(/^<script.*>/, '').replace(/<\/script>$/, '');
+        if (replayConsoleCode?.trim() !== '') {
+          const scriptElement = document.createElement('script');
+          scriptElement.textContent = replayConsoleCode;
+          document.body.appendChild(scriptElement);
+        }
+      };
 
-        const jsonChunks = chunks
-          .filter((line) => line.trim() !== '')
-          .map((line) => {
-            try {
-              return JSON.parse(line) as RSCPayloadChunk;
-            } catch (error) {
-              console.error('Error parsing JSON:', line, error);
-              throw error;
-            }
-          });
+      while (!done) {
+        if (ArrayBuffer.isView(value)) {
+          const decodedValue = lastIncompleteChunk + decoder.decode(value);
+          const chunks = decodedValue.split('\n');
+          lastIncompleteChunk = chunks.pop() ?? '';
 
-        for (const jsonChunk of jsonChunks) {
-          const { html, consoleReplayScript = '' } = jsonChunk;
-          controller.enqueue(encoder.encode(html ?? ''));
+          const jsonChunks = chunks
+            .filter((line) => line.trim() !== '')
+            .map((line) => {
+              try {
+                return JSON.parse(line) as RSCPayloadChunk;
+              } catch (error) {
+                console.error('Error parsing JSON:', line, error);
+                throw error;
+              }
+            });
 
-          const replayConsoleCode = consoleReplayScript
-            .trim()
-            .replace(/^<script.*>/, '')
-            .replace(/<\/script>$/, '');
-          if (replayConsoleCode?.trim() !== '') {
-            const scriptElement = document.createElement('script');
-            scriptElement.textContent = replayConsoleCode;
-            document.body.appendChild(scriptElement);
+          for (const jsonChunk of jsonChunks) {
+            handleJsonChunk(jsonChunk);
           }
+        } else if (value) {
+          handleJsonChunk(value);
         }
 
         // eslint-disable-next-line no-await-in-loop
diff --git a/node_package/src/types/index.ts b/node_package/src/types/index.ts
index d7c82196b..ed5c8c8a8 100644
--- a/node_package/src/types/index.ts
+++ b/node_package/src/types/index.ts
@@ -34,9 +34,9 @@ export type RailsContext = {
   pathname: string;
   search: string | null;
   httpAcceptLanguage: string;
+  rscPayloadGenerationUrl: string;
 } & ({
   serverSide: false;
-  rscPayloadGenerationUrl: string;
 } | {
   serverSide: true;
   // These parameters are passed from React on Rails Pro to the node renderer.

From b01718eccfaf083b61c1778033662a482fa019ae Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Thu, 27 Mar 2025 13:10:38 +0200
Subject: [PATCH 10/31] linting

---
 node_package/src/RSCClientRoot.ts             |  8 +-
 node_package/src/RSCPayloadContainer.ts       | 39 +++++-----
 node_package/src/RSCServerRoot.ts             | 73 +++++++++++--------
 node_package/src/ReactOnRails.client.ts       |  4 +-
 node_package/src/buildConsoleReplay.ts        |  2 +-
 .../src/registerServerComponent/server.rsc.ts |  9 +--
 .../src/registerServerComponent/server.ts     |  4 +-
 .../src/streamServerRenderedReactComponent.ts |  2 +-
 ...nsformRSCNodeStreamAndReplayConsoleLogs.ts |  4 +-
 .../transformRSCStreamAndReplayConsoleLogs.ts | 11 ++-
 node_package/src/types/index.ts               | 31 ++++----
 11 files changed, 102 insertions(+), 85 deletions(-)

diff --git a/node_package/src/RSCClientRoot.ts b/node_package/src/RSCClientRoot.ts
index ce31f57b6..2b80ff49c 100644
--- a/node_package/src/RSCClientRoot.ts
+++ b/node_package/src/RSCClientRoot.ts
@@ -62,7 +62,7 @@ const createRSCStreamFromPage = () => {
         return chunks.length;
       };
       streamController = controller;
-    }
+    },
   });
 
   if (typeof document !== 'undefined' && document.readyState === 'loading') {
@@ -74,13 +74,13 @@ const createRSCStreamFromPage = () => {
   }
 
   return stream;
-}
+};
 
 const createFromRSCStream = () => {
   const stream = createRSCStreamFromPage();
   const transformedStream = transformRSCStreamAndReplayConsoleLogs(stream);
   return createFromReadableStream<React.ReactNode>(transformedStream);
-}
+};
 
 /**
  * RSCClientRoot is a React component that handles client-side rendering of React Server Components (RSC).
@@ -111,7 +111,7 @@ const RSCClientRoot: RenderFunction = async (
     const root = await createFromRSCStream();
     ReactDOMClient.hydrateRoot(domNode, root);
   } else {
-    const root = await fetchRSC({ componentName, rscPayloadGenerationUrlPath, componentProps })
+    const root = await fetchRSC({ componentName, rscPayloadGenerationUrlPath, componentProps });
     ReactDOMClient.createRoot(domNode).render(root);
   }
   // Added only to satisfy the return type of RenderFunction
diff --git a/node_package/src/RSCPayloadContainer.ts b/node_package/src/RSCPayloadContainer.ts
index 89b85db05..104e09907 100644
--- a/node_package/src/RSCPayloadContainer.ts
+++ b/node_package/src/RSCPayloadContainer.ts
@@ -3,26 +3,25 @@ import * as React from 'react';
 type StreamChunk = {
   chunk: string;
   isLastChunk: boolean;
-}
+};
 
 type RSCPayloadContainerProps = {
   RSCPayloadStream: NodeJS.ReadableStream;
-}
+};
 
 type RSCPayloadContainerInnerProps = {
   chunkIndex: number;
   getChunkPromise: (chunkIndex: number) => Promise<StreamChunk>;
-}
+};
 
 function escapeScript(script: string) {
-  return script
-    .replace(/<!--/g, '<\\!--')
-    .replace(/<\/(script)/gi, '</\\$1');
+  return script.replace(/<!--/g, '<\\!--').replace(/<\/(script)/gi, '</\\$1');
 }
 
-const RSCPayloadContainer = (
-  { chunkIndex, getChunkPromise }: RSCPayloadContainerInnerProps,
-): React.ReactNode => {
+const RSCPayloadContainer = ({
+  chunkIndex,
+  getChunkPromise,
+}: RSCPayloadContainerInnerProps): React.ReactNode => {
   const chunkPromise = getChunkPromise(chunkIndex);
   const chunk = React.use(chunkPromise);
 
@@ -42,13 +41,10 @@ const RSCPayloadContainer = (
     React.createElement(
       React.Suspense,
       { fallback: null, key: `suspense-${chunkIndex}` },
-      React.createElement(
-        RSCPayloadContainer,
-        { chunkIndex: chunkIndex + 1, getChunkPromise },
-      ),
+      React.createElement(RSCPayloadContainer, { chunkIndex: chunkIndex + 1, getChunkPromise }),
     ),
   ]);
-}
+};
 
 export default function RSCPayloadContainerWrapper({ RSCPayloadStream }: RSCPayloadContainerProps) {
   const [chunkPromises] = React.useState<Promise<StreamChunk>[]>(() => {
@@ -84,13 +80,16 @@ export default function RSCPayloadContainerWrapper({ RSCPayloadStream }: RSCPayl
     return promises;
   });
 
-  const getChunkPromise = React.useCallback((chunkIndex: number) => {
-    if (chunkIndex > chunkPromises.length) {
-      throw new Error('React on Rails Error: RSC Chunk index out of bounds');
-    }
+  const getChunkPromise = React.useCallback(
+    (chunkIndex: number) => {
+      if (chunkIndex > chunkPromises.length) {
+        throw new Error('React on Rails Error: RSC Chunk index out of bounds');
+      }
 
-    return chunkPromises[chunkIndex];
-  }, [chunkPromises]);
+      return chunkPromises[chunkIndex];
+    },
+    [chunkPromises],
+  );
 
   return React.createElement(
     React.Suspense,
diff --git a/node_package/src/RSCServerRoot.ts b/node_package/src/RSCServerRoot.ts
index 6e427d845..b57efad95 100644
--- a/node_package/src/RSCServerRoot.ts
+++ b/node_package/src/RSCServerRoot.ts
@@ -17,20 +17,28 @@ declare global {
 type RSCServerRootProps = {
   componentName: string;
   componentProps: Record<string, unknown>;
-}
+};
 
 if (!('use' in React && typeof React.use === 'function')) {
-  throw new Error('React.use is not defined. Please ensure you are using React 18 with experimental features enabled or React 19+ to use server components.');
+  throw new Error(
+    'React.use is not defined. Please ensure you are using React 18 with experimental features enabled or React 19+ to use server components.',
+  );
 }
 
 const { use } = React;
 
-const createFromReactOnRailsNodeStream = (stream: NodeJS.ReadableStream, ssrManifest: Record<string, unknown>) => {
+const createFromReactOnRailsNodeStream = (
+  stream: NodeJS.ReadableStream,
+  ssrManifest: Record<string, unknown>,
+) => {
   const transformedStream = transformRSCStream(stream);
   return createFromNodeStream(transformedStream, ssrManifest);
-}
+};
 
-const createSSRManifest = async (reactServerManifestFileName: string, reactClientManifestFileName: string) => {
+const createSSRManifest = async (
+  reactServerManifestFileName: string,
+  reactClientManifestFileName: string,
+) => {
   const [reactServerManifest, reactClientManifest] = await Promise.all([
     loadJsonFile(reactServerManifestFileName),
     loadJsonFile(reactClientManifestFileName),
@@ -38,7 +46,7 @@ const createSSRManifest = async (reactServerManifestFileName: string, reactClien
 
   const ssrManifest = {
     moduleLoading: {
-      prefix: "/webpack/development/",
+      prefix: '/webpack/development/',
       crossOrigin: null,
     },
     moduleMap: {} as Record<string, unknown>,
@@ -51,38 +59,47 @@ const createSSRManifest = async (reactServerManifestFileName: string, reactClien
         id: (serverFileBundlingInfo as { id: string }).id,
         chunks: (serverFileBundlingInfo as { chunks: string[] }).chunks,
         name: '*',
-      }
+      },
     };
   });
 
   return ssrManifest;
-}
+};
 
-const RSCServerRoot: RenderFunction = async ({ componentName, componentProps }: RSCServerRootProps, railsContext?: RailsContext) => {
-  if (!railsContext?.serverSide || !railsContext?.reactClientManifestFileName || !railsContext?.reactServerClientManifestFileName) {
+const RSCServerRoot: RenderFunction = async (
+  { componentName, componentProps }: RSCServerRootProps,
+  railsContext?: RailsContext,
+) => {
+  if (
+    !railsContext?.serverSide ||
+    !railsContext?.reactClientManifestFileName ||
+    !railsContext?.reactServerClientManifestFileName
+  ) {
     throw new Error(
-      `${'serverClientManifestFileName and reactServerClientManifestFileName are required. ' +
-      'Please ensure that React Server Component webpack configurations are properly set ' +
-      'as stated in the React Server Component tutorial. The received rails context is: '}${  JSON.stringify(railsContext)}`
+      `${
+        'serverClientManifestFileName and reactServerClientManifestFileName are required. ' +
+        'Please ensure that React Server Component webpack configurations are properly set ' +
+        'as stated in the React Server Component tutorial. The received rails context is: '
+      }${JSON.stringify(railsContext)}`,
     );
   }
 
   if (typeof generateRSCPayload !== 'function') {
     throw new Error(
       'generateRSCPayload is not defined. Please ensure that you are using at least version 4.0.0 of ' +
-      'React on Rails Pro and the node renderer, and that ReactOnRailsPro.configuration.enable_rsc_support ' +
-      'is set to true.'
+        'React on Rails Pro and the node renderer, and that ReactOnRailsPro.configuration.enable_rsc_support ' +
+        'is set to true.',
     );
   }
 
   const ssrManifest = await createSSRManifest(
     railsContext.reactServerClientManifestFileName,
-    railsContext.reactClientManifestFileName
+    railsContext.reactClientManifestFileName,
   );
   const rscPayloadStream = await generateRSCPayload(
     componentName,
     componentProps,
-    railsContext.serverSideRSCPayloadParameters
+    railsContext.serverSideRSCPayloadParameters,
   );
 
   // Tee the stream to pass it to the server component and the payload container
@@ -92,20 +109,14 @@ const RSCServerRoot: RenderFunction = async ({ componentName, componentProps }:
   rscPayloadStream.pipe(rscPayloadStream2);
   const serverComponentElement = createFromReactOnRailsNodeStream(rscPayloadStream1, ssrManifest);
 
-  return () => React.createElement(
-    React.Fragment,
-    null, [
-      React.createElement(
-        React.Fragment,
-        { key: 'serverComponentElement' },
-        use(serverComponentElement)
-      ),
-      React.createElement(
-        RSCPayloadContainer,
-        { RSCPayloadStream: rscPayloadStream2, key: 'rscPayloadContainer' },
-      ),
-    ]
-  );
+  return () =>
+    React.createElement(React.Fragment, null, [
+      React.createElement(React.Fragment, { key: 'serverComponentElement' }, use(serverComponentElement)),
+      React.createElement(RSCPayloadContainer, {
+        RSCPayloadStream: rscPayloadStream2,
+        key: 'rscPayloadContainer',
+      }),
+    ]);
 };
 
 export default RSCServerRoot;
diff --git a/node_package/src/ReactOnRails.client.ts b/node_package/src/ReactOnRails.client.ts
index 122a955be..048af9047 100644
--- a/node_package/src/ReactOnRails.client.ts
+++ b/node_package/src/ReactOnRails.client.ts
@@ -84,9 +84,7 @@ globalThis.ReactOnRails = {
     }
 
     if (Object.keys(newOptions).length > 0) {
-      throw new Error(
-        `Invalid options passed to ReactOnRails.options: ${JSON.stringify(newOptions)}`,
-      );
+      throw new Error(`Invalid options passed to ReactOnRails.options: ${JSON.stringify(newOptions)}`);
     }
   },
 
diff --git a/node_package/src/buildConsoleReplay.ts b/node_package/src/buildConsoleReplay.ts
index fe2a62263..b8e924dde 100644
--- a/node_package/src/buildConsoleReplay.ts
+++ b/node_package/src/buildConsoleReplay.ts
@@ -51,7 +51,7 @@ export function consoleReplay(
 }
 
 export default function buildConsoleReplay(
-  customConsoleHistory: typeof console['history'] | undefined = undefined,
+  customConsoleHistory: (typeof console)['history'] | undefined = undefined,
   numberOfMessagesToSkip: number = 0,
 ): string {
   const consoleReplayJS = consoleReplay(customConsoleHistory, numberOfMessagesToSkip);
diff --git a/node_package/src/registerServerComponent/server.rsc.ts b/node_package/src/registerServerComponent/server.rsc.ts
index 8bd345512..469ee34bb 100644
--- a/node_package/src/registerServerComponent/server.rsc.ts
+++ b/node_package/src/registerServerComponent/server.rsc.ts
@@ -3,12 +3,12 @@ import { ReactComponent, RenderFunction } from '../types';
 
 /**
  * Registers React Server Components (RSC) with React on Rails for the RSC bundle.
- * 
+ *
  * This function handles the registration of components in the RSC bundle context,
  * where components are registered directly into the ComponentRegistry without any
  * additional wrapping. This is different from the server bundle registration,
  * which wraps components with RSCServerRoot.
- * 
+ *
  * @param components - Object mapping component names to their implementations
  *
  * @example
@@ -19,8 +19,7 @@ import { ReactComponent, RenderFunction } from '../types';
  * });
  * ```
  */
-const registerServerComponent = (
-  components: { [id: string]: ReactComponent | RenderFunction },
-) => ReactOnRails.register(components);
+const registerServerComponent = (components: { [id: string]: ReactComponent | RenderFunction }) =>
+  ReactOnRails.register(components);
 
 export default registerServerComponent;
diff --git a/node_package/src/registerServerComponent/server.ts b/node_package/src/registerServerComponent/server.ts
index c14dfec57..72f1f5b33 100644
--- a/node_package/src/registerServerComponent/server.ts
+++ b/node_package/src/registerServerComponent/server.ts
@@ -4,10 +4,10 @@ import { ReactComponent, RenderFunction, RailsContext } from '../types/index.ts'
 
 /**
  * Registers React Server Components (RSC) with React on Rails for the server bundle.
- * 
+ *
  * This function wraps each component with RSCServerRoot, which handles the server-side
  * rendering of React Server Components using pre-generated RSC payloads.
- * 
+ *
  * The RSCServerRoot component:
  * - Uses pre-generated RSC payloads from the RSC bundle
  * - Builds the rendering tree of the server component
diff --git a/node_package/src/streamServerRenderedReactComponent.ts b/node_package/src/streamServerRenderedReactComponent.ts
index 41f22d563..28ad6d9dc 100644
--- a/node_package/src/streamServerRenderedReactComponent.ts
+++ b/node_package/src/streamServerRenderedReactComponent.ts
@@ -96,7 +96,7 @@ export const transformRenderStreamChunksToResultObject = (renderState: StreamRen
     }
     const consoleReplayJsonChunk = JSON.stringify(createResultObject('', consoleReplayScript, renderState));
     return consoleReplayJsonChunk;
-  }
+  };
 
   const transformStream = new PassThrough({
     transform(chunk, _, callback) {
diff --git a/node_package/src/transformRSCNodeStreamAndReplayConsoleLogs.ts b/node_package/src/transformRSCNodeStreamAndReplayConsoleLogs.ts
index 2502d7639..35d1b56a9 100644
--- a/node_package/src/transformRSCNodeStreamAndReplayConsoleLogs.ts
+++ b/node_package/src/transformRSCNodeStreamAndReplayConsoleLogs.ts
@@ -30,6 +30,8 @@ export default function transformRSCStream(stream: NodeJS.ReadableStream): NodeJ
   try {
     return stream.pipe(htmlExtractor);
   } catch (error) {
-    throw new Error(`Error transforming RSC stream (${stream.constructor.name}), (stream: ${stream}), stringified stream: ${JSON.stringify(stream)}, error: ${error}`);
+    throw new Error(
+      `Error transforming RSC stream (${stream.constructor.name}), (stream: ${stream}), stringified stream: ${JSON.stringify(stream)}, error: ${error}`,
+    );
   }
 }
diff --git a/node_package/src/transformRSCStreamAndReplayConsoleLogs.ts b/node_package/src/transformRSCStreamAndReplayConsoleLogs.ts
index 5b752f4a1..51bb05873 100644
--- a/node_package/src/transformRSCStreamAndReplayConsoleLogs.ts
+++ b/node_package/src/transformRSCStreamAndReplayConsoleLogs.ts
@@ -1,6 +1,8 @@
 import { RSCPayloadChunk } from './types/index.ts';
 
-export default function transformRSCStreamAndReplayConsoleLogs(stream: ReadableStream<Uint8Array | RenderResult>) {
+export default function transformRSCStreamAndReplayConsoleLogs(
+  stream: ReadableStream<Uint8Array | RenderResult>,
+) {
   return new ReadableStream({
     async start(controller) {
       const reader = stream.getReader();
@@ -9,12 +11,15 @@ export default function transformRSCStreamAndReplayConsoleLogs(stream: ReadableS
 
       let lastIncompleteChunk = '';
       let { value, done } = await reader.read();
-      
+
       const handleJsonChunk = (chunk: RenderResult) => {
         const { html, consoleReplayScript = '' } = chunk;
         controller.enqueue(encoder.encode(html ?? ''));
 
-        const replayConsoleCode = consoleReplayScript.trim().replace(/^<script.*>/, '').replace(/<\/script>$/, '');
+        const replayConsoleCode = consoleReplayScript
+          .trim()
+          .replace(/^<script.*>/, '')
+          .replace(/<\/script>$/, '');
         if (replayConsoleCode?.trim() !== '') {
           const scriptElement = document.createElement('script');
           scriptElement.textContent = replayConsoleCode;
diff --git a/node_package/src/types/index.ts b/node_package/src/types/index.ts
index ed5c8c8a8..7387671d1 100644
--- a/node_package/src/types/index.ts
+++ b/node_package/src/types/index.ts
@@ -35,20 +35,23 @@ export type RailsContext = {
   search: string | null;
   httpAcceptLanguage: string;
   rscPayloadGenerationUrl: string;
-} & ({
-  serverSide: false;
-} | {
-  serverSide: true;
-  // These parameters are passed from React on Rails Pro to the node renderer.
-  // They contain the necessary information to generate the RSC (React Server Components) payload.
-  // Typically, this includes the bundle hash of the RSC bundle.
-  // The react-on-rails package uses 'unknown' for these parameters to avoid direct dependency.
-  // This ensures that if the communication protocol between the node renderer and the Rails server changes,
-  // we don't need to update this type or introduce a breaking change.
-  serverSideRSCPayloadParameters: unknown;
-  reactClientManifestFileName?: string;
-  reactServerClientManifestFileName?: string;
-});
+} & (
+  | {
+      serverSide: false;
+    }
+  | {
+      serverSide: true;
+      // These parameters are passed from React on Rails Pro to the node renderer.
+      // They contain the necessary information to generate the RSC (React Server Components) payload.
+      // Typically, this includes the bundle hash of the RSC bundle.
+      // The react-on-rails package uses 'unknown' for these parameters to avoid direct dependency.
+      // This ensures that if the communication protocol between the node renderer and the Rails server changes,
+      // we don't need to update this type or introduce a breaking change.
+      serverSideRSCPayloadParameters: unknown;
+      reactClientManifestFileName?: string;
+      reactServerClientManifestFileName?: string;
+    }
+);
 
 // not strictly what we want, see https://github.com/microsoft/TypeScript/issues/17867#issuecomment-323164375
 type AuthenticityHeaders = Record<string, string> & {

From 86abe75cc8db15fa0ad1c74e37d3aa5bc036dec4 Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Thu, 27 Mar 2025 13:10:45 +0200
Subject: [PATCH 11/31] fix ts errors

---
 node_package/src/ClientSideRenderer.ts | 6 +++---
 node_package/src/ComponentRegistry.ts  | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/node_package/src/ClientSideRenderer.ts b/node_package/src/ClientSideRenderer.ts
index 0cd74ed59..b4978c598 100644
--- a/node_package/src/ClientSideRenderer.ts
+++ b/node_package/src/ClientSideRenderer.ts
@@ -20,19 +20,19 @@ async function delegateToRenderer(
   railsContext: RailsContext,
   domNodeId: string,
   trace: boolean,
-): boolean {
+): Promise<boolean> {
   const { name, component, isRenderer } = componentObj;
 
   if (isRenderer) {
     if (trace) {
       console.log(
-        `DELEGATING TO RENDERER ${componentObj.name} for dom node with id: ${domNodeId} with props, railsContext:`,
+        `DELEGATING TO RENDERER ${name} for dom node with id: ${domNodeId} with props, railsContext:`,
         props,
         railsContext,
       );
     }
 
-    (component as RenderFunction)(props, railsContext, domNodeId);
+    await (component as RenderFunction)(props, railsContext, domNodeId);
     return true;
   }
 
diff --git a/node_package/src/ComponentRegistry.ts b/node_package/src/ComponentRegistry.ts
index 00e91271a..1a93127be 100644
--- a/node_package/src/ComponentRegistry.ts
+++ b/node_package/src/ComponentRegistry.ts
@@ -19,7 +19,7 @@ export function register(components: Record<string, ReactComponentOrRenderFuncti
     }
 
     const renderFunction = isRenderFunction(component);
-    const isRenderer = renderFunction && (component as RenderFunction).length === 3;
+    const isRenderer = renderFunction && component .length === 3;
 
     componentRegistry.set(name, {
       name,

From f324aceecd0b93b075bde7f612f290318cf7c565 Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Thu, 27 Mar 2025 13:50:02 +0200
Subject: [PATCH 12/31] tmp

---
 node_package/src/streamServerRenderedReactComponent.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/node_package/src/streamServerRenderedReactComponent.ts b/node_package/src/streamServerRenderedReactComponent.ts
index 28ad6d9dc..b54f4375e 100644
--- a/node_package/src/streamServerRenderedReactComponent.ts
+++ b/node_package/src/streamServerRenderedReactComponent.ts
@@ -138,7 +138,10 @@ export const transformRenderStreamChunksToResultObject = (renderState: StreamRen
   // Note: Readable.from can merge multiple chunks into a single chunk, so we need to ensure that we can separate them later
   const { stream: readableStream, emitError } = bufferStream(transformStream);
 
-  const writeChunk = (chunk: string) => transformStream.write(chunk);
+  const writeChunk = (chunk: string) => {
+    debugger;
+    transformStream.write(chunk);
+  }
   const endStream = () => {
     transformStream.end();
     pipedStream?.abort();

From 06be6cf2c291a54054a6a9fe651036b5e9be3dec Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Thu, 27 Mar 2025 14:32:36 +0200
Subject: [PATCH 13/31] linting

---
 knip.ts                                                | 1 +
 node_package/src/ComponentRegistry.ts                  | 2 +-
 node_package/src/streamServerRenderedReactComponent.ts | 5 +----
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/knip.ts b/knip.ts
index bb4264c9a..6c1b9d67c 100644
--- a/knip.ts
+++ b/knip.ts
@@ -9,6 +9,7 @@ const config: KnipConfig = {
         'node_package/src/ReactOnRailsRSC.ts!',
         'node_package/src/registerServerComponent/client.ts!',
         'node_package/src/registerServerComponent/server.ts!',
+        'node_package/src/registerServerComponent/server.rsc.ts!',
         'node_package/src/RSCClientRoot.ts!',
         'eslint.config.ts',
       ],
diff --git a/node_package/src/ComponentRegistry.ts b/node_package/src/ComponentRegistry.ts
index 1a93127be..d6cf72a48 100644
--- a/node_package/src/ComponentRegistry.ts
+++ b/node_package/src/ComponentRegistry.ts
@@ -19,7 +19,7 @@ export function register(components: Record<string, ReactComponentOrRenderFuncti
     }
 
     const renderFunction = isRenderFunction(component);
-    const isRenderer = renderFunction && component .length === 3;
+    const isRenderer = renderFunction && component.length === 3;
 
     componentRegistry.set(name, {
       name,
diff --git a/node_package/src/streamServerRenderedReactComponent.ts b/node_package/src/streamServerRenderedReactComponent.ts
index b54f4375e..28ad6d9dc 100644
--- a/node_package/src/streamServerRenderedReactComponent.ts
+++ b/node_package/src/streamServerRenderedReactComponent.ts
@@ -138,10 +138,7 @@ export const transformRenderStreamChunksToResultObject = (renderState: StreamRen
   // Note: Readable.from can merge multiple chunks into a single chunk, so we need to ensure that we can separate them later
   const { stream: readableStream, emitError } = bufferStream(transformStream);
 
-  const writeChunk = (chunk: string) => {
-    debugger;
-    transformStream.write(chunk);
-  }
+  const writeChunk = (chunk: string) => transformStream.write(chunk);
   const endStream = () => {
     transformStream.end();
     pipedStream?.abort();

From 86656e88de22442f8793311fc37c37810d503830 Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Thu, 27 Mar 2025 17:15:31 +0200
Subject: [PATCH 14/31] linting

---
 node_package/src/RSCClientRoot.ts                      |  8 ++++----
 node_package/src/RSCPayloadContainer.ts                |  4 ++--
 node_package/src/RSCServerRoot.ts                      |  2 +-
 node_package/src/ReactOnRails.client.ts                |  2 +-
 node_package/src/loadJsonFile.ts                       |  2 +-
 node_package/src/registerServerComponent/server.ts     |  2 +-
 .../src/transformRSCNodeStreamAndReplayConsoleLogs.ts  | 10 ++--------
 7 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/node_package/src/RSCClientRoot.ts b/node_package/src/RSCClientRoot.ts
index 2b80ff49c..f45d8d151 100644
--- a/node_package/src/RSCClientRoot.ts
+++ b/node_package/src/RSCClientRoot.ts
@@ -7,7 +7,7 @@ import * as ReactDOMClient from 'react-dom/client';
 import { createFromReadableStream } from 'react-on-rails-rsc/client';
 import { fetch } from './utils.ts';
 import transformRSCStreamAndReplayConsoleLogs from './transformRSCStreamAndReplayConsoleLogs.ts';
-import { RailsContext, RenderFunction } from './types/index.ts';
+import { RailsContext, RenderFunction, RenderResult } from './types/index.ts';
 
 const { use } = React;
 
@@ -44,14 +44,14 @@ const fetchRSC = ({ componentName, rscPayloadGenerationUrlPath, componentProps }
 };
 
 const createRSCStreamFromPage = () => {
-  let streamController: ReadableStreamController<unknown> | undefined;
-  const stream = new ReadableStream({
+  let streamController: ReadableStreamController<RenderResult> | undefined;
+  const stream = new ReadableStream<RenderResult>({
     start(controller) {
       if (typeof window === 'undefined') {
         return;
       }
       const handleChunk = (chunk: unknown) => {
-        controller.enqueue(chunk);
+        controller.enqueue(chunk as RenderResult);
       };
       if (!window.__FLIGHT_DATA) {
         window.__FLIGHT_DATA = [];
diff --git a/node_package/src/RSCPayloadContainer.ts b/node_package/src/RSCPayloadContainer.ts
index 104e09907..1b784ca3f 100644
--- a/node_package/src/RSCPayloadContainer.ts
+++ b/node_package/src/RSCPayloadContainer.ts
@@ -50,7 +50,7 @@ export default function RSCPayloadContainerWrapper({ RSCPayloadStream }: RSCPayl
   const [chunkPromises] = React.useState<Promise<StreamChunk>[]>(() => {
     const promises: Promise<StreamChunk>[] = [];
     let resolveCurrentPromise: (streamChunk: StreamChunk) => void = () => {};
-    let rejectCurrentPromise: (error: Error) => void = () => {};
+    let rejectCurrentPromise: (error: unknown) => void = () => {};
     const decoder = new TextDecoder();
 
     const createNewPromise = () => {
@@ -64,7 +64,7 @@ export default function RSCPayloadContainerWrapper({ RSCPayloadStream }: RSCPayl
 
     createNewPromise();
     RSCPayloadStream.on('data', (streamChunk) => {
-      resolveCurrentPromise({ chunk: decoder.decode(streamChunk), isLastChunk: false });
+      resolveCurrentPromise({ chunk: decoder.decode(streamChunk as Uint8Array), isLastChunk: false });
       createNewPromise();
     });
 
diff --git a/node_package/src/RSCServerRoot.ts b/node_package/src/RSCServerRoot.ts
index b57efad95..99c91064f 100644
--- a/node_package/src/RSCServerRoot.ts
+++ b/node_package/src/RSCServerRoot.ts
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { createFromNodeStream } from 'react-on-rails-rsc/client.node';
+import { PassThrough } from 'stream';
 import type { RenderFunction, RailsContext } from './types';
 import transformRSCStream from './transformRSCNodeStreamAndReplayConsoleLogs';
 import loadJsonFile from './loadJsonFile';
 import RSCPayloadContainer from './RSCPayloadContainer';
-import { PassThrough } from 'stream';
 
 declare global {
   function generateRSCPayload(
diff --git a/node_package/src/ReactOnRails.client.ts b/node_package/src/ReactOnRails.client.ts
index 048af9047..752fba1d4 100644
--- a/node_package/src/ReactOnRails.client.ts
+++ b/node_package/src/ReactOnRails.client.ts
@@ -186,7 +186,7 @@ globalThis.ReactOnRails = {
   },
 
   resetOptions(): void {
-    this.options = Object.assign({}, DEFAULT_OPTIONS);
+    this.options = { ...DEFAULT_OPTIONS };
   },
 
   isRSCBundle: false,
diff --git a/node_package/src/loadJsonFile.ts b/node_package/src/loadJsonFile.ts
index 68d562abe..2628711f9 100644
--- a/node_package/src/loadJsonFile.ts
+++ b/node_package/src/loadJsonFile.ts
@@ -15,7 +15,7 @@ export default async function loadJsonFile(fileName: string) {
   }
 
   try {
-    const file = JSON.parse(await fs.readFile(filePath, 'utf8'));
+    const file = JSON.parse(await fs.readFile(filePath, 'utf8')) as LoadedJsonFile;
     loadedJsonFiles.set(filePath, file);
     return file;
   } catch (error) {
diff --git a/node_package/src/registerServerComponent/server.ts b/node_package/src/registerServerComponent/server.ts
index 72f1f5b33..f532db5e0 100644
--- a/node_package/src/registerServerComponent/server.ts
+++ b/node_package/src/registerServerComponent/server.ts
@@ -31,7 +31,7 @@ const registerServerComponent = (components: Record<string, ReactComponent>) =>
       railsContext?: RailsContext,
     ) => RSCServerRoot({ componentName, componentProps }, railsContext);
   }
-  return ReactOnRails.register(componentsWrappedInRSCServerRoot);
+  ReactOnRails.register(componentsWrappedInRSCServerRoot);
 };
 
 export default registerServerComponent;
diff --git a/node_package/src/transformRSCNodeStreamAndReplayConsoleLogs.ts b/node_package/src/transformRSCNodeStreamAndReplayConsoleLogs.ts
index 35d1b56a9..d40e10359 100644
--- a/node_package/src/transformRSCNodeStreamAndReplayConsoleLogs.ts
+++ b/node_package/src/transformRSCNodeStreamAndReplayConsoleLogs.ts
@@ -7,7 +7,7 @@ export default function transformRSCStream(stream: NodeJS.ReadableStream): NodeJ
   const htmlExtractor = new Transform({
     transform(oneOrMoreChunks, _, callback) {
       try {
-        const decodedChunk = lastIncompleteChunk + decoder.decode(oneOrMoreChunks);
+        const decodedChunk = lastIncompleteChunk + decoder.decode(oneOrMoreChunks as Uint8Array);
         const separateChunks = decodedChunk.split('\n').filter((chunk) => chunk.trim() !== '');
 
         if (!decodedChunk.endsWith('\n')) {
@@ -27,11 +27,5 @@ export default function transformRSCStream(stream: NodeJS.ReadableStream): NodeJ
     },
   });
 
-  try {
-    return stream.pipe(htmlExtractor);
-  } catch (error) {
-    throw new Error(
-      `Error transforming RSC stream (${stream.constructor.name}), (stream: ${stream}), stringified stream: ${JSON.stringify(stream)}, error: ${error}`,
-    );
-  }
+  return stream.pipe(htmlExtractor);
 }

From 29a3cc81b9541649b57f3bdd9e85917efd52c3a6 Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Fri, 4 Apr 2025 12:05:33 +0200
Subject: [PATCH 15/31] Update RSCClientRoot and related files to use
 RSCPayloadChunk type for improved type safety in RSC streaming and handling.

---
 node_package/src/RSCClientRoot.ts                         | 8 ++++----
 .../src/transformRSCStreamAndReplayConsoleLogs.ts         | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/node_package/src/RSCClientRoot.ts b/node_package/src/RSCClientRoot.ts
index f45d8d151..d3cae54e0 100644
--- a/node_package/src/RSCClientRoot.ts
+++ b/node_package/src/RSCClientRoot.ts
@@ -7,7 +7,7 @@ import * as ReactDOMClient from 'react-dom/client';
 import { createFromReadableStream } from 'react-on-rails-rsc/client';
 import { fetch } from './utils.ts';
 import transformRSCStreamAndReplayConsoleLogs from './transformRSCStreamAndReplayConsoleLogs.ts';
-import { RailsContext, RenderFunction, RenderResult } from './types/index.ts';
+import { RailsContext, RenderFunction, RSCPayloadChunk } from './types/index.ts';
 
 const { use } = React;
 
@@ -44,14 +44,14 @@ const fetchRSC = ({ componentName, rscPayloadGenerationUrlPath, componentProps }
 };
 
 const createRSCStreamFromPage = () => {
-  let streamController: ReadableStreamController<RenderResult> | undefined;
-  const stream = new ReadableStream<RenderResult>({
+  let streamController: ReadableStreamController<RSCPayloadChunk> | undefined;
+  const stream = new ReadableStream<RSCPayloadChunk>({
     start(controller) {
       if (typeof window === 'undefined') {
         return;
       }
       const handleChunk = (chunk: unknown) => {
-        controller.enqueue(chunk as RenderResult);
+        controller.enqueue(chunk as RSCPayloadChunk);
       };
       if (!window.__FLIGHT_DATA) {
         window.__FLIGHT_DATA = [];
diff --git a/node_package/src/transformRSCStreamAndReplayConsoleLogs.ts b/node_package/src/transformRSCStreamAndReplayConsoleLogs.ts
index 51bb05873..91131e9b0 100644
--- a/node_package/src/transformRSCStreamAndReplayConsoleLogs.ts
+++ b/node_package/src/transformRSCStreamAndReplayConsoleLogs.ts
@@ -1,7 +1,7 @@
 import { RSCPayloadChunk } from './types/index.ts';
 
 export default function transformRSCStreamAndReplayConsoleLogs(
-  stream: ReadableStream<Uint8Array | RenderResult>,
+  stream: ReadableStream<Uint8Array | RSCPayloadChunk>,
 ) {
   return new ReadableStream({
     async start(controller) {
@@ -12,7 +12,7 @@ export default function transformRSCStreamAndReplayConsoleLogs(
       let lastIncompleteChunk = '';
       let { value, done } = await reader.read();
 
-      const handleJsonChunk = (chunk: RenderResult) => {
+      const handleJsonChunk = (chunk: RSCPayloadChunk) => {
         const { html, consoleReplayScript = '' } = chunk;
         controller.enqueue(encoder.encode(html ?? ''));
 

From ba2ce878b57975d84be053ecd6dc5ee1d9bc56b6 Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Fri, 4 Apr 2025 13:59:25 +0200
Subject: [PATCH 16/31] Reset render state after processing each chunk to
 prevent error carryover in stream rendering.

---
 node_package/src/streamServerRenderedReactComponent.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/node_package/src/streamServerRenderedReactComponent.ts b/node_package/src/streamServerRenderedReactComponent.ts
index 28ad6d9dc..1519f6e44 100644
--- a/node_package/src/streamServerRenderedReactComponent.ts
+++ b/node_package/src/streamServerRenderedReactComponent.ts
@@ -105,6 +105,12 @@ export const transformRenderStreamChunksToResultObject = (renderState: StreamRen
       const jsonChunk = JSON.stringify(createResultObject(htmlChunk, '', renderState));
       this.push(`${jsonChunk}\n`);
 
+      // Reset the render state to ensure that the error is not carried over to the next chunk
+      // eslint-disable-next-line no-param-reassign
+      renderState.error = undefined;
+      // eslint-disable-next-line no-param-reassign
+      renderState.hasErrors = false;
+
       clearTimeout(consoleReplayTimeoutId);
       consoleReplayTimeoutId = setTimeout(() => {
         const consoleReplayChunk = buildConsoleReplayChunk();

From da94f206b972676fe4f14e2019d452a69a7cfa44 Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Fri, 4 Apr 2025 16:01:25 +0200
Subject: [PATCH 17/31] Update RailsContext type to make
 rscPayloadGenerationUrl optional

---
 lib/react_on_rails/helper.rb    | 8 +++++---
 node_package/src/types/index.ts | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/lib/react_on_rails/helper.rb b/lib/react_on_rails/helper.rb
index f85f9d29c..c613a8493 100644
--- a/lib/react_on_rails/helper.rb
+++ b/lib/react_on_rails/helper.rb
@@ -358,7 +358,7 @@ def json_safe_and_pretty(hash_or_string)
     # second parameter passed to both component and store Render-Functions.
     # This method can be called from views and from the controller, as `helpers.rails_context`
     #
-    # rubocop:disable Metrics/AbcSize, Metrics/CyclomaticComplexity
+    # rubocop:disable Metrics/AbcSize, Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
     def rails_context(server_side: true)
       # ALERT: Keep in sync with node_package/src/types/index.ts for the properties of RailsContext
       @rails_context ||= begin
@@ -376,10 +376,12 @@ def rails_context(server_side: true)
           rorVersion: ReactOnRails::VERSION,
           # TODO: v13 just use the version if existing
           rorPro: ReactOnRails::Utils.react_on_rails_pro?,
-          rscPayloadGenerationUrl: rsc_url
         }
+
         if ReactOnRails::Utils.react_on_rails_pro?
           result[:rorProVersion] = ReactOnRails::Utils.react_on_rails_pro_version
+
+          result[:rscPayloadGenerationUrl] = rsc_url if ReactOnRailsPro.configuration.enable_rsc_support
         end
 
         if defined?(request) && request.present?
@@ -437,7 +439,7 @@ def load_pack_for_generated_component(react_component_name, render_options)
       append_stylesheet_pack_tag("generated/#{react_component_name}")
     end
 
-    # rubocop:enable Metrics/AbcSize, Metrics/CyclomaticComplexity
+    # rubocop:enable Metrics/AbcSize, Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
 
     private
 
diff --git a/node_package/src/types/index.ts b/node_package/src/types/index.ts
index 7387671d1..4d13a27bc 100644
--- a/node_package/src/types/index.ts
+++ b/node_package/src/types/index.ts
@@ -34,7 +34,7 @@ export type RailsContext = {
   pathname: string;
   search: string | null;
   httpAcceptLanguage: string;
-  rscPayloadGenerationUrl: string;
+  rscPayloadGenerationUrl?: string;
 } & (
   | {
       serverSide: false;

From ad0d02a434ba030c37b77267dfbb15989bb2c5fc Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Fri, 4 Apr 2025 16:13:31 +0200
Subject: [PATCH 18/31] Fix formatting in ReactOnRails helper for consistency

---
 lib/react_on_rails/helper.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/react_on_rails/helper.rb b/lib/react_on_rails/helper.rb
index c613a8493..4c8532d31 100644
--- a/lib/react_on_rails/helper.rb
+++ b/lib/react_on_rails/helper.rb
@@ -375,7 +375,7 @@ def rails_context(server_side: true)
           i18nDefaultLocale: I18n.default_locale,
           rorVersion: ReactOnRails::VERSION,
           # TODO: v13 just use the version if existing
-          rorPro: ReactOnRails::Utils.react_on_rails_pro?,
+          rorPro: ReactOnRails::Utils.react_on_rails_pro?
         }
 
         if ReactOnRails::Utils.react_on_rails_pro?

From 8cd147618c263c9cc1e67c79a253adc5d1db9c3f Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Sun, 6 Apr 2025 14:59:39 +0200
Subject: [PATCH 19/31] Update error handling in createPromiseResult to return
 errorRenderState instead of renderState

---
 node_package/src/serverRenderReactComponent.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/node_package/src/serverRenderReactComponent.ts b/node_package/src/serverRenderReactComponent.ts
index 2327ed7cf..a33bb5c14 100644
--- a/node_package/src/serverRenderReactComponent.ts
+++ b/node_package/src/serverRenderReactComponent.ts
@@ -115,7 +115,7 @@ async function createPromiseResult(
   } catch (e: unknown) {
     const errorRenderState = handleRenderingError(e, { componentName, throwJsErrors });
     const consoleReplayScript = buildConsoleReplay(consoleHistory);
-    return createResultObject(errorRenderState.result, consoleReplayScript, renderState);
+    return createResultObject(errorRenderState.result, consoleReplayScript, errorRenderState);
   }
 }
 

From e80ce8ba7ceb184f0c2100f9421f37cf3bc5010f Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Mon, 7 Apr 2025 10:26:15 +0200
Subject: [PATCH 20/31] Refactor RSCServerRoot to use RailsContext in
 generateRSCPayload and improve error messaging for missing manifest files

---
 node_package/src/RSCServerRoot.ts | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/node_package/src/RSCServerRoot.ts b/node_package/src/RSCServerRoot.ts
index 99c91064f..8023bdc17 100644
--- a/node_package/src/RSCServerRoot.ts
+++ b/node_package/src/RSCServerRoot.ts
@@ -10,7 +10,7 @@ declare global {
   function generateRSCPayload(
     componentName: string,
     props: Record<string, unknown>,
-    serverSideRSCPayloadParameters: unknown,
+    railsContext: RailsContext,
   ): Promise<NodeJS.ReadableStream>;
 }
 
@@ -76,11 +76,10 @@ const RSCServerRoot: RenderFunction = async (
     !railsContext?.reactServerClientManifestFileName
   ) {
     throw new Error(
-      `${
-        'serverClientManifestFileName and reactServerClientManifestFileName are required. ' +
+      'serverClientManifestFileName and reactServerClientManifestFileName are required. ' +
         'Please ensure that React Server Component webpack configurations are properly set ' +
-        'as stated in the React Server Component tutorial. The received rails context is: '
-      }${JSON.stringify(railsContext)}`,
+        'as stated in the React Server Component tutorial. ' +
+        'Ensure to use "stream_react_component" instead of "react_component" to SSR a server component.',
     );
   }
 
@@ -96,11 +95,7 @@ const RSCServerRoot: RenderFunction = async (
     railsContext.reactServerClientManifestFileName,
     railsContext.reactClientManifestFileName,
   );
-  const rscPayloadStream = await generateRSCPayload(
-    componentName,
-    componentProps,
-    railsContext.serverSideRSCPayloadParameters,
-  );
+  const rscPayloadStream = await generateRSCPayload(componentName, componentProps, railsContext);
 
   // Tee the stream to pass it to the server component and the payload container
   const rscPayloadStream1 = new PassThrough();

From dc7a7d6913880cdd5fd27ba2a0ffd709c55ccf13 Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Mon, 7 Apr 2025 10:31:17 +0200
Subject: [PATCH 21/31] Add .yalc directory to ESLint ignore patterns

---
 eslint.config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/eslint.config.ts b/eslint.config.ts
index 680fd9b0b..a0ccf807c 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -41,6 +41,7 @@ const config = tsEslint.config([
     '**/node_modules/',
     // fixtures
     '**/fixtures/',
+    '**/.yalc/**/*',
   ]),
   {
     files: ['**/*.[jt]s', '**/*.[jt]sx', '**/*.[cm][jt]s'],

From 2182ce16fbc0a088d0985fcd0a68f656afc14966 Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Mon, 7 Apr 2025 11:33:13 +0200
Subject: [PATCH 22/31] update changelog

---
 CHANGELOG.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 637f08a56..f0ba90d89 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,14 @@ After a release, please make sure to run `bundle exec rake update_changelog`. Th
 
 Changes since the last non-beta release.
 
+#### Improved
+
+- Improved RSC rendering flow by eliminating double rendering of server components and reducing the number of HTTP requests.
+- Updated communication protocol between Node Renderer and Rails to version 2.0.0 which supports the ability to upload multiple bundles at once.
+- Introduced `RSCServerRoot` and `RSCPayloadContainer` components to enable server-side rendering (SSR) of server components using RSC payload, and to embed the RSC payload directly into the page.
+
+[PR 1696](https://github.com/shakacode/react_on_rails/pull/1696) by [AbanoubGhadban](https://github.com/AbanoubGhadban).
+
 #### Added
 
 - Configuration option `generated_component_packs_loading_strategy` to control how generated component packs are loaded. It supports `sync`, `async`, and `defer` strategies. [PR 1712](https://github.com/shakacode/react_on_rails/pull/1712) by [AbanoubGhadban](https://github.com/AbanoubGhadban).

From 553425eedf1158722b70d8f7a2a264d1648a2126 Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Wed, 9 Apr 2025 10:45:32 +0200
Subject: [PATCH 23/31] rename __FLIGHT_DATA to REACT_ON_RAILS_RSC_PAYLOAD for
 improved clarity and consistency in RSC streaming handling.

---
 node_package/src/RSCClientRoot.ts       | 10 +++++-----
 node_package/src/RSCPayloadContainer.ts |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/node_package/src/RSCClientRoot.ts b/node_package/src/RSCClientRoot.ts
index d3cae54e0..8e41ee0ea 100644
--- a/node_package/src/RSCClientRoot.ts
+++ b/node_package/src/RSCClientRoot.ts
@@ -17,7 +17,7 @@ if (typeof use !== 'function') {
 
 declare global {
   interface Window {
-    __FLIGHT_DATA: unknown[];
+    REACT_ON_RAILS_RSC_PAYLOAD: unknown[];
   }
 }
 
@@ -53,11 +53,11 @@ const createRSCStreamFromPage = () => {
       const handleChunk = (chunk: unknown) => {
         controller.enqueue(chunk as RSCPayloadChunk);
       };
-      if (!window.__FLIGHT_DATA) {
-        window.__FLIGHT_DATA = [];
+      if (!window.REACT_ON_RAILS_RSC_PAYLOAD) {
+        window.REACT_ON_RAILS_RSC_PAYLOAD = [];
       }
-      window.__FLIGHT_DATA.forEach(handleChunk);
-      window.__FLIGHT_DATA.push = (...chunks: unknown[]) => {
+      window.REACT_ON_RAILS_RSC_PAYLOAD.forEach(handleChunk);
+      window.REACT_ON_RAILS_RSC_PAYLOAD.push = (...chunks: unknown[]) => {
         chunks.forEach(handleChunk);
         return chunks.length;
       };
diff --git a/node_package/src/RSCPayloadContainer.ts b/node_package/src/RSCPayloadContainer.ts
index 1b784ca3f..f2181e8c9 100644
--- a/node_package/src/RSCPayloadContainer.ts
+++ b/node_package/src/RSCPayloadContainer.ts
@@ -27,7 +27,7 @@ const RSCPayloadContainer = ({
 
   const scriptElement = React.createElement('script', {
     dangerouslySetInnerHTML: {
-      __html: escapeScript(`(self.__FLIGHT_DATA||=[]).push(${chunk.chunk})`),
+      __html: escapeScript(`(self.REACT_ON_RAILS_RSC_PAYLOAD||=[]).push(${chunk.chunk})`),
     },
     key: `script-${chunkIndex}`,
   });

From 307ab961e5f4590f58096d697dd8579a223d23e0 Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Wed, 9 Apr 2025 11:21:49 +0200
Subject: [PATCH 24/31] Enhance type safety in RSCClientRoot and
 RSCPayloadContainer by using RSCPayloadChunk type, and improve documentation
 for chunk handling and transfer resilience.

---
 node_package/src/RSCClientRoot.ts       | 25 +++++++++++++++++++------
 node_package/src/RSCPayloadContainer.ts | 22 ++++++++++++++++++++++
 node_package/src/RSCServerRoot.ts       |  4 ++--
 3 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/node_package/src/RSCClientRoot.ts b/node_package/src/RSCClientRoot.ts
index 8e41ee0ea..33a97b405 100644
--- a/node_package/src/RSCClientRoot.ts
+++ b/node_package/src/RSCClientRoot.ts
@@ -1,7 +1,5 @@
 'use client';
 
-/* eslint-disable no-underscore-dangle */
-
 import * as React from 'react';
 import * as ReactDOMClient from 'react-dom/client';
 import { createFromReadableStream } from 'react-on-rails-rsc/client';
@@ -17,7 +15,7 @@ if (typeof use !== 'function') {
 
 declare global {
   interface Window {
-    REACT_ON_RAILS_RSC_PAYLOAD: unknown[];
+    REACT_ON_RAILS_RSC_PAYLOAD: RSCPayloadChunk[];
   }
 }
 
@@ -50,14 +48,29 @@ const createRSCStreamFromPage = () => {
       if (typeof window === 'undefined') {
         return;
       }
-      const handleChunk = (chunk: unknown) => {
-        controller.enqueue(chunk as RSCPayloadChunk);
+      const handleChunk = (chunk: RSCPayloadChunk) => {
+        controller.enqueue(chunk);
       };
+
+      // The RSC payload transfer mechanism works in two possible scenarios:
+      // 1. RSCClientRoot executes first:
+      //    - Initializes REACT_ON_RAILS_RSC_PAYLOAD as an empty array
+      //    - Overrides the push function to handle incoming chunks
+      //    - When server scripts run later, they use the overridden push function
+      // 2. Server scripts execute first:
+      //    - Initialize REACT_ON_RAILS_RSC_PAYLOAD as an empty array
+      //    - Buffer RSC payload chunks in the array
+      //    - When RSCClientRoot runs, it reads buffered chunks and overrides push
+      //
+      // Key points:
+      // - The array is never reassigned, ensuring data consistency
+      // - The push function override ensures all chunks are properly handled
+      // - Execution order is irrelevant - both scenarios work correctly
       if (!window.REACT_ON_RAILS_RSC_PAYLOAD) {
         window.REACT_ON_RAILS_RSC_PAYLOAD = [];
       }
       window.REACT_ON_RAILS_RSC_PAYLOAD.forEach(handleChunk);
-      window.REACT_ON_RAILS_RSC_PAYLOAD.push = (...chunks: unknown[]) => {
+      window.REACT_ON_RAILS_RSC_PAYLOAD.push = (...chunks) => {
         chunks.forEach(handleChunk);
         return chunks.length;
       };
diff --git a/node_package/src/RSCPayloadContainer.ts b/node_package/src/RSCPayloadContainer.ts
index f2181e8c9..7aa64224d 100644
--- a/node_package/src/RSCPayloadContainer.ts
+++ b/node_package/src/RSCPayloadContainer.ts
@@ -18,6 +18,25 @@ function escapeScript(script: string) {
   return script.replace(/<!--/g, '<\\!--').replace(/<\/(script)/gi, '</\\$1');
 }
 
+/**
+ * RSCPayloadContainer is a React component that handles the server-to-client transfer
+ * of React Server Component (RSC) payloads. It works in conjunction with RSCClientRoot
+ * to ensure reliable delivery of RSC chunks.
+ *
+ * How it works:
+ * 1. Receives a NodeJS.ReadableStream containing RSC payload chunks from the server
+ * 2. Creates a series of promises to handle each chunk asynchronously
+ * 3. For each chunk:
+ *    - Creates a script tag that pushes the chunk to window.REACT_ON_RAILS_RSC_PAYLOAD
+ *    - Uses React.use() to handle the async chunk loading
+ *    - Recursively renders the next chunk using Suspense
+ *
+ * The component ensures that:
+ * - Chunks are processed in order
+ * - Server-side console logs are preserved
+ * - The transfer is resilient to network conditions
+ * - The client receives all chunks reliably
+ */
 const RSCPayloadContainer = ({
   chunkIndex,
   getChunkPromise,
@@ -27,6 +46,9 @@ const RSCPayloadContainer = ({
 
   const scriptElement = React.createElement('script', {
     dangerouslySetInnerHTML: {
+      // Ensure the array is never reassigned.
+      // Even at the RSCClientRoot component, the array is assigned
+      // only if it's not already assigned by this script.
       __html: escapeScript(`(self.REACT_ON_RAILS_RSC_PAYLOAD||=[]).push(${chunk.chunk})`),
     },
     key: `script-${chunkIndex}`,
diff --git a/node_package/src/RSCServerRoot.ts b/node_package/src/RSCServerRoot.ts
index 8023bdc17..6db41cc4c 100644
--- a/node_package/src/RSCServerRoot.ts
+++ b/node_package/src/RSCServerRoot.ts
@@ -79,14 +79,14 @@ const RSCServerRoot: RenderFunction = async (
       'serverClientManifestFileName and reactServerClientManifestFileName are required. ' +
         'Please ensure that React Server Component webpack configurations are properly set ' +
         'as stated in the React Server Component tutorial. ' +
-        'Ensure to use "stream_react_component" instead of "react_component" to SSR a server component.',
+        'Make sure to use "stream_react_component" instead of "react_component" to SSR a server component.',
     );
   }
 
   if (typeof generateRSCPayload !== 'function') {
     throw new Error(
       'generateRSCPayload is not defined. Please ensure that you are using at least version 4.0.0 of ' +
-        'React on Rails Pro and the node renderer, and that ReactOnRailsPro.configuration.enable_rsc_support ' +
+        'React on Rails Pro and the Node renderer, and that ReactOnRailsPro.configuration.enable_rsc_support ' +
         'is set to true.',
     );
   }

From d6628ac9c34391893e99c0998b85d8a6da7ea06a Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Wed, 9 Apr 2025 12:05:10 +0200
Subject: [PATCH 25/31] convert createElement calls to jsx

---
 eslint.config.ts                              |  9 +++-
 ...adContainer.ts => RSCPayloadContainer.tsx} | 42 +++++++++----------
 .../{RSCServerRoot.ts => RSCServerRoot.tsx}   | 14 +++----
 3 files changed, 35 insertions(+), 30 deletions(-)
 rename node_package/src/{RSCPayloadContainer.ts => RSCPayloadContainer.tsx} (77%)
 rename node_package/src/{RSCServerRoot.ts => RSCServerRoot.tsx} (92%)

diff --git a/eslint.config.ts b/eslint.config.ts
index a0ccf807c..6d64fd073 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -75,7 +75,7 @@ const config = tsEslint.config([
         alias: [['Assets', './spec/dummy/client/app/assets']],
 
         node: {
-          extensions: ['.js', '.jsx', '.ts', '.d.ts'],
+          extensions: ['.js', '.jsx', '.ts', '.tsx', '.d.ts'],
         },
       },
     },
@@ -100,6 +100,7 @@ const config = tsEslint.config([
           js: 'never',
           jsx: 'never',
           ts: 'never',
+          tsx: 'never',
         },
       ],
 
@@ -132,6 +133,12 @@ const config = tsEslint.config([
       'react/jsx-props-no-spreading': 'off',
       'react/static-property-placement': 'off',
       'jsx-a11y/anchor-is-valid': 'off',
+      'react/jsx-filename-extension': [
+        'error',
+        {
+          extensions: ['.jsx', '.tsx'],
+        },
+      ],
     },
   },
   {
diff --git a/node_package/src/RSCPayloadContainer.ts b/node_package/src/RSCPayloadContainer.tsx
similarity index 77%
rename from node_package/src/RSCPayloadContainer.ts
rename to node_package/src/RSCPayloadContainer.tsx
index 7aa64224d..7d08333de 100644
--- a/node_package/src/RSCPayloadContainer.ts
+++ b/node_package/src/RSCPayloadContainer.tsx
@@ -44,28 +44,28 @@ const RSCPayloadContainer = ({
   const chunkPromise = getChunkPromise(chunkIndex);
   const chunk = React.use(chunkPromise);
 
-  const scriptElement = React.createElement('script', {
-    dangerouslySetInnerHTML: {
-      // Ensure the array is never reassigned.
-      // Even at the RSCClientRoot component, the array is assigned
-      // only if it's not already assigned by this script.
-      __html: escapeScript(`(self.REACT_ON_RAILS_RSC_PAYLOAD||=[]).push(${chunk.chunk})`),
-    },
-    key: `script-${chunkIndex}`,
-  });
+  const scriptElement = (
+    <script
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{
+        __html: escapeScript(`(self.REACT_ON_RAILS_RSC_PAYLOAD||=[]).push(${chunk.chunk})`),
+      }}
+      key={`script-${chunkIndex}`}
+    />
+  );
 
   if (chunk.isLastChunk) {
     return scriptElement;
   }
 
-  return React.createElement(React.Fragment, null, [
-    scriptElement,
-    React.createElement(
-      React.Suspense,
-      { fallback: null, key: `suspense-${chunkIndex}` },
-      React.createElement(RSCPayloadContainer, { chunkIndex: chunkIndex + 1, getChunkPromise }),
-    ),
-  ]);
+  return (
+    <>
+      {scriptElement}
+      <React.Suspense fallback={null} key={`suspense-${chunkIndex}`}>
+        <RSCPayloadContainer chunkIndex={chunkIndex + 1} getChunkPromise={getChunkPromise} />
+      </React.Suspense>
+    </>
+  );
 };
 
 export default function RSCPayloadContainerWrapper({ RSCPayloadStream }: RSCPayloadContainerProps) {
@@ -113,9 +113,9 @@ export default function RSCPayloadContainerWrapper({ RSCPayloadStream }: RSCPayl
     [chunkPromises],
   );
 
-  return React.createElement(
-    React.Suspense,
-    { fallback: null },
-    React.createElement(RSCPayloadContainer, { chunkIndex: 0, getChunkPromise }),
+  return (
+    <React.Suspense fallback={null}>
+      <RSCPayloadContainer chunkIndex={0} getChunkPromise={getChunkPromise} />
+    </React.Suspense>
   );
 }
diff --git a/node_package/src/RSCServerRoot.ts b/node_package/src/RSCServerRoot.tsx
similarity index 92%
rename from node_package/src/RSCServerRoot.ts
rename to node_package/src/RSCServerRoot.tsx
index 6db41cc4c..d361ad104 100644
--- a/node_package/src/RSCServerRoot.ts
+++ b/node_package/src/RSCServerRoot.tsx
@@ -104,14 +104,12 @@ const RSCServerRoot: RenderFunction = async (
   rscPayloadStream.pipe(rscPayloadStream2);
   const serverComponentElement = createFromReactOnRailsNodeStream(rscPayloadStream1, ssrManifest);
 
-  return () =>
-    React.createElement(React.Fragment, null, [
-      React.createElement(React.Fragment, { key: 'serverComponentElement' }, use(serverComponentElement)),
-      React.createElement(RSCPayloadContainer, {
-        RSCPayloadStream: rscPayloadStream2,
-        key: 'rscPayloadContainer',
-      }),
-    ]);
+  return () => (
+    <>
+      <React.Fragment key="serverComponentElement">{use(serverComponentElement)}</React.Fragment>
+      <RSCPayloadContainer RSCPayloadStream={rscPayloadStream2} key="rscPayloadContainer" />
+    </>
+  );
 };
 
 export default RSCServerRoot;

From daa641ef3c8906d46717eb37369a86224b4c348c Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Wed, 9 Apr 2025 12:20:20 +0200
Subject: [PATCH 26/31] rename transformRSCNodeStreamAndReplayConsoleLogs to
 transformRSCNodeStream

---
 node_package/src/RSCServerRoot.tsx                              | 2 +-
 ...eStreamAndReplayConsoleLogs.ts => transformRSCNodeStream.ts} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename node_package/src/{transformRSCNodeStreamAndReplayConsoleLogs.ts => transformRSCNodeStream.ts} (100%)

diff --git a/node_package/src/RSCServerRoot.tsx b/node_package/src/RSCServerRoot.tsx
index d361ad104..608cc16ec 100644
--- a/node_package/src/RSCServerRoot.tsx
+++ b/node_package/src/RSCServerRoot.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { createFromNodeStream } from 'react-on-rails-rsc/client.node';
 import { PassThrough } from 'stream';
 import type { RenderFunction, RailsContext } from './types';
-import transformRSCStream from './transformRSCNodeStreamAndReplayConsoleLogs';
+import transformRSCStream from './transformRSCNodeStream';
 import loadJsonFile from './loadJsonFile';
 import RSCPayloadContainer from './RSCPayloadContainer';
 
diff --git a/node_package/src/transformRSCNodeStreamAndReplayConsoleLogs.ts b/node_package/src/transformRSCNodeStream.ts
similarity index 100%
rename from node_package/src/transformRSCNodeStreamAndReplayConsoleLogs.ts
rename to node_package/src/transformRSCNodeStream.ts

From 58cd6e782faaf4d35d6a84d176b5cb386884ec0a Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Wed, 9 Apr 2025 15:04:02 +0200
Subject: [PATCH 27/31] Enhance RSCPayloadContainer documentation on escape
 sequences and modify chunk index validation in RSCServerRoot for improved
 error handling.

---
 node_package/src/RSCPayloadContainer.tsx | 10 +++++++++-
 node_package/src/RSCServerRoot.tsx       | 15 +++++++++------
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/node_package/src/RSCPayloadContainer.tsx b/node_package/src/RSCPayloadContainer.tsx
index 7d08333de..17f4c8ec3 100644
--- a/node_package/src/RSCPayloadContainer.tsx
+++ b/node_package/src/RSCPayloadContainer.tsx
@@ -14,6 +14,14 @@ type RSCPayloadContainerInnerProps = {
   getChunkPromise: (chunkIndex: number) => Promise<StreamChunk>;
 };
 
+// In JavaScript, when an escape sequence with a backslash (\) is followed by a character
+// that isn't a recognized escape character, the backslash is ignored, and the character
+// is treated as-is.
+// This behavior allows us to use the backslash to escape characters that might be
+// interpreted as HTML tags, preventing them from being processed by the HTML parser.
+// For example, we can escape the comment tag <!-- as <\!-- and the script tag </script>
+// as <\/script>.
+// This ensures that these tags are not prematurely closed or misinterpreted by the browser.
 function escapeScript(script: string) {
   return script.replace(/<!--/g, '<\\!--').replace(/<\/(script)/gi, '</\\$1');
 }
@@ -104,7 +112,7 @@ export default function RSCPayloadContainerWrapper({ RSCPayloadStream }: RSCPayl
 
   const getChunkPromise = React.useCallback(
     (chunkIndex: number) => {
-      if (chunkIndex > chunkPromises.length) {
+      if (chunkIndex >= chunkPromises.length) {
         throw new Error('React on Rails Error: RSC Chunk index out of bounds');
       }
 
diff --git a/node_package/src/RSCServerRoot.tsx b/node_package/src/RSCServerRoot.tsx
index 608cc16ec..45c53b7db 100644
--- a/node_package/src/RSCServerRoot.tsx
+++ b/node_package/src/RSCServerRoot.tsx
@@ -104,12 +104,15 @@ const RSCServerRoot: RenderFunction = async (
   rscPayloadStream.pipe(rscPayloadStream2);
   const serverComponentElement = createFromReactOnRailsNodeStream(rscPayloadStream1, ssrManifest);
 
-  return () => (
-    <>
-      <React.Fragment key="serverComponentElement">{use(serverComponentElement)}</React.Fragment>
-      <RSCPayloadContainer RSCPayloadStream={rscPayloadStream2} key="rscPayloadContainer" />
-    </>
-  );
+  return () => {
+    const resolvedServerComponent = use(serverComponentElement);
+    return (
+      <>
+        <React.Fragment key="serverComponentElement">{resolvedServerComponent}</React.Fragment>
+        <RSCPayloadContainer RSCPayloadStream={rscPayloadStream2} key="rscPayloadContainer" />
+      </>
+    );
+  };
 };
 
 export default RSCServerRoot;

From bf50f57ede8635c95b291c2ca018425700746f89 Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Thu, 10 Apr 2025 12:04:43 +0200
Subject: [PATCH 28/31] refactoring

---
 lib/react_on_rails/configuration.rb | 12 +++++----
 node_package/src/RSCClientRoot.ts   |  9 +++----
 node_package/src/RSCServerRoot.tsx  | 38 ++++++++++++++---------------
 node_package/src/reactApis.cts      |  9 +++++++
 4 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/lib/react_on_rails/configuration.rb b/lib/react_on_rails/configuration.rb
index 0a1b5ee6b..d033b7645 100644
--- a/lib/react_on_rails/configuration.rb
+++ b/lib/react_on_rails/configuration.rb
@@ -305,11 +305,13 @@ 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?
-      files << rsc_bundle_js_file if rsc_bundle_js_file.present?
-      files << react_client_manifest_file if react_client_manifest_file.present?
-      files << react_server_client_manifest_file if react_server_client_manifest_file.present?
+      self.webpack_generated_files = [
+        "manifest.json",
+        server_bundle_js_file,
+        rsc_bundle_js_file,
+        react_client_manifest_file,
+        react_server_client_manifest_file
+      ].compact_blank
 
       self.webpack_generated_files = files
     end
diff --git a/node_package/src/RSCClientRoot.ts b/node_package/src/RSCClientRoot.ts
index 33a97b405..08b5c2fad 100644
--- a/node_package/src/RSCClientRoot.ts
+++ b/node_package/src/RSCClientRoot.ts
@@ -6,16 +6,13 @@ import { createFromReadableStream } from 'react-on-rails-rsc/client';
 import { fetch } from './utils.ts';
 import transformRSCStreamAndReplayConsoleLogs from './transformRSCStreamAndReplayConsoleLogs.ts';
 import { RailsContext, RenderFunction, RSCPayloadChunk } from './types/index.ts';
+import { ensureReactUseAvailable } from './reactApis.cts';
 
-const { use } = React;
-
-if (typeof use !== 'function') {
-  throw new Error('React.use is not defined. Please ensure you are using React 19 to use server components.');
-}
+ensureReactUseAvailable();
 
 declare global {
   interface Window {
-    REACT_ON_RAILS_RSC_PAYLOAD: RSCPayloadChunk[];
+    REACT_ON_RAILS_RSC_PAYLOAD?: RSCPayloadChunk[];
   }
 }
 
diff --git a/node_package/src/RSCServerRoot.tsx b/node_package/src/RSCServerRoot.tsx
index 45c53b7db..b143e2d68 100644
--- a/node_package/src/RSCServerRoot.tsx
+++ b/node_package/src/RSCServerRoot.tsx
@@ -1,10 +1,13 @@
 import * as React from 'react';
 import { createFromNodeStream } from 'react-on-rails-rsc/client.node';
 import { PassThrough } from 'stream';
-import type { RenderFunction, RailsContext } from './types';
-import transformRSCStream from './transformRSCNodeStream';
-import loadJsonFile from './loadJsonFile';
-import RSCPayloadContainer from './RSCPayloadContainer';
+import type { RenderFunction, RailsContext } from './types/index.ts';
+import transformRSCStream from './transformRSCNodeStream.ts';
+import loadJsonFile from './loadJsonFile.ts';
+import RSCPayloadContainer from './RSCPayloadContainer.tsx';
+import { ensureReactUseAvailable } from './reactApis.cts';
+
+ensureReactUseAvailable();
 
 declare global {
   function generateRSCPayload(
@@ -19,12 +22,6 @@ type RSCServerRootProps = {
   componentProps: Record<string, unknown>;
 };
 
-if (!('use' in React && typeof React.use === 'function')) {
-  throw new Error(
-    'React.use is not defined. Please ensure you are using React 18 with experimental features enabled or React 19+ to use server components.',
-  );
-}
-
 const { use } = React;
 
 const createFromReactOnRailsNodeStream = (
@@ -40,24 +37,25 @@ const createSSRManifest = async (
   reactClientManifestFileName: string,
 ) => {
   const [reactServerManifest, reactClientManifest] = await Promise.all([
-    loadJsonFile(reactServerManifestFileName),
-    loadJsonFile(reactClientManifestFileName),
+    loadJsonFile(reactServerManifestFileName) as Promise<Record<string, { id: string; chunks: string[] }>>,
+    loadJsonFile(reactClientManifestFileName) as Promise<Record<string, { id: string }>>,
   ]);
 
   const ssrManifest = {
-    moduleLoading: {
-      prefix: '/webpack/development/',
-      crossOrigin: null,
-    },
+    // The `moduleLoading` property is utilized by the React runtime to load JavaScript modules.
+    // It can accept options such as `prefix` and `crossOrigin` to specify the path and crossorigin attribute for the modules.
+    // In our case, since the server code is bundled into a single bundle, there is no need to load additional JavaScript modules.
+    // As a result, we set this property to an empty object because it will not be used.
+    moduleLoading: {},
     moduleMap: {} as Record<string, unknown>,
   };
 
   Object.entries(reactClientManifest).forEach(([aboluteFileUrl, clientFileBundlingInfo]) => {
-    const serverFileBundlingInfo = reactServerManifest[aboluteFileUrl];
-    ssrManifest.moduleMap[(clientFileBundlingInfo as { id: string }).id] = {
+    const { id, chunks } = reactServerManifest[aboluteFileUrl];
+    ssrManifest.moduleMap[clientFileBundlingInfo.id] = {
       '*': {
-        id: (serverFileBundlingInfo as { id: string }).id,
-        chunks: (serverFileBundlingInfo as { chunks: string[] }).chunks,
+        id,
+        chunks,
         name: '*',
       },
     };
diff --git a/node_package/src/reactApis.cts b/node_package/src/reactApis.cts
index 45d6cc9a6..d4a258b12 100644
--- a/node_package/src/reactApis.cts
+++ b/node_package/src/reactApis.cts
@@ -1,4 +1,5 @@
 /* eslint-disable global-require,@typescript-eslint/no-require-imports */
+import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import type { ReactElement } from 'react';
 import type { RenderReturnType } from './types/index.ts' with { 'resolution-mode': 'import' };
@@ -50,3 +51,11 @@ export const unmountComponentAtNode: typeof ReactDOM.unmountComponentAtNode = su
   ? // not used if we use root API
     () => false
   : ReactDOM.unmountComponentAtNode;
+
+export const ensureReactUseAvailable = () => {
+  if (!('use' in React) || typeof React.use !== 'function') {
+    throw new Error(
+      'React.use is not defined. Please ensure you are using React 19 to use server components.',
+    );
+  }
+};

From 33cc3d3a27c0038e4bf9cf85f0ff6cc6dcce3c5f Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Thu, 10 Apr 2025 16:26:21 +0200
Subject: [PATCH 29/31] remove unnecessary keys and streamline component
 rendering, enhancing code clarity and maintainability.

---
 node_package/src/RSCPayloadContainer.tsx |  3 +--
 node_package/src/RSCServerRoot.tsx       | 25 ++++++++++++------------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/node_package/src/RSCPayloadContainer.tsx b/node_package/src/RSCPayloadContainer.tsx
index 17f4c8ec3..d1c58fe29 100644
--- a/node_package/src/RSCPayloadContainer.tsx
+++ b/node_package/src/RSCPayloadContainer.tsx
@@ -58,7 +58,6 @@ const RSCPayloadContainer = ({
       dangerouslySetInnerHTML={{
         __html: escapeScript(`(self.REACT_ON_RAILS_RSC_PAYLOAD||=[]).push(${chunk.chunk})`),
       }}
-      key={`script-${chunkIndex}`}
     />
   );
 
@@ -69,7 +68,7 @@ const RSCPayloadContainer = ({
   return (
     <>
       {scriptElement}
-      <React.Suspense fallback={null} key={`suspense-${chunkIndex}`}>
+      <React.Suspense fallback={null}>
         <RSCPayloadContainer chunkIndex={chunkIndex + 1} getChunkPromise={getChunkPromise} />
       </React.Suspense>
     </>
diff --git a/node_package/src/RSCServerRoot.tsx b/node_package/src/RSCServerRoot.tsx
index b143e2d68..39ecb2389 100644
--- a/node_package/src/RSCServerRoot.tsx
+++ b/node_package/src/RSCServerRoot.tsx
@@ -41,18 +41,10 @@ const createSSRManifest = async (
     loadJsonFile(reactClientManifestFileName) as Promise<Record<string, { id: string }>>,
   ]);
 
-  const ssrManifest = {
-    // The `moduleLoading` property is utilized by the React runtime to load JavaScript modules.
-    // It can accept options such as `prefix` and `crossOrigin` to specify the path and crossorigin attribute for the modules.
-    // In our case, since the server code is bundled into a single bundle, there is no need to load additional JavaScript modules.
-    // As a result, we set this property to an empty object because it will not be used.
-    moduleLoading: {},
-    moduleMap: {} as Record<string, unknown>,
-  };
-
+  const moduleMap: Record<string, unknown> = {};
   Object.entries(reactClientManifest).forEach(([aboluteFileUrl, clientFileBundlingInfo]) => {
     const { id, chunks } = reactServerManifest[aboluteFileUrl];
-    ssrManifest.moduleMap[clientFileBundlingInfo.id] = {
+    moduleMap[clientFileBundlingInfo.id] = {
       '*': {
         id,
         chunks,
@@ -61,6 +53,15 @@ const createSSRManifest = async (
     };
   });
 
+  const ssrManifest = {
+    // The `moduleLoading` property is utilized by the React runtime to load JavaScript modules.
+    // It can accept options such as `prefix` and `crossOrigin` to specify the path and crossorigin attribute for the modules.
+    // In our case, since the server code is bundled into a single bundle, there is no need to load additional JavaScript modules.
+    // As a result, we set this property to an empty object because it will not be used.
+    moduleLoading: {},
+    moduleMap,
+  };
+
   return ssrManifest;
 };
 
@@ -106,8 +107,8 @@ const RSCServerRoot: RenderFunction = async (
     const resolvedServerComponent = use(serverComponentElement);
     return (
       <>
-        <React.Fragment key="serverComponentElement">{resolvedServerComponent}</React.Fragment>
-        <RSCPayloadContainer RSCPayloadStream={rscPayloadStream2} key="rscPayloadContainer" />
+        {resolvedServerComponent}
+        <RSCPayloadContainer RSCPayloadStream={rscPayloadStream2} />
       </>
     );
   };

From c919b1d3bb9f8f3ef4e2c44038c41814d5d9fb3f Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Sat, 26 Apr 2025 16:41:08 +0300
Subject: [PATCH 30/31] Update import paths in server.rsc.ts to include file
 extensions for improved clarity and consistency.

---
 node_package/src/registerServerComponent/server.rsc.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/node_package/src/registerServerComponent/server.rsc.ts b/node_package/src/registerServerComponent/server.rsc.ts
index 469ee34bb..694193c44 100644
--- a/node_package/src/registerServerComponent/server.rsc.ts
+++ b/node_package/src/registerServerComponent/server.rsc.ts
@@ -1,5 +1,5 @@
-import ReactOnRails from '../ReactOnRails.client';
-import { ReactComponent, RenderFunction } from '../types';
+import ReactOnRails from '../ReactOnRails.client.ts';
+import { ReactComponent, RenderFunction } from '../types/index.ts';
 
 /**
  * Registers React Server Components (RSC) with React on Rails for the RSC bundle.

From 029c273940c8a48cf5dc8bd599a882a0fcb80b85 Mon Sep 17 00:00:00 2001
From: Abanoub Ghadban <abanoub@shakacode.com>
Date: Sat, 26 Apr 2025 17:19:52 +0300
Subject: [PATCH 31/31] Update import statement in server.ts to use .tsx
 extension for RSCServerRoot

---
 node_package/src/registerServerComponent/server.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/node_package/src/registerServerComponent/server.ts b/node_package/src/registerServerComponent/server.ts
index f532db5e0..d316f89f3 100644
--- a/node_package/src/registerServerComponent/server.ts
+++ b/node_package/src/registerServerComponent/server.ts
@@ -1,5 +1,5 @@
 import ReactOnRails from '../ReactOnRails.client.ts';
-import RSCServerRoot from '../RSCServerRoot.ts';
+import RSCServerRoot from '../RSCServerRoot.tsx';
 import { ReactComponent, RenderFunction, RailsContext } from '../types/index.ts';
 
 /**