diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md
index 9ae346208..dd033382a 100644
--- a/docs/guides/configuration.md
+++ b/docs/guides/configuration.md
@@ -104,6 +104,31 @@ ReactOnRails.configure do |config|
   # you should include a name that matches your bundle name in your Webpack config.
   config.server_bundle_js_file = "server-bundle.js"
 
+  # When using React on Rails Pro with RSC support enabled, these configuration options work together:
+  #
+  # 1. In RORP, set `config.enable_rsc_support = true` in your react_on_rails_pro.rb initializer
+  #
+  # 2. The `rsc_bundle_js_file` (typically "rsc-bundle.js") contains only server components and
+  #    references to client components. It's generated using the RSC Webpack Loader which transforms
+  #    client components into references. This bundle is specifically used for generating RSC payloads
+  #    and is configured with the `react-server` condition.
+  config.rsc_bundle_js_file = "rsc-bundle.js"
+  #
+  # 3. The `react_client_manifest_file` contains mappings for client components that need hydration.
+  #    It's generated by the React Server Components Webpack plugin and is required for client-side
+  #    hydration of components.
+  # This manifest file is automatically generated by the React Server Components Webpack plugin. Only set this if you've configured the plugin to use a different filename.
+  config.react_client_manifest_file = "react-client-manifest.json"
+  #
+  # 4. The `react_server_client_manifest_file` is used during server-side rendering with RSC to
+  #    properly resolve references between server and client components.
+  #
+  # These files are crucial when implementing React Server Components with streaming, which offers
+  # benefits like reduced JavaScript bundle sizes, faster page loading, and selective hydration
+  # of client components.
+  # This manifest file is automatically generated by the React Server Components Webpack plugin. Only set this if you've configured the plugin to use a different filename.
+  config.react_server_client_manifest_file = "react-server-client-manifest.json"
+
   # `prerender` means server-side rendering
   # default is false. This is an option for view helpers `render_component` and `render_component_hash`.
   # Set to true to change the default value to true.
diff --git a/eslint.config.ts b/eslint.config.ts
index 6d64fd073..297e6d703 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -164,9 +164,7 @@ const config = tsEslint.config([
     languageOptions: {
       parserOptions: {
         projectService: {
-          allowDefaultProject: ['eslint.config.ts', 'knip.ts', 'node_package/tests/*.test.ts'],
-          // Needed because `import * as ... from` instead of `import ... from` doesn't work in this file
-          // for some imports.
+          allowDefaultProject: ['eslint.config.ts', 'knip.ts', 'node_package/tests/*.test.{ts,tsx}'],
           defaultProject: 'tsconfig.eslint.json',
         },
       },
diff --git a/knip.ts b/knip.ts
index 6c1b9d67c..7e549e2c1 100644
--- a/knip.ts
+++ b/knip.ts
@@ -7,10 +7,12 @@ const config: KnipConfig = {
       entry: [
         'node_package/src/ReactOnRails.node.ts!',
         'node_package/src/ReactOnRailsRSC.ts!',
-        'node_package/src/registerServerComponent/client.ts!',
-        'node_package/src/registerServerComponent/server.ts!',
+        'node_package/src/registerServerComponent/client.tsx!',
+        'node_package/src/registerServerComponent/server.tsx!',
         'node_package/src/registerServerComponent/server.rsc.ts!',
-        'node_package/src/RSCClientRoot.ts!',
+        'node_package/src/wrapServerComponentRenderer/server.tsx!',
+        'node_package/src/wrapServerComponentRenderer/server.rsc.tsx!',
+        'node_package/src/RSCRoute.ts!',
         'eslint.config.ts',
       ],
       project: ['node_package/src/**/*.[jt]s{x,}!', 'node_package/tests/**/*.[jt]s{x,}'],
diff --git a/lib/react_on_rails/configuration.rb b/lib/react_on_rails/configuration.rb
index d033b7645..347314cc1 100644
--- a/lib/react_on_rails/configuration.rb
+++ b/lib/react_on_rails/configuration.rb
@@ -312,8 +312,6 @@ def ensure_webpack_generated_files_exists
         react_client_manifest_file,
         react_server_client_manifest_file
       ].compact_blank
-
-      self.webpack_generated_files = files
     end
 
     def configure_skip_display_none_deprecation
diff --git a/lib/react_on_rails/helper.rb b/lib/react_on_rails/helper.rb
index 4c8532d31..52844ab6d 100644
--- a/lib/react_on_rails/helper.rb
+++ b/lib/react_on_rails/helper.rb
@@ -651,7 +651,8 @@ def internal_react_component(react_component_name, options = {})
                                                 "data-trace" => (render_options.trace ? true : nil),
                                                 "data-dom-id" => render_options.dom_id,
                                                 "data-store-dependencies" => render_options.store_dependencies&.to_json,
-                                                "data-force-load" => (render_options.force_load ? true : nil))
+                                                "data-force-load" => (render_options.force_load ? true : nil),
+                                                "data-render-request-id" => render_options.render_request_id)
 
       if render_options.force_load
         component_specification_tag.concat(
diff --git a/lib/react_on_rails/packs_generator.rb b/lib/react_on_rails/packs_generator.rb
index ae4169162..883c860a5 100644
--- a/lib/react_on_rails/packs_generator.rb
+++ b/lib/react_on_rails/packs_generator.rb
@@ -93,14 +93,10 @@ def pack_file_contents(file_path)
                                ReactOnRailsPro.configuration.enable_rsc_support
 
       if load_server_components && !client_entrypoint?(file_path)
-        rsc_payload_generation_url_path = ReactOnRailsPro.configuration.rsc_payload_generation_url_path
-
         return <<~FILE_CONTENT.strip
           import registerServerComponent from 'react-on-rails/registerServerComponent/client';
 
-          registerServerComponent({
-            rscPayloadGenerationUrlPath: "#{rsc_payload_generation_url_path}",
-          }, "#{registered_component_name}")
+          registerServerComponent("#{registered_component_name}");
         FILE_CONTENT
       end
 
diff --git a/lib/react_on_rails/react_component/render_options.rb b/lib/react_on_rails/react_component/render_options.rb
index 9cf334257..29bfbb7c7 100644
--- a/lib/react_on_rails/react_component/render_options.rb
+++ b/lib/react_on_rails/react_component/render_options.rb
@@ -15,9 +15,16 @@ class RenderOptions
       def initialize(react_component_name: required("react_component_name"), options: required("options"))
         @react_component_name = react_component_name.camelize
         @options = options
+        # The render_request_id serves as a unique identifier for each render request.
+        # We cannot rely solely on dom_id, as it should be unique for each component on the page,
+        # but the server can render the same page multiple times concurrently for different users.
+        # Therefore, we need an additional unique identifier that can be used both on the client and server.
+        # This ID can also be used to associate specific data with a particular rendered component
+        # on either the server or client.
+        @render_request_id = self.class.generate_request_id
       end
 
-      attr_reader :react_component_name
+      attr_reader :react_component_name, :render_request_id
 
       def throw_js_errors
         options.fetch(:throw_js_errors, false)
@@ -139,6 +146,10 @@ def store_dependencies
         options[:store_dependencies]
       end
 
+      def self.generate_request_id
+        SecureRandom.uuid
+      end
+
       private
 
       attr_reader :options
diff --git a/lib/react_on_rails/server_rendering_js_code.rb b/lib/react_on_rails/server_rendering_js_code.rb
index dc807b7a2..cd0b8b677 100644
--- a/lib/react_on_rails/server_rendering_js_code.rb
+++ b/lib/react_on_rails/server_rendering_js_code.rb
@@ -38,6 +38,7 @@ def render(props_string, rails_context, redux_stores, react_component_name, rend
         <<-JS
         (function() {
           var railsContext = #{rails_context};
+          railsContext.componentSpecificMetadata = {renderRequestId: '#{render_options.render_request_id}'};
         #{redux_stores}
           var props = #{props_string};
           return ReactOnRails.serverRenderReactComponent({
diff --git a/lib/react_on_rails/utils.rb b/lib/react_on_rails/utils.rb
index 5e50d4478..3645daaba 100644
--- a/lib/react_on_rails/utils.rb
+++ b/lib/react_on_rails/utils.rb
@@ -128,6 +128,11 @@ 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_client_manifest_file
+      if asset_name.nil?
+        raise ReactOnRails::Error,
+              "react_server_client_manifest_file is nil, ensure to set it in your configuration"
+      end
+
       @react_server_manifest_path = File.join(generated_assets_full_path, asset_name)
     end
 
diff --git a/node_package/src/ClientSideRenderer.ts b/node_package/src/ClientSideRenderer.ts
index b4978c598..e1b5239dd 100644
--- a/node_package/src/ClientSideRenderer.ts
+++ b/node_package/src/ClientSideRenderer.ts
@@ -83,6 +83,18 @@ class ComponentRenderer {
     const { domNodeId } = this;
     const props = el.textContent !== null ? (JSON.parse(el.textContent) as Record<string, unknown>) : {};
     const trace = el.getAttribute('data-trace') === 'true';
+    const renderRequestId = el.getAttribute('data-render-request-id');
+
+    if (!renderRequestId) {
+      console.error(`renderRequestId is missing for ${name} in dom node with id: ${domNodeId}`);
+    }
+
+    const componentSpecificRailsContext = {
+      ...railsContext,
+      componentSpecificMetadata: {
+        renderRequestId: renderRequestId || '',
+      },
+    };
 
     try {
       const domNode = document.getElementById(domNodeId);
@@ -93,7 +105,7 @@ class ComponentRenderer {
         }
 
         if (
-          (await delegateToRenderer(componentObj, props, railsContext, domNodeId, trace)) ||
+          (await delegateToRenderer(componentObj, props, componentSpecificRailsContext, domNodeId, trace)) ||
           // @ts-expect-error The state can change while awaiting delegateToRenderer
           this.state === 'unmounted'
         ) {
@@ -108,7 +120,7 @@ class ComponentRenderer {
           props,
           domNodeId,
           trace,
-          railsContext,
+          railsContext: componentSpecificRailsContext,
           shouldHydrate,
         });
 
diff --git a/node_package/src/RSCClientRoot.ts b/node_package/src/RSCClientRoot.ts
deleted file mode 100644
index 08b5c2fad..000000000
--- a/node_package/src/RSCClientRoot.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-'use client';
-
-import * as React from 'react';
-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, RSCPayloadChunk } from './types/index.ts';
-import { ensureReactUseAvailable } from './reactApis.cts';
-
-ensureReactUseAvailable();
-
-declare global {
-  interface Window {
-    REACT_ON_RAILS_RSC_PAYLOAD?: RSCPayloadChunk[];
-  }
-}
-
-export type RSCClientRootProps = {
-  componentName: string;
-  rscPayloadGenerationUrlPath: string;
-  componentProps?: unknown;
-};
-
-const createFromFetch = async (fetchPromise: Promise<Response>) => {
-  const response = await fetchPromise;
-  const stream = response.body;
-  if (!stream) {
-    throw new Error('No stream found in response');
-  }
-  const transformedStream = transformRSCStreamAndReplayConsoleLogs(stream);
-  return createFromReadableStream<React.ReactNode>(transformedStream);
-};
-
-const fetchRSC = ({ componentName, rscPayloadGenerationUrlPath, componentProps }: RSCClientRootProps) => {
-  const propsString = JSON.stringify(componentProps);
-  const strippedUrlPath = rscPayloadGenerationUrlPath.replace(/^\/|\/$/g, '');
-  return createFromFetch(fetch(`/${strippedUrlPath}/${componentName}?props=${propsString}`));
-};
-
-const createRSCStreamFromPage = () => {
-  let streamController: ReadableStreamController<RSCPayloadChunk> | undefined;
-  const stream = new ReadableStream<RSCPayloadChunk>({
-    start(controller) {
-      if (typeof window === 'undefined') {
-        return;
-      }
-      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) => {
-        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.
- *
- * This component:
- * 1. Fetches RSC payloads from the server using the provided URL path
- * 2. Caches the responses to prevent duplicate requests
- * 3. Transforms the response stream to replay server-side console logs
- * 4. Uses React.use() to handle the async data fetching
- *
- * @requires React 19+
- * @requires react-on-rails-rsc
- */
-const RSCClientRoot: RenderFunction = async (
-  { componentName, rscPayloadGenerationUrlPath, componentProps }: RSCClientRootProps,
-  _railsContext?: RailsContext,
-  domNodeId?: string,
-) => {
-  if (!domNodeId) {
-    throw new Error('RSCClientRoot: No domNodeId provided');
-  }
-  const domNode = document.getElementById(domNodeId);
-  if (!domNode) {
-    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
-  // However, the returned value of renderFunction is not used in ReactOnRails
-  // TODO: fix this behavior
-  return '';
-};
-
-export default RSCClientRoot;
diff --git a/node_package/src/RSCPayloadContainer.tsx b/node_package/src/RSCPayloadContainer.tsx
deleted file mode 100644
index d1c58fe29..000000000
--- a/node_package/src/RSCPayloadContainer.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-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>;
-};
-
-// 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');
-}
-
-/**
- * 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,
-}: RSCPayloadContainerInnerProps): React.ReactNode => {
-  const chunkPromise = getChunkPromise(chunkIndex);
-  const chunk = React.use(chunkPromise);
-
-  const scriptElement = (
-    <script
-      // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML={{
-        __html: escapeScript(`(self.REACT_ON_RAILS_RSC_PAYLOAD||=[]).push(${chunk.chunk})`),
-      }}
-    />
-  );
-
-  if (chunk.isLastChunk) {
-    return scriptElement;
-  }
-
-  return (
-    <>
-      {scriptElement}
-      <React.Suspense fallback={null}>
-        <RSCPayloadContainer chunkIndex={chunkIndex + 1} getChunkPromise={getChunkPromise} />
-      </React.Suspense>
-    </>
-  );
-};
-
-export default function RSCPayloadContainerWrapper({ RSCPayloadStream }: RSCPayloadContainerProps) {
-  const [chunkPromises] = React.useState<Promise<StreamChunk>[]>(() => {
-    const promises: Promise<StreamChunk>[] = [];
-    let resolveCurrentPromise: (streamChunk: StreamChunk) => void = () => {};
-    let rejectCurrentPromise: (error: unknown) => 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 as Uint8Array), 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.Suspense fallback={null}>
-      <RSCPayloadContainer chunkIndex={0} getChunkPromise={getChunkPromise} />
-    </React.Suspense>
-  );
-}
diff --git a/node_package/src/RSCPayloadGenerator.ts b/node_package/src/RSCPayloadGenerator.ts
new file mode 100644
index 000000000..0b7d17983
--- /dev/null
+++ b/node_package/src/RSCPayloadGenerator.ts
@@ -0,0 +1,103 @@
+import { PassThrough } from 'stream';
+import { RailsContext, RSCPayloadStreamInfo, RSCPayloadCallback } from './types/index.ts';
+
+declare global {
+  function generateRSCPayload(
+    componentName: string,
+    props: unknown,
+    railsContext: RailsContext,
+  ): Promise<NodeJS.ReadableStream>;
+}
+
+const mapRailsContextToRSCPayloadStreams = new Map<RailsContext, RSCPayloadStreamInfo[]>();
+
+const rscPayloadCallbacks = new Map<RailsContext, Array<RSCPayloadCallback>>();
+
+/**
+ * Registers a callback to be executed when RSC payloads are generated.
+ *
+ * This function:
+ * 1. Stores the callback function by railsContext
+ * 2. Immediately executes the callback for any existing streams
+ *
+ * This synchronous execution is critical for preventing hydration race conditions.
+ * It ensures payload array initialization happens before component HTML appears
+ * in the response stream.
+ *
+ * @param railsContext - Context for the current request
+ * @param callback - Function to call when an RSC payload is generated
+ */
+export const onRSCPayloadGenerated = (railsContext: RailsContext, callback: RSCPayloadCallback) => {
+  const callbacks = rscPayloadCallbacks.get(railsContext) || [];
+  callbacks.push(callback);
+  rscPayloadCallbacks.set(railsContext, callbacks);
+
+  // Call callback for any existing streams for this context
+  const existingStreams = mapRailsContextToRSCPayloadStreams.get(railsContext) || [];
+  existingStreams.forEach((streamInfo) => callback(streamInfo));
+};
+
+/**
+ * Generates and tracks RSC payloads for server components.
+ *
+ * getRSCPayloadStream:
+ * 1. Calls the global generateRSCPayload function
+ * 2. Tracks streams by railsContext for later injection
+ * 3. Notifies callbacks immediately to enable early payload embedding
+ *
+ * The immediate callback notification is critical for preventing hydration race conditions,
+ * as it ensures the payload array is initialized in the HTML stream before component rendering.
+ *
+ * @param componentName - Name of the server component
+ * @param props - Props for the server component
+ * @param railsContext - Context for the current request
+ * @returns A stream of the RSC payload
+ */
+export const getRSCPayloadStream = async (
+  componentName: string,
+  props: unknown,
+  railsContext: RailsContext,
+): Promise<NodeJS.ReadableStream> => {
+  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 stream = await generateRSCPayload(componentName, props, railsContext);
+  const streams = mapRailsContextToRSCPayloadStreams.get(railsContext) ?? [];
+  const stream1 = new PassThrough();
+  stream.pipe(stream1);
+  const stream2 = new PassThrough();
+  stream1.pipe(stream2);
+
+  const streamInfo: RSCPayloadStreamInfo = {
+    componentName,
+    props,
+    stream: stream2,
+  };
+  streams.push(streamInfo);
+  mapRailsContextToRSCPayloadStreams.set(railsContext, streams);
+
+  // Notify callbacks about the new stream in a sync manner to maintain proper hydration timing
+  // as described in the comment above onRSCPayloadGenerated
+  const callbacks = rscPayloadCallbacks.get(railsContext) || [];
+  callbacks.forEach((callback) => callback(streamInfo));
+
+  return stream1;
+};
+
+export const getRSCPayloadStreams = (
+  railsContext: RailsContext,
+): {
+  componentName: string;
+  props: unknown;
+  stream: NodeJS.ReadableStream;
+}[] => mapRailsContextToRSCPayloadStreams.get(railsContext) ?? [];
+
+export const clearRSCPayloadStreams = (railsContext: RailsContext) => {
+  mapRailsContextToRSCPayloadStreams.delete(railsContext);
+  rscPayloadCallbacks.delete(railsContext);
+};
diff --git a/node_package/src/RSCProvider.tsx b/node_package/src/RSCProvider.tsx
new file mode 100644
index 000000000..2e9bff34e
--- /dev/null
+++ b/node_package/src/RSCProvider.tsx
@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { RailsContext } from './types/index.ts';
+import getReactServerComponent from './getReactServerComponent.client.ts';
+
+type RSCContextType = {
+  getCachedComponent: (componentName: string, componentProps: unknown) => React.ReactNode;
+
+  getComponent: (componentName: string, componentProps: unknown) => Promise<React.ReactNode>;
+};
+
+const RSCContext = React.createContext<RSCContextType | undefined>(undefined);
+
+/**
+ * Creates a provider context for React Server Components.
+ *
+ * RSCProvider is a foundational component that:
+ * 1. Provides caching for server components to prevent redundant requests
+ * 2. Manages the fetching of server components through getComponent
+ * 3. Offers environment-agnostic access to server components
+ *
+ * This factory function accepts an environment-specific getServerComponent implementation,
+ * allowing it to work correctly in both client and server environments.
+ *
+ * @param railsContext - Context for the current request
+ * @param getServerComponent - Environment-specific function for fetching server components
+ * @returns A provider component that wraps children with RSC context
+ *
+ * @important This is an internal function. End users should not use this directly.
+ * Instead, use wrapServerComponentRenderer from 'react-on-rails/wrapServerComponentRenderer/client'
+ * for client-side rendering or 'react-on-rails/wrapServerComponentRenderer/server' for server-side rendering.
+ */
+export const createRSCProvider = ({
+  railsContext,
+  getServerComponent,
+}: {
+  railsContext: RailsContext;
+  getServerComponent: typeof getReactServerComponent;
+}) => {
+  const cachedComponents: Record<string, React.ReactNode> = {};
+  const fetchRSCPromises: Record<string, Promise<React.ReactNode>> = {};
+
+  const generateCacheKey = (componentName: string, componentProps: unknown) => {
+    return `${componentName}-${JSON.stringify(componentProps)}-${railsContext.componentSpecificMetadata?.renderRequestId}`;
+  };
+
+  const getCachedComponent = (componentName: string, componentProps: unknown) => {
+    const key = generateCacheKey(componentName, componentProps);
+    return cachedComponents[key];
+  };
+
+  const getComponent = async (componentName: string, componentProps: unknown) => {
+    const cachedComponent = getCachedComponent(componentName, componentProps);
+    if (cachedComponent) {
+      return cachedComponent;
+    }
+    const key = generateCacheKey(componentName, componentProps);
+    if (key in fetchRSCPromises) {
+      return fetchRSCPromises[key];
+    }
+
+    const promise = getServerComponent({ componentName, componentProps, railsContext }).then((rsc) => {
+      cachedComponents[key] = rsc;
+      return rsc;
+    });
+    fetchRSCPromises[key] = promise;
+    return promise;
+  };
+
+  return ({ children }: { children: React.ReactNode }) => {
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    return <RSCContext.Provider value={{ getCachedComponent, getComponent }}>{children}</RSCContext.Provider>;
+  };
+};
+
+/**
+ * Hook to access the RSC context within client components.
+ *
+ * This hook provides access to:
+ * - getCachedComponent: For retrieving already rendered server components
+ * - getComponent: For fetching and rendering server components
+ *
+ * It must be used within a component wrapped by RSCProvider (typically done
+ * automatically by wrapServerComponentRenderer).
+ *
+ * @returns The RSC context containing methods for working with server components
+ * @throws Error if used outside of an RSCProvider
+ *
+ * @example
+ * ```tsx
+ * const { getComponent } = useRSC();
+ * const serverComponent = React.use(getComponent('MyServerComponent', props));
+ * ```
+ */
+export const useRSC = () => {
+  const context = React.useContext(RSCContext);
+  if (!context) {
+    throw new Error('useRSC must be used within a RSCProvider');
+  }
+  return context;
+};
diff --git a/node_package/src/RSCRoute.ts b/node_package/src/RSCRoute.ts
new file mode 100644
index 000000000..c82328f2b
--- /dev/null
+++ b/node_package/src/RSCRoute.ts
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { useRSC } from './RSCProvider.tsx';
+
+/**
+ * Renders a React Server Component inside a React Client Component.
+ *
+ * RSCRoute provides a bridge between client and server components, allowing server components
+ * to be directly rendered inside client components. This component:
+ *
+ * 1. During initial SSR - Uses the RSC payload to render the server component and embeds the payload in the page
+ * 2. During hydration - Uses the embedded RSC payload already in the page
+ * 3. During client navigation - Fetches the RSC payload via HTTP
+ *
+ * @example
+ * ```tsx
+ * <RSCRoute componentName="MyServerComponent" componentProps={{ user }} />
+ * ```
+ *
+ * @important Only use for server components whose props change rarely. Frequent prop changes
+ * will cause network requests for each change, impacting performance.
+ *
+ * @important This component expects that the component tree that contains it is wrapped using
+ * wrapServerComponentRenderer from 'react-on-rails/wrapServerComponentRenderer/client' for client-side
+ * rendering or 'react-on-rails/wrapServerComponentRenderer/server' for server-side rendering.
+ */
+export type RSCRouteProps = {
+  componentName: string;
+  componentProps: unknown;
+};
+
+const RSCRoute = ({ componentName, componentProps }: RSCRouteProps) => {
+  const { getComponent, getCachedComponent } = useRSC();
+  let component = getCachedComponent(componentName, componentProps);
+  if (!component) {
+    component = React.use(getComponent(componentName, componentProps));
+  }
+  return component;
+};
+
+export default RSCRoute;
diff --git a/node_package/src/RSCServerRoot.tsx b/node_package/src/RSCServerRoot.tsx
deleted file mode 100644
index 39ecb2389..000000000
--- a/node_package/src/RSCServerRoot.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import * as React from 'react';
-import { createFromNodeStream } from 'react-on-rails-rsc/client.node';
-import { PassThrough } from 'stream';
-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(
-    componentName: string,
-    props: Record<string, unknown>,
-    railsContext: RailsContext,
-  ): Promise<NodeJS.ReadableStream>;
-}
-
-type RSCServerRootProps = {
-  componentName: string;
-  componentProps: Record<string, unknown>;
-};
-
-const { use } = React;
-
-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 [reactServerManifest, reactClientManifest] = await Promise.all([
-    loadJsonFile(reactServerManifestFileName) as Promise<Record<string, { id: string; chunks: string[] }>>,
-    loadJsonFile(reactClientManifestFileName) as Promise<Record<string, { id: string }>>,
-  ]);
-
-  const moduleMap: Record<string, unknown> = {};
-  Object.entries(reactClientManifest).forEach(([aboluteFileUrl, clientFileBundlingInfo]) => {
-    const { id, chunks } = reactServerManifest[aboluteFileUrl];
-    moduleMap[clientFileBundlingInfo.id] = {
-      '*': {
-        id,
-        chunks,
-        name: '*',
-      },
-    };
-  });
-
-  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;
-};
-
-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. ' +
-        '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 ' +
-        'is set to true.',
-    );
-  }
-
-  const ssrManifest = await createSSRManifest(
-    railsContext.reactServerClientManifestFileName,
-    railsContext.reactClientManifestFileName,
-  );
-  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();
-  rscPayloadStream.pipe(rscPayloadStream1);
-  const rscPayloadStream2 = new PassThrough();
-  rscPayloadStream.pipe(rscPayloadStream2);
-  const serverComponentElement = createFromReactOnRailsNodeStream(rscPayloadStream1, ssrManifest);
-
-  return () => {
-    const resolvedServerComponent = use(serverComponentElement);
-    return (
-      <>
-        {resolvedServerComponent}
-        <RSCPayloadContainer RSCPayloadStream={rscPayloadStream2} />
-      </>
-    );
-  };
-};
-
-export default RSCServerRoot;
diff --git a/node_package/src/ReactOnRails.node.ts b/node_package/src/ReactOnRails.node.ts
index 407d2658b..7c6bcbe41 100644
--- a/node_package/src/ReactOnRails.node.ts
+++ b/node_package/src/ReactOnRails.node.ts
@@ -1,7 +1,17 @@
 import ReactOnRails from './ReactOnRails.full.ts';
 import streamServerRenderedReactComponent from './streamServerRenderedReactComponent.ts';
+import {
+  getRSCPayloadStream,
+  getRSCPayloadStreams,
+  clearRSCPayloadStreams,
+  onRSCPayloadGenerated,
+} from './RSCPayloadGenerator.ts';
 
 ReactOnRails.streamServerRenderedReactComponent = streamServerRenderedReactComponent;
+ReactOnRails.getRSCPayloadStream = getRSCPayloadStream;
+ReactOnRails.getRSCPayloadStreams = getRSCPayloadStreams;
+ReactOnRails.clearRSCPayloadStreams = clearRSCPayloadStreams;
+ReactOnRails.onRSCPayloadGenerated = onRSCPayloadGenerated;
 
 export * from './ReactOnRails.full.ts';
 // eslint-disable-next-line no-restricted-exports -- see https://github.com/eslint/eslint/issues/15617
diff --git a/node_package/src/getReactServerComponent.client.ts b/node_package/src/getReactServerComponent.client.ts
new file mode 100644
index 000000000..572095994
--- /dev/null
+++ b/node_package/src/getReactServerComponent.client.ts
@@ -0,0 +1,137 @@
+import * as React from 'react';
+import { createFromReadableStream } from 'react-on-rails-rsc/client';
+import { fetch } from './utils.ts';
+import transformRSCStreamAndReplayConsoleLogs from './transformRSCStreamAndReplayConsoleLogs.ts';
+import { RailsContext } from './types/index.ts';
+
+declare global {
+  interface Window {
+    REACT_ON_RAILS_RSC_PAYLOADS?: Record<string, string[]>;
+  }
+}
+
+type ClientGetReactServerComponentProps = {
+  componentName: string;
+  componentProps: unknown;
+  railsContext: RailsContext;
+};
+
+const createFromFetch = async (fetchPromise: Promise<Response>) => {
+  const response = await fetchPromise;
+  const stream = response.body;
+  if (!stream) {
+    throw new Error('No stream found in response');
+  }
+  const transformedStream = transformRSCStreamAndReplayConsoleLogs(stream);
+  return createFromReadableStream<React.ReactNode>(transformedStream);
+};
+
+/**
+ * Fetches an RSC payload via HTTP request.
+ *
+ * This function:
+ * 1. Serializes the component props
+ * 2. Makes an HTTP request to the RSC payload generation endpoint
+ * 3. Processes the response stream into React elements
+ *
+ * This is used for client-side navigation or when rendering components
+ * that weren't part of the initial server render.
+ *
+ * @param props - Object containing component name, props, and railsContext
+ * @returns A Promise resolving to the rendered React element
+ */
+const fetchRSC = ({ componentName, componentProps, railsContext }: ClientGetReactServerComponentProps) => {
+  const propsString = JSON.stringify(componentProps);
+  const { rscPayloadGenerationUrl } = railsContext;
+  const strippedUrlPath = rscPayloadGenerationUrl?.replace(/^\/|\/$/g, '');
+  return createFromFetch(fetch(`/${strippedUrlPath}/${componentName}?props=${propsString}`));
+};
+
+const createRSCStreamFromArray = (payloads: string[]) => {
+  let streamController: ReadableStreamController<string> | undefined;
+  const stream = new ReadableStream<string>({
+    start(controller) {
+      if (typeof window === 'undefined') {
+        return;
+      }
+      const handleChunk = (chunk: string) => {
+        controller.enqueue(chunk);
+      };
+
+      payloads.forEach(handleChunk);
+      // eslint-disable-next-line no-param-reassign
+      payloads.push = (...chunks) => {
+        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;
+};
+
+/**
+ * Creates React elements from preloaded RSC payloads in the page.
+ *
+ * This function:
+ * 1. Creates a ReadableStream from the array of payload chunks
+ * 2. Transforms the stream to handle console logs and other processing
+ * 3. Uses React's createFromReadableStream to process the payload
+ *
+ * This is used during hydration to avoid making HTTP requests when
+ * the payload is already embedded in the page.
+ *
+ * @param payloads - Array of RSC payload chunks from the global array
+ * @returns A Promise resolving to the rendered React element
+ */
+const createFromPreloadedPayloads = (payloads: string[]) => {
+  const stream = createRSCStreamFromArray(payloads);
+  const transformedStream = transformRSCStreamAndReplayConsoleLogs(stream);
+  return createFromReadableStream<React.ReactNode>(transformedStream);
+};
+
+/**
+ * Fetches and renders a server component on the client side.
+ *
+ * This function:
+ * 1. Checks for embedded RSC payloads in window.REACT_ON_RAILS_RSC_PAYLOADS
+ * 2. If found, uses the embedded payload to avoid an HTTP request
+ * 3. If not found (during client navigation or dynamic rendering), fetches via HTTP
+ * 4. Processes the RSC payload into React elements
+ *
+ * The embedded payload approach ensures optimal performance during initial page load,
+ * while the HTTP fallback enables dynamic rendering after navigation.
+ *
+ * @param componentName - Name of the server component to render
+ * @param componentProps - Props to pass to the server component
+ * @param railsContext - Context for the current request
+ * @returns A Promise resolving to the rendered React element
+ *
+ * @important This is an internal function. End users should not use this directly.
+ * Instead, use the useRSC hook which provides getComponent and getCachedComponent functions
+ * for fetching or retrieving cached server components. For rendering server components,
+ * consider using RSCRoute component which handles the rendering logic automatically.
+ */
+const getReactServerComponent = ({
+  componentName,
+  componentProps,
+  railsContext,
+}: ClientGetReactServerComponentProps) => {
+  const componentKey = `${componentName}-${JSON.stringify(componentProps)}-${railsContext.componentSpecificMetadata?.renderRequestId}`;
+  const payloads = window.REACT_ON_RAILS_RSC_PAYLOADS?.[componentKey];
+  if (payloads) {
+    return createFromPreloadedPayloads(payloads);
+  }
+  return fetchRSC({ componentName, componentProps, railsContext });
+};
+
+export default getReactServerComponent;
diff --git a/node_package/src/getReactServerComponent.server.ts b/node_package/src/getReactServerComponent.server.ts
new file mode 100644
index 000000000..58d1ba1df
--- /dev/null
+++ b/node_package/src/getReactServerComponent.server.ts
@@ -0,0 +1,130 @@
+import { createFromNodeStream } from 'react-on-rails-rsc/client.node';
+import transformRSCStream from './transformRSCNodeStream.ts';
+import loadJsonFile from './loadJsonFile.ts';
+import { RailsContext } from './types/index.ts';
+
+type RSCServerRootProps = {
+  componentName: string;
+  componentProps: unknown;
+  railsContext: RailsContext;
+};
+
+const createFromReactOnRailsNodeStream = (
+  stream: NodeJS.ReadableStream,
+  ssrManifest: Record<string, unknown>,
+) => {
+  const transformedStream = transformRSCStream(stream);
+  return createFromNodeStream(transformedStream, ssrManifest);
+};
+
+/**
+ * Creates an SSR manifest for React's server components runtime.
+ *
+ * This function:
+ * 1. Loads the server and client component manifests
+ * 2. Creates a mapping between client and server module IDs
+ * 3. Builds a moduleMap structure required by React's SSR runtime
+ *
+ * The manifest allows React to correctly associate server components
+ * with their client counterparts during hydration.
+ *
+ * @param reactServerManifestFileName - Path to the server manifest file
+ * @param reactClientManifestFileName - Path to the client manifest file
+ * @returns A Promise resolving to the SSR manifest object
+ */
+const createSSRManifest = async (
+  reactServerManifestFileName: string,
+  reactClientManifestFileName: string,
+) => {
+  const [reactServerManifest, reactClientManifest] = await Promise.all([
+    loadJsonFile(reactServerManifestFileName) as Promise<Record<string, { id: string; chunks: string[] }>>,
+    loadJsonFile(reactClientManifestFileName) as Promise<Record<string, { id: string }>>,
+  ]);
+
+  const moduleMap: Record<string, unknown> = {};
+  Object.entries(reactClientManifest).forEach(([aboluteFileUrl, clientFileBundlingInfo]) => {
+    const { id, chunks } = reactServerManifest[aboluteFileUrl];
+    moduleMap[clientFileBundlingInfo.id] = {
+      '*': {
+        id,
+        chunks,
+        name: '*',
+      },
+    };
+  });
+
+  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: {
+      prefix: '/webpack/development/',
+    },
+    moduleMap,
+  };
+
+  return ssrManifest;
+};
+
+/**
+ * Fetches and renders a server component on the server side.
+ *
+ * This function:
+ * 1. Validates the railsContext for required properties
+ * 2. Creates an SSR manifest mapping server and client modules
+ * 3. Gets the RSC payload stream via getRSCPayloadStream
+ * 4. Processes the stream with React's SSR runtime
+ *
+ * During SSR, this function ensures that the RSC payload is both:
+ * - Used to render the server component
+ * - Tracked so it can be embedded in the HTML response
+ *
+ * @param componentName - Name of the server component to render
+ * @param componentProps - Props to pass to the server component
+ * @param railsContext - Context for the current request
+ * @returns A Promise resolving to the rendered React element
+ *
+ * @important This is an internal function. End users should not use this directly.
+ * Instead, use the useRSC hook which provides getComponent and getCachedComponent functions
+ * for fetching or retrieving cached server components. For rendering server components,
+ * consider using RSCRoute component which handles the rendering logic automatically.
+ */
+const getReactServerComponent = async ({
+  componentName,
+  componentProps,
+  railsContext,
+}: RSCServerRootProps) => {
+  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. ' +
+        'Make sure to use "stream_react_component" instead of "react_component" to SSR a server component.',
+    );
+  }
+
+  if (typeof ReactOnRails.getRSCPayloadStream !== 'function') {
+    throw new Error(
+      'ReactOnRails.getRSCPayloadStream is not defined. This likely means that you are not building the server bundle correctly. Please ensure that your server bundle is targeting Node.js',
+    );
+  }
+
+  const ssrManifest = await createSSRManifest(
+    railsContext.reactServerClientManifestFileName,
+    railsContext.reactClientManifestFileName,
+  );
+  const rscPayloadStream = await ReactOnRails.getRSCPayloadStream(
+    componentName,
+    componentProps,
+    railsContext,
+  );
+
+  return createFromReactOnRailsNodeStream(rscPayloadStream, ssrManifest);
+};
+
+export default getReactServerComponent;
diff --git a/node_package/src/injectRSCPayload.ts b/node_package/src/injectRSCPayload.ts
new file mode 100644
index 000000000..155c4c79b
--- /dev/null
+++ b/node_package/src/injectRSCPayload.ts
@@ -0,0 +1,144 @@
+import { PipeableStream } from 'react-dom/server';
+import { PassThrough, Transform } from 'stream';
+import { RailsContext } from './types/index.ts';
+
+// 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');
+}
+
+function cacheKeyJSArray(cacheKey: string) {
+  return `(self.REACT_ON_RAILS_RSC_PAYLOADS||={})[${JSON.stringify(cacheKey)}]||=[]`;
+}
+
+function writeScript(script: string, transform: Transform) {
+  transform.push(`<script>${escapeScript(script)}</script>`);
+}
+
+function initializeCacheKeyJSArray(cacheKey: string, transform: Transform) {
+  writeScript(cacheKeyJSArray(cacheKey), transform);
+}
+
+function writeChunk(chunk: string, transform: Transform, cacheKey: string) {
+  writeScript(`(${cacheKeyJSArray(cacheKey)}).push(${chunk})`, transform);
+}
+
+/**
+ * Embeds RSC payloads into the HTML stream for optimal hydration.
+ *
+ * This function:
+ * 1. Creates a result stream for the combined HTML + RSC payloads
+ * 2. Listens for RSC payload generation via onRSCPayloadGenerated
+ * 3. Initializes global arrays for each payload BEFORE component HTML
+ * 4. Writes each payload chunk as a script tag that pushes to the array
+ * 5. Passes HTML through to the result stream
+ *
+ * The timing of array initialization is critical - it must occur before the
+ * component's HTML to ensure the array exists when client hydration begins.
+ * This prevents unnecessary HTTP requests during hydration.
+ *
+ * @param pipeableHtmlStream - HTML stream from React's renderToPipeableStream
+ * @param railsContext - Context for the current request
+ * @returns A combined stream with embedded RSC payloads
+ */
+export default function injectRSCPayload(
+  pipeableHtmlStream: NodeJS.ReadableStream | PipeableStream,
+  railsContext: RailsContext,
+) {
+  const htmlStream = new PassThrough();
+  pipeableHtmlStream.pipe(htmlStream);
+  const decoder = new TextDecoder();
+  let rscPromise: Promise<void> | null = null;
+  const htmlBuffer: Buffer[] = [];
+  let timeout: NodeJS.Timeout | null = null;
+  const resultStream = new PassThrough();
+
+  const startRSC = async () => {
+    try {
+      const rscPromises: Promise<void>[] = [];
+
+      ReactOnRails.onRSCPayloadGenerated?.(railsContext, (streamInfo) => {
+        const { stream, props, componentName } = streamInfo;
+        const cacheKey = `${componentName}-${JSON.stringify(props)}-${railsContext.componentSpecificMetadata?.renderRequestId}`;
+
+        // When a component requests an RSC payload, we initialize a global array to store it.
+        // This array is injected into the HTML before the component's HTML markup.
+        // From our tests in SuspenseHydration.test.tsx, we know that client-side components
+        // only hydrate after their HTML is present in the page. This timing ensures that
+        // the RSC payload array is available before hydration begins.
+        // As a result, the component can access its RSC payload directly from the page
+        // instead of making a separate network request.
+        // The client-side RSCProvider actively monitors the array for new chunks, processing them as they arrive and forwarding them to the RSC payload stream, regardless of whether the array is initially empty.
+        initializeCacheKeyJSArray(cacheKey, resultStream);
+        rscPromises.push(
+          new Promise((resolve, reject) => {
+            (async () => {
+              for await (const chunk of stream ?? []) {
+                const decodedChunk = typeof chunk === 'string' ? chunk : decoder.decode(chunk);
+                writeChunk(JSON.stringify(decodedChunk), resultStream, cacheKey);
+              }
+              resolve();
+            })().catch(reject);
+          }),
+        );
+      });
+
+      await new Promise((resolve) => {
+        if (htmlStream.readableEnded) {
+          resolve(Promise.all(rscPromises));
+        } else {
+          htmlStream.on('end', () => {
+            resolve(Promise.all(rscPromises));
+          });
+        }
+      });
+    } catch (err) {
+      resultStream.emit('error', err);
+    }
+  };
+
+  const writeHTMLChunks = () => {
+    resultStream.push(Buffer.concat(htmlBuffer));
+    htmlBuffer.length = 0;
+  };
+
+  htmlStream.on('data', (chunk: Buffer) => {
+    htmlBuffer.push(chunk);
+    if (timeout) {
+      return;
+    }
+
+    timeout = setTimeout(() => {
+      writeHTMLChunks();
+      if (!rscPromise) {
+        rscPromise = startRSC();
+      }
+      timeout = null;
+    }, 0);
+  });
+
+  htmlStream.on('end', () => {
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    writeHTMLChunks();
+    if (!rscPromise) {
+      rscPromise = startRSC();
+    }
+    rscPromise
+      .then(() => {
+        resultStream.end();
+        ReactOnRails.clearRSCPayloadStreams?.(railsContext);
+      })
+      .catch((err: unknown) => resultStream.emit('error', err));
+  });
+
+  return resultStream;
+}
diff --git a/node_package/src/registerServerComponent/client.ts b/node_package/src/registerServerComponent/client.tsx
similarity index 59%
rename from node_package/src/registerServerComponent/client.ts
rename to node_package/src/registerServerComponent/client.tsx
index 6a1b62a61..1da74ca70 100644
--- a/node_package/src/registerServerComponent/client.ts
+++ b/node_package/src/registerServerComponent/client.tsx
@@ -1,10 +1,8 @@
+import * as React from 'react';
 import ReactOnRails from '../ReactOnRails.client.ts';
-import RSCClientRoot from '../RSCClientRoot.ts';
-import {
-  RegisterServerComponentOptions,
-  RailsContext,
-  ReactComponentOrRenderFunction,
-} from '../types/index.ts';
+import RSCRoute from '../RSCRoute.ts';
+import { ReactComponentOrRenderFunction } from '../types/index.ts';
+import wrapServerComponentRenderer from '../wrapServerComponentRenderer/client.tsx';
 
 /**
  * Registers React Server Components (RSC) with React on Rails.
@@ -31,32 +29,19 @@ import {
  *
  * @example
  * ```js
- * registerServerComponent({
- *   rscPayloadGenerationUrlPath: '/rsc_payload'
- * }, 'ServerComponent1', 'ServerComponent2');
+ * registerServerComponent('ServerComponent1', 'ServerComponent2');
  *
  * // When ServerComponent1 renders, it will fetch from: /rsc_payload/ServerComponent1
  * ```
  */
-const registerServerComponent = (options: RegisterServerComponentOptions, ...componentNames: string[]) => {
-  const componentsWrappedInRSCClientRoot: Record<string, ReactComponentOrRenderFunction> = {};
+const registerServerComponent = (...componentNames: string[]) => {
+  const componentsWrappedInRSCRoute: Record<string, ReactComponentOrRenderFunction> = {};
   for (const name of componentNames) {
-    componentsWrappedInRSCClientRoot[name] = (
-      componentProps?: unknown,
-      _railsContext?: RailsContext,
-      domNodeId?: string,
-    ) =>
-      RSCClientRoot(
-        {
-          componentName: name,
-          rscPayloadGenerationUrlPath: options.rscPayloadGenerationUrlPath,
-          componentProps,
-        },
-        _railsContext,
-        domNodeId,
-      );
+    componentsWrappedInRSCRoute[name] = wrapServerComponentRenderer((props: unknown) => (
+      <RSCRoute componentName={name} componentProps={props} />
+    ));
   }
-  ReactOnRails.register(componentsWrappedInRSCClientRoot);
+  ReactOnRails.register(componentsWrappedInRSCRoute);
 };
 
 export default registerServerComponent;
diff --git a/node_package/src/registerServerComponent/server.rsc.ts b/node_package/src/registerServerComponent/server.rsc.ts
index 694193c44..e7dea03f0 100644
--- a/node_package/src/registerServerComponent/server.rsc.ts
+++ b/node_package/src/registerServerComponent/server.rsc.ts
@@ -2,12 +2,12 @@ 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.
+ * Registers React Server Components in 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.
+ * Unlike the client and server implementations, the RSC bundle registration
+ * directly registers components without any wrapping. This is because the
+ * RSC bundle is responsible for generating the actual RSC payload of server
+ * components, not for rendering or hydrating client components.
  *
  * @param components - Object mapping component names to their implementations
  *
diff --git a/node_package/src/registerServerComponent/server.ts b/node_package/src/registerServerComponent/server.ts
deleted file mode 100644
index d316f89f3..000000000
--- a/node_package/src/registerServerComponent/server.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import ReactOnRails from '../ReactOnRails.client.ts';
-import RSCServerRoot from '../RSCServerRoot.tsx';
-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
- * - Handles the integration with React's streaming SSR
- *
- * @param components - Object mapping component names to their implementations
- *
- * @example
- * ```js
- * registerServerComponent({
- *   ServerComponent1: ServerComponent1Component,
- *   ServerComponent2: ServerComponent2Component
- * });
- * ```
- */
-const registerServerComponent = (components: Record<string, ReactComponent>) => {
-  const componentsWrappedInRSCServerRoot: Record<string, RenderFunction> = {};
-  for (const [componentName] of Object.entries(components)) {
-    componentsWrappedInRSCServerRoot[componentName] = (
-      componentProps?: unknown,
-      railsContext?: RailsContext,
-    ) => RSCServerRoot({ componentName, componentProps }, railsContext);
-  }
-  ReactOnRails.register(componentsWrappedInRSCServerRoot);
-};
-
-export default registerServerComponent;
diff --git a/node_package/src/registerServerComponent/server.tsx b/node_package/src/registerServerComponent/server.tsx
new file mode 100644
index 000000000..dc2423074
--- /dev/null
+++ b/node_package/src/registerServerComponent/server.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import ReactOnRails from '../ReactOnRails.client.ts';
+import RSCRoute from '../RSCRoute.ts';
+import { ReactComponent, RenderFunction } from '../types/index.ts';
+import wrapServerComponentRenderer from '../wrapServerComponentRenderer/server.tsx';
+
+/**
+ * Registers React Server Components for use in server bundles.
+ *
+ * This function:
+ * 1. Takes server component implementations
+ * 2. Wraps each component with RSCRoute using WrapServerComponentRenderer
+ * 3. Registers the wrapped components with ReactOnRails
+ *
+ * @param components - Object mapping component names to their implementations
+ *
+ * @example
+ * ```js
+ * registerServerComponent({
+ *   ServerComponent1: ServerComponent1Component,
+ *   ServerComponent2: ServerComponent2Component
+ * });
+ * ```
+ */
+const registerServerComponent = (components: Record<string, ReactComponent>) => {
+  const componentsWrappedInRSCRoute: Record<string, RenderFunction> = {};
+  for (const [componentName] of Object.entries(components)) {
+    componentsWrappedInRSCRoute[componentName] = wrapServerComponentRenderer((props: unknown) => (
+      <RSCRoute componentName={componentName} componentProps={props} />
+    ));
+  }
+  ReactOnRails.register(componentsWrappedInRSCRoute);
+};
+
+export default registerServerComponent;
diff --git a/node_package/src/streamServerRenderedReactComponent.ts b/node_package/src/streamServerRenderedReactComponent.ts
index 1519f6e44..dccfe35ea 100644
--- a/node_package/src/streamServerRenderedReactComponent.ts
+++ b/node_package/src/streamServerRenderedReactComponent.ts
@@ -9,6 +9,7 @@ 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 injectRSCPayload from './injectRSCPayload.ts';
 
 type BufferedEvent = {
   event: 'data' | 'error' | 'end';
@@ -87,22 +88,12 @@ 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 jsonChunk = JSON.stringify(createResultObject(htmlChunk, '', renderState));
+    transform(chunk: Buffer, _, callback) {
+      const htmlChunk = chunk.toString();
+      const consoleReplayScript = buildConsoleReplay(consoleHistory, previouslyReplayedConsoleMessages);
+      previouslyReplayedConsoleMessages = consoleHistory?.length || 0;
+      const jsonChunk = JSON.stringify(createResultObject(htmlChunk, consoleReplayScript, renderState));
       this.push(`${jsonChunk}\n`);
 
       // Reset the render state to ensure that the error is not carried over to the next chunk
@@ -111,29 +102,12 @@ export const transformRenderStreamChunksToResultObject = (renderState: StreamRen
       // eslint-disable-next-line no-param-reassign
       renderState.hasErrors = false;
 
-      clearTimeout(consoleReplayTimeoutId);
-      consoleReplayTimeoutId = setTimeout(() => {
-        const consoleReplayChunk = buildConsoleReplayChunk();
-        if (consoleReplayChunk) {
-          this.push(`${consoleReplayChunk}\n`);
-        }
-      }, 0);
-
-      callback();
-    },
-
-    flush(callback) {
-      clearTimeout(consoleReplayTimeoutId);
-      const consoleReplayChunk = buildConsoleReplayChunk();
-      if (consoleReplayChunk) {
-        this.push(`${consoleReplayChunk}\n`);
-      }
       callback();
     },
   });
 
-  let pipedStream: PipeableStream | null = null;
-  const pipeToTransform = (pipeableStream: PipeableStream) => {
+  let pipedStream: PipeableStream | NodeJS.ReadableStream | null = null;
+  const pipeToTransform = (pipeableStream: PipeableStream | NodeJS.ReadableStream) => {
     pipeableStream.pipe(transformStream);
     pipedStream = pipeableStream;
   };
@@ -147,7 +121,9 @@ export const transformRenderStreamChunksToResultObject = (renderState: StreamRen
   const writeChunk = (chunk: string) => transformStream.write(chunk);
   const endStream = () => {
     transformStream.end();
-    pipedStream?.abort();
+    if (pipedStream && 'abort' in pipedStream) {
+      pipedStream.abort();
+    }
   };
   return { readableStream, pipeToTransform, writeChunk, emitError, endStream };
 };
@@ -181,6 +157,11 @@ const streamRenderReactComponent = (
     endStream();
   };
 
+  const { railsContext } = options;
+  if (!railsContext) {
+    throw new Error('railsContext is required to stream a React component');
+  }
+
   Promise.resolve(reactRenderingResult)
     .then((reactRenderedElement) => {
       if (typeof reactRenderedElement === 'string') {
@@ -201,7 +182,7 @@ const streamRenderReactComponent = (
         },
         onShellReady() {
           renderState.isShellReady = true;
-          pipeToTransform(renderingStream);
+          pipeToTransform(injectRSCPayload(renderingStream, railsContext));
         },
         onError(e) {
           reportError(convertToError(e));
@@ -214,7 +195,6 @@ const streamRenderReactComponent = (
       reportError(error);
       sendErrorHtml(error);
     });
-
   return readableStream;
 };
 
diff --git a/node_package/src/transformRSCNodeStream.ts b/node_package/src/transformRSCNodeStream.ts
index d40e10359..e26f1a44a 100644
--- a/node_package/src/transformRSCNodeStream.ts
+++ b/node_package/src/transformRSCNodeStream.ts
@@ -1,5 +1,19 @@
 import { Transform } from 'stream';
 
+/**
+ * Transforms an RSC Node.js stream for server-side processing.
+ *
+ * This utility:
+ * 1. Takes a Node.js ReadableStream of RSC payload chunks
+ * 2. Applies necessary transformations for server-side consumption
+ * 3. Returns a modified stream that works with React's SSR runtime
+ *
+ * This is essential for proper handling of RSC payloads in Node.js
+ * environment during server-side rendering.
+ *
+ * @param stream - The Node.js RSC payload stream
+ * @returns A transformed stream compatible with React's SSR runtime
+ */
 export default function transformRSCStream(stream: NodeJS.ReadableStream): NodeJS.ReadableStream {
   const decoder = new TextDecoder();
   let lastIncompleteChunk = '';
diff --git a/node_package/src/transformRSCStreamAndReplayConsoleLogs.ts b/node_package/src/transformRSCStreamAndReplayConsoleLogs.ts
index 91131e9b0..56af541dd 100644
--- a/node_package/src/transformRSCStreamAndReplayConsoleLogs.ts
+++ b/node_package/src/transformRSCStreamAndReplayConsoleLogs.ts
@@ -1,8 +1,20 @@
 import { RSCPayloadChunk } from './types/index.ts';
 
-export default function transformRSCStreamAndReplayConsoleLogs(
-  stream: ReadableStream<Uint8Array | RSCPayloadChunk>,
-) {
+/**
+ * Transforms an RSC stream and replays console logs on the client.
+ *
+ * This utility:
+ * 1. Takes a ReadableStream of RSC payload chunks
+ * 2. Processes each chunk to extract and replay embedded console logs
+ * 3. Passes through the actual RSC payload data
+ *
+ * This improves debugging by making server-side console logs appear in
+ * the client console, maintaining a seamless development experience.
+ *
+ * @param stream - The RSC payload stream to transform
+ * @returns A transformed stream with console logs extracted and replayed
+ */
+export default function transformRSCStreamAndReplayConsoleLogs(stream: ReadableStream<Uint8Array | string>) {
   return new ReadableStream({
     async start(controller) {
       const reader = stream.getReader();
@@ -28,27 +40,24 @@ export default function transformRSCStreamAndReplayConsoleLogs(
       };
 
       while (!done) {
-        if (ArrayBuffer.isView(value)) {
-          const decodedValue = lastIncompleteChunk + decoder.decode(value);
-          const chunks = decodedValue.split('\n');
-          lastIncompleteChunk = chunks.pop() ?? '';
-
-          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;
-              }
-            });
-
-          for (const jsonChunk of jsonChunks) {
-            handleJsonChunk(jsonChunk);
-          }
-        } else if (value) {
-          handleJsonChunk(value);
+        const decodedValue = typeof value === 'string' ? value : decoder.decode(value);
+        const decodedChunks = lastIncompleteChunk + decodedValue;
+        const chunks = decodedChunks.split('\n');
+        lastIncompleteChunk = chunks.pop() ?? '';
+
+        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;
+            }
+          });
+
+        for (const jsonChunk of jsonChunks) {
+          handleJsonChunk(jsonChunk);
         }
 
         // 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 4d13a27bc..b75567862 100644
--- a/node_package/src/types/index.ts
+++ b/node_package/src/types/index.ts
@@ -35,6 +35,15 @@ export type RailsContext = {
   search: string | null;
   httpAcceptLanguage: string;
   rscPayloadGenerationUrl?: string;
+  componentSpecificMetadata?: {
+    // The renderRequestId serves as a unique identifier for each render request.
+    // We cannot rely solely on nodeDomId, as it should be unique for each component on the page,
+    // but the server can render the same page multiple times concurrently for different users.
+    // Therefore, we need an additional unique identifier that can be used both on the client and server.
+    // This ID can also be used to associate specific data with a particular rendered component
+    // on either the server or client.
+    renderRequestId: string;
+  };
 } & (
   | {
       serverSide: false;
@@ -153,10 +162,6 @@ export interface RegisteredComponent {
   isRenderer: boolean;
 }
 
-export interface RegisterServerComponentOptions {
-  rscPayloadGenerationUrlPath: string;
-}
-
 export type ItemRegistrationCallback<T> = (component: T) => void;
 
 interface Params {
@@ -288,6 +293,14 @@ export interface ReactOnRails {
   authenticityHeaders(otherHeaders: Record<string, string>): AuthenticityHeaders;
 }
 
+export type RSCPayloadStreamInfo = {
+  stream: NodeJS.ReadableStream;
+  props: unknown;
+  componentName: string;
+};
+
+export type RSCPayloadCallback = (streamInfo: RSCPayloadStreamInfo) => void;
+
 /** Contains the parts of the `ReactOnRails` API intended for internal use only. */
 export interface ReactOnRailsInternal extends ReactOnRails {
   /**
@@ -396,6 +409,45 @@ export interface ReactOnRailsInternal extends ReactOnRails {
    * Indicates if the RSC bundle is being used.
    */
   isRSCBundle: boolean;
+
+  // These functions are intended for use in Node.js environments only. They should be used on the server side and excluded from client-side bundles to reduce bundle size.
+  /**
+   * Generates a ReadableStream for a given component's RSC payload.
+   * @param componentName - The name of the component.
+   * @param props - The properties to pass to the component.
+   * @param railsContext - The Rails context of the current rendering request.
+   * @returns A promise that resolves to a NodeJS.ReadableStream.
+   */
+  getRSCPayloadStream?: (
+    componentName: string,
+    props: unknown,
+    railsContext: RailsContext,
+  ) => Promise<NodeJS.ReadableStream>;
+
+  /**
+   /**
+    * Retrieves all React Server Component (RSC) payload streams generated for a specific rendering request.
+    * @param railsContext - The Rails context of the current rendering request.
+    * @returns An array of objects, each containing the component name and its corresponding NodeJS.ReadableStream.
+    */
+  getRSCPayloadStreams?: (railsContext: RailsContext) => {
+    componentName: string;
+    props: unknown;
+    stream: NodeJS.ReadableStream;
+  }[];
+
+  /**
+   * Registers a callback to be called when an RSC payload stream is generated for a specific rendering request.
+   * @param railsContext - The Rails context of the current rendering request.
+   * @param callback - The callback to be called when an RSC payload stream is generated.
+   */
+  onRSCPayloadGenerated?: (railsContext: RailsContext, callback: RSCPayloadCallback) => void;
+
+  /**
+   * Clears all RSC payload streams generated for the rendering request of the given Rails context.
+   * @param railsContext - The Rails context of the current rendering request.
+   */
+  clearRSCPayloadStreams?: (railsContext: RailsContext) => void;
 }
 
 export type RenderStateHtml = FinalHtmlResult | Promise<FinalHtmlResult>;
diff --git a/node_package/src/wrapServerComponentRenderer/client.tsx b/node_package/src/wrapServerComponentRenderer/client.tsx
new file mode 100644
index 000000000..1cdd0b784
--- /dev/null
+++ b/node_package/src/wrapServerComponentRenderer/client.tsx
@@ -0,0 +1,82 @@
+import * as React from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import { ReactComponentOrRenderFunction, RenderFunction } from '../types/index.ts';
+import isRenderFunction from '../isRenderFunction.ts';
+import { ensureReactUseAvailable } from '../reactApis.cts';
+import { createRSCProvider } from '../RSCProvider.tsx';
+import getReactServerComponent from '../getReactServerComponent.client.ts';
+
+ensureReactUseAvailable();
+
+/**
+ * Wraps a client component with the necessary RSC context and handling for client-side operations.
+ *
+ * This higher-order function:
+ * 1. Creates an RSCProvider with client-specific implementation of getReactServerComponent
+ * 2. Handles DOM hydration or rendering operations
+ * 3. Ensures Suspense boundaries are properly set up for async rendering
+ *
+ * Use this version specifically for client bundle registration.
+ *
+ * @param componentOrRenderFunction - Client component or render function to wrap
+ * @returns A render function that handles client-side RSC operations and DOM hydration that should be registered with ReactOnRails.register
+ *
+ * @example
+ * ```tsx
+ * const WrappedComponent = WrapServerComponentRenderer(ClientComponent);
+ * ReactOnRails.register({ ClientComponent: WrappedComponent });
+ * ```
+ */
+const wrapServerComponentRenderer = (componentOrRenderFunction: ReactComponentOrRenderFunction) => {
+  if (typeof componentOrRenderFunction !== 'function') {
+    throw new Error('wrapServerComponentRenderer: component is not a function');
+  }
+
+  const wrapper: RenderFunction = async (props, railsContext, domNodeId) => {
+    const Component = isRenderFunction(componentOrRenderFunction)
+      ? await componentOrRenderFunction(props, railsContext, domNodeId)
+      : componentOrRenderFunction;
+
+    if (typeof Component !== 'function') {
+      throw new Error('wrapServerComponentRenderer: component is not a function');
+    }
+
+    if (!railsContext) {
+      throw new Error('RSCClientRoot: No railsContext provided');
+    }
+
+    const RSCProvider = createRSCProvider({
+      railsContext,
+      getServerComponent: getReactServerComponent,
+    });
+
+    const SuspensableRSCRoute = (
+      <React.Suspense fallback={null}>
+        <Component {...props} />
+      </React.Suspense>
+    );
+
+    const root = <RSCProvider>{SuspensableRSCRoute}</RSCProvider>;
+
+    if (!domNodeId) {
+      throw new Error('RSCClientRoot: No domNodeId provided');
+    }
+    const domNode = document.getElementById(domNodeId);
+    if (!domNode) {
+      throw new Error(`RSCClientRoot: No DOM node found for id: ${domNodeId}`);
+    }
+    if (domNode.innerHTML) {
+      ReactDOMClient.hydrateRoot(domNode, root, { identifierPrefix: domNodeId });
+    } else {
+      ReactDOMClient.createRoot(domNode, { identifierPrefix: domNodeId }).render(root);
+    }
+    // Added only to satisfy the return type of RenderFunction
+    // However, the returned value of renderFunction is not used in ReactOnRails
+    // TODO: fix this behavior
+    return '';
+  };
+
+  return wrapper;
+};
+
+export default wrapServerComponentRenderer;
diff --git a/node_package/src/wrapServerComponentRenderer/server.rsc.tsx b/node_package/src/wrapServerComponentRenderer/server.rsc.tsx
new file mode 100644
index 000000000..2da98f23f
--- /dev/null
+++ b/node_package/src/wrapServerComponentRenderer/server.rsc.tsx
@@ -0,0 +1,6 @@
+const wrapServerComponentRenderer = () => {
+  // Do nothing
+  // Server component renderers are client components and not needed in the RSC bundle
+};
+
+export default wrapServerComponentRenderer;
diff --git a/node_package/src/wrapServerComponentRenderer/server.tsx b/node_package/src/wrapServerComponentRenderer/server.tsx
new file mode 100644
index 000000000..af90849d3
--- /dev/null
+++ b/node_package/src/wrapServerComponentRenderer/server.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import type { RenderFunction, ReactComponentOrRenderFunction } from '../types/index.ts';
+import getReactServerComponent from '../getReactServerComponent.server.ts';
+import { createRSCProvider } from '../RSCProvider.tsx';
+import isRenderFunction from '../isRenderFunction.ts';
+
+/**
+ * Wraps a client component with the necessary RSC context and handling for server-side operations.
+ *
+ * This higher-order function:
+ * 1. Creates an RSCProvider with server-specific implementation of getReactServerComponent
+ * 2. Provides a render function that returns React elements for SSR
+ * 3. Ensures Suspense boundaries are properly set up for async rendering
+ *
+ * Use this version specifically for server bundle registration.
+ *
+ * @param componentOrRenderFunction - Client component or render function to wrap
+ * @returns A render function that produces React elements for server-side rendering that should be registered with ReactOnRails.register
+ *
+ * @example
+ * ```tsx
+ * const WrappedComponent = WrapServerComponentRenderer(ClientComponent);
+ * ReactOnRails.register({ ClientComponent: WrappedComponent });
+ * ```
+ */
+const wrapServerComponentRenderer = (componentOrRenderFunction: ReactComponentOrRenderFunction) => {
+  if (typeof componentOrRenderFunction !== 'function') {
+    throw new Error('wrapServerComponentRenderer: component is not a function');
+  }
+
+  const wrapper: RenderFunction = async (props, railsContext) => {
+    if (!railsContext) {
+      throw new Error('RSCClientRoot: No railsContext provided');
+    }
+
+    const Component = isRenderFunction(componentOrRenderFunction)
+      ? await componentOrRenderFunction(props, railsContext)
+      : componentOrRenderFunction;
+
+    if (typeof Component !== 'function') {
+      throw new Error('wrapServerComponentRenderer: component is not a function');
+    }
+
+    const RSCProvider = createRSCProvider({
+      railsContext,
+      getServerComponent: getReactServerComponent,
+    });
+
+    const suspensableServerComponent = (
+      <React.Suspense fallback={null}>
+        <Component {...props} />
+      </React.Suspense>
+    );
+
+    const root = <RSCProvider>{suspensableServerComponent}</RSCProvider>;
+
+    return () => root;
+  };
+
+  return wrapper;
+};
+
+export default wrapServerComponentRenderer;
diff --git a/node_package/tests/RSCClientRoot.test.jsx b/node_package/tests/RSCClientRoot.test.jsx
deleted file mode 100644
index b09d75f45..000000000
--- a/node_package/tests/RSCClientRoot.test.jsx
+++ /dev/null
@@ -1,152 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-
-// Mock webpack require system for RSC
-window.__webpack_require__ = jest.fn();
-window.__webpack_chunk_load__ = jest.fn();
-
-import { enableFetchMocks } from 'jest-fetch-mock';
-import { screen, act } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import * as path from 'path';
-import * as fs from 'fs';
-import { createNodeReadableStream, getNodeVersion } from './testUtils.js';
-
-import RSCClientRoot from '../src/RSCClientRoot.ts';
-
-enableFetchMocks();
-
-// React Server Components tests are compatible with React 19
-// That only run with node version 18 and above
-(getNodeVersion() >= 18 ? describe : describe.skip)('RSCClientRoot', () => {
-  let container;
-  const mockDomNodeId = 'test-container';
-
-  beforeEach(() => {
-    // Setup DOM element
-    container = document.createElement('div');
-    container.id = mockDomNodeId;
-    document.body.appendChild(container);
-    jest.clearAllMocks();
-
-    jest.resetModules();
-  });
-
-  afterEach(() => {
-    document.body.removeChild(container);
-  });
-
-  it('throws error when React.use is not defined', () => {
-    jest.mock('react', () => ({
-      ...jest.requireActual('react'),
-      use: undefined,
-    }));
-
-    expect(() => {
-      // Re-import to trigger the check
-      jest.requireActual('../src/RSCClientRoot.ts');
-    }).toThrow('React.use is not defined');
-  });
-
-  const mockRSCRequest = async (rscPayloadGenerationUrlPath = 'rsc-render') => {
-    const chunksDirectory = path.join(
-      __dirname,
-      'fixtures',
-      'rsc-payloads',
-      'simple-shell-with-async-component',
-    );
-    const chunk1 = JSON.parse(fs.readFileSync(path.join(chunksDirectory, 'chunk1.json'), 'utf8'));
-    const chunk2 = JSON.parse(fs.readFileSync(path.join(chunksDirectory, 'chunk2.json'), 'utf8'));
-
-    const { stream, push } = createNodeReadableStream();
-    window.fetchMock.mockResolvedValue(new Response(stream));
-
-    const props = {
-      componentName: 'TestComponent',
-      rscPayloadGenerationUrlPath,
-    };
-
-    // Execute the render
-    const render = () =>
-      act(async () => {
-        await RSCClientRoot(props, undefined, mockDomNodeId);
-      });
-
-    return {
-      render,
-      pushFirstChunk: () => push(`${JSON.stringify(chunk1)}\n`),
-      pushSecondChunk: () => push(`${JSON.stringify(chunk2)}\n`),
-      pushCustomChunk: (chunk) => push(`${chunk}\n`),
-      endStream: () => push(null),
-    };
-  };
-
-  it('renders component progressively', async () => {
-    const { render, pushFirstChunk, pushSecondChunk, endStream } = await mockRSCRequest();
-
-    expect(screen.queryByText('StaticServerComponent')).not.toBeInTheDocument();
-
-    await act(async () => {
-      pushFirstChunk();
-      render();
-    });
-    expect(window.fetch).toHaveBeenCalledWith('/rsc-render/TestComponent?props=undefined');
-    expect(window.fetch).toHaveBeenCalledTimes(1);
-    expect(screen.getByText('StaticServerComponent')).toBeInTheDocument();
-    expect(screen.getByText('Loading AsyncComponent...')).toBeInTheDocument();
-    expect(screen.queryByText('AsyncComponent')).not.toBeInTheDocument();
-
-    await act(async () => {
-      pushSecondChunk();
-      endStream();
-    });
-    expect(screen.getByText('AsyncComponent')).toBeInTheDocument();
-    expect(screen.queryByText('Loading AsyncComponent...')).not.toBeInTheDocument();
-  });
-
-  it('replays console logs', async () => {
-    const consoleSpy = jest.spyOn(console, 'log');
-    const { render, pushFirstChunk, pushSecondChunk, endStream } = await mockRSCRequest();
-
-    await act(async () => {
-      render();
-      pushFirstChunk();
-    });
-    expect(consoleSpy).toHaveBeenCalledWith(
-      expect.stringContaining('Console log at first chunk'),
-      expect.anything(),
-      expect.anything(),
-      expect.anything(),
-    );
-    expect(consoleSpy).toHaveBeenCalledTimes(1);
-
-    await act(async () => {
-      pushSecondChunk();
-    });
-    expect(consoleSpy).toHaveBeenCalledWith(
-      expect.stringContaining('Console log at second chunk'),
-      expect.anything(),
-      expect.anything(),
-      expect.anything(),
-    );
-    await act(async () => {
-      endStream();
-    });
-    expect(consoleSpy).toHaveBeenCalledTimes(2);
-  });
-
-  it('strips leading and trailing slashes from rscPayloadGenerationUrlPath', async () => {
-    const { render, pushFirstChunk, pushSecondChunk, endStream } = await mockRSCRequest('/rsc-render/');
-
-    await act(async () => {
-      render();
-      pushFirstChunk();
-      pushSecondChunk();
-      endStream();
-    });
-
-    expect(window.fetch).toHaveBeenCalledWith('/rsc-render/TestComponent?props=undefined');
-    expect(window.fetch).toHaveBeenCalledTimes(1);
-
-    expect(screen.getByText('StaticServerComponent')).toBeInTheDocument();
-  });
-});
diff --git a/node_package/tests/SuspenseHydration.test.tsx b/node_package/tests/SuspenseHydration.test.tsx
new file mode 100644
index 000000000..b25a9f4b7
--- /dev/null
+++ b/node_package/tests/SuspenseHydration.test.tsx
@@ -0,0 +1,210 @@
+import * as React from 'react';
+import { Suspense } from 'react';
+import { renderToReadableStream } from 'react-dom/server';
+import { hydrateRoot } from 'react-dom/client';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - TypeScript error can be ignored because:
+// 1. This test file is only executed when Node version >= 18
+// 2. The package is guaranteed to be available at runtime in Node 18+ environments
+import { screen, act, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { getNodeVersion } from './testUtils.js';
+
+/**
+ * Tests React's Suspense hydration behavior for async components
+ *
+ * This test verifies that async components are only hydrated on the client side after:
+ * 1. The component is rendered on the server
+ * 2. The rendered HTML is streamed to the client
+ *
+ * This behavior is critical for RSCRoute components, as they require their server-side
+ * RSC payload to be present in the page before client-side hydration can occur.
+ * And because the RSCRoute is rendered on the server because it's being hydrated on the client,
+ * we can sure that the RSC payload is present in the page before the RSCRoute is hydrated on the client.
+ * That's because `getRSCPayloadStream` function embeds the RSC payload immediately to the html stream even before the RSCRoute is rendered on the server.
+ * Without this guarantee, hydration would fail or produce incorrect results.
+ */
+
+const AsyncComponent = async ({
+  promise,
+  onRendered,
+}: {
+  promise: Promise<string>;
+  onRendered: () => void;
+}) => {
+  const result = await promise;
+  onRendered();
+  return <div>{result}</div>;
+};
+
+const AsyncComponentContainer = ({
+  onContainerRendered,
+  onAsyncComponentRendered,
+}: {
+  onContainerRendered: () => void;
+  onAsyncComponentRendered: () => void;
+}) => {
+  onContainerRendered();
+  const promise = new Promise<string>((resolve) => {
+    setTimeout(() => resolve('Hello World'), 0);
+  });
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <AsyncComponent promise={promise} onRendered={onAsyncComponentRendered} />
+    </Suspense>
+  );
+};
+
+// Function: appendHTMLWithScripts
+// ------------------------------
+// In a Jest/jsdom environment, scripts injected via innerHTML remain inert (they do not execute).
+// Even with runScripts: 'dangerously', jsdom will not auto-execute <script> tags inserted as strings.
+// This function addresses that by:
+//  1. Parsing the HTML string into a DocumentFragment via a <template> element.
+//  2. Locating each <script> node in the fragment (both inline and external).
+//  3. Re-creating a fresh <script> element for each found script, copying over all attributes
+//     (e.g., src, type, async, data-*, etc.) and inline code content.
+//  4. Replacing the inert original <script> with the new element, which the browser/jsdom will execute.
+//  5. Appending the entire fragment to the document in one operation, ensuring all non-script nodes
+//     and newly created scripts are inserted correctly.
+//
+// Use this helper whenever you need to dynamically inject HTML containing scripts in tests and
+// want to ensure those scripts run as they would in a real browser environment.
+function appendHTMLWithScripts(htmlString: string) {
+  const template = document.createElement('template');
+  template.innerHTML = htmlString;
+  const frag = template.content;
+
+  // re-create each <script> so it executes
+  frag.querySelectorAll('script').forEach((oldScript) => {
+    const newScript = document.createElement('script');
+    // copy attributes
+    for (const { name, value } of oldScript.attributes) {
+      newScript.setAttribute(name, value);
+    }
+    // copy inline code
+    newScript.textContent = oldScript.textContent;
+
+    // replace the inert one with the real one
+    oldScript.replaceWith(newScript);
+  });
+
+  // finally append everything in one go
+  document.body.appendChild(frag);
+}
+
+async function renderAndHydrate() {
+  // create container div element
+  const container = document.createElement('div');
+  container.id = 'container';
+  document.body.appendChild(container);
+
+  const onContainerRendered = jest.fn();
+  const onAsyncComponentRendered = jest.fn();
+  const stream = await renderToReadableStream(
+    <AsyncComponentContainer
+      onContainerRendered={onContainerRendered}
+      onAsyncComponentRendered={onAsyncComponentRendered}
+    />,
+  );
+
+  const onContainerHydrated = jest.fn();
+  const onAsyncComponentHydrated = jest.fn();
+  const hydrate = () =>
+    hydrateRoot(
+      container,
+      <AsyncComponentContainer
+        onContainerRendered={onContainerHydrated}
+        onAsyncComponentRendered={onAsyncComponentHydrated}
+      />,
+    );
+
+  const reader = stream.getReader();
+  const writeFirstChunk = async () => {
+    const result = await reader.read();
+    const decoded = new TextDecoder().decode(result.value as Buffer);
+    container.innerHTML = decoded;
+    return decoded;
+  };
+
+  const writeSecondChunk = async () => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    let { done, value } = await reader.read();
+    let decoded = '';
+    while (!done) {
+      decoded += new TextDecoder().decode(value as Buffer);
+      // eslint-disable-next-line no-await-in-loop, @typescript-eslint/no-unsafe-assignment
+      ({ done, value } = await reader.read());
+    }
+
+    appendHTMLWithScripts(decoded);
+    return decoded;
+  };
+
+  return {
+    onContainerRendered,
+    onAsyncComponentRendered,
+    onContainerHydrated,
+    onAsyncComponentHydrated,
+    writeFirstChunk,
+    writeSecondChunk,
+    hydrate,
+  };
+}
+
+// React Server Components tests are compatible with React 19
+// That only run with node version 18 and above
+(getNodeVersion() >= 18 ? describe : describe.skip)('RSCClientRoot', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    document.body.innerHTML = '';
+  });
+
+  it('hydrates the container when its content is written to the document', async () => {
+    const { onContainerHydrated, onAsyncComponentHydrated, writeFirstChunk, hydrate } =
+      await renderAndHydrate();
+
+    await act(async () => {
+      hydrate();
+      await writeFirstChunk();
+    });
+    await waitFor(() => {
+      expect(screen.queryByText('Loading...')).toBeInTheDocument();
+    });
+    expect(onContainerHydrated).toHaveBeenCalled();
+
+    // The async component is not hydrated until the second chunk is written to the document
+    await new Promise((resolve) => {
+      setTimeout(resolve, 1000);
+    });
+    expect(onAsyncComponentHydrated).not.toHaveBeenCalled();
+    expect(screen.queryByText('Loading...')).toBeInTheDocument();
+    expect(screen.queryByText('Hello World')).not.toBeInTheDocument();
+  });
+
+  it('hydrates the container when its content is written to the document', async () => {
+    const { writeFirstChunk, writeSecondChunk, onAsyncComponentHydrated, onContainerHydrated, hydrate } =
+      await renderAndHydrate();
+
+    await act(async () => {
+      hydrate();
+      await writeFirstChunk();
+    });
+    await waitFor(() => {
+      expect(screen.queryByText('Loading...')).toBeInTheDocument();
+    });
+
+    await act(async () => {
+      const secondChunk = await writeSecondChunk();
+      expect(secondChunk).toContain('script');
+      console.log(secondChunk);
+    });
+    await waitFor(() => {
+      expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+      expect(screen.queryByText('Hello World')).toBeInTheDocument();
+    });
+
+    expect(onContainerHydrated).toHaveBeenCalled();
+    expect(onAsyncComponentHydrated).toHaveBeenCalled();
+  });
+});
diff --git a/node_package/tests/injectRSCPayload.test.ts b/node_package/tests/injectRSCPayload.test.ts
new file mode 100644
index 000000000..c792d0320
--- /dev/null
+++ b/node_package/tests/injectRSCPayload.test.ts
@@ -0,0 +1,145 @@
+import { Readable, PassThrough } from 'stream';
+import ReactOnRails, { RailsContext } from '../src/ReactOnRails.node.ts';
+import injectRSCPayload from '../src/injectRSCPayload.ts';
+
+// Shared utilities
+const createMockStream = (chunks: (string | Buffer)[] | { [key: number]: string | string[] }) => {
+  if (Array.isArray(chunks)) {
+    return Readable.from(
+      chunks.map((chunk) => (typeof chunk === 'string' ? new TextEncoder().encode(chunk) : chunk)),
+    );
+  }
+  const passThrough = new PassThrough();
+  const entries = Object.entries(chunks);
+  const keysLength = entries.length;
+  entries.forEach(([delay, value], index) => {
+    setTimeout(() => {
+      const chunksArray = Array.isArray(value) ? value : [value];
+      chunksArray.forEach((chunk) => {
+        passThrough.push(new TextEncoder().encode(chunk));
+      });
+      if (index === keysLength - 1) {
+        passThrough.push(null);
+      }
+    }, +delay);
+  });
+  return passThrough;
+};
+
+const collectStreamData = async (stream: Readable) => {
+  const chunks: string[] = [];
+  for await (const chunk of stream) {
+    chunks.push(new TextDecoder().decode(chunk as Buffer));
+  }
+  return chunks.join('');
+};
+
+// Test setup helper
+const setupTest = (mockRSC: Readable) => {
+  jest.spyOn(ReactOnRails, 'onRSCPayloadGenerated').mockImplementation((_railsContext, callback) => {
+    callback({ stream: mockRSC, componentName: 'test', props: {} });
+  });
+
+  const railsContext = {
+    componentSpecificMetadata: {
+      renderRequestId: '123',
+    },
+  } as RailsContext;
+
+  return { railsContext };
+};
+
+describe('injectRSCPayload', () => {
+  it('should inject RSC payload as script tags', async () => {
+    const mockRSC = createMockStream(['{"test": "data"}']);
+    const mockHTML = createMockStream(['<html><body><div>Hello, world!</div></body></html>']);
+    const { railsContext } = setupTest(mockRSC);
+
+    const result = injectRSCPayload(mockHTML, railsContext);
+    const resultStr = await collectStreamData(result);
+
+    expect(resultStr).toContain(
+      `<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-123"]||=[]).push("{\\"test\\": \\"data\\"}")</script>`,
+    );
+  });
+
+  it('should handle multiple RSC payloads', async () => {
+    const mockRSC = createMockStream(['{"test": "data"}', '{"test": "data2"}']);
+    const mockHTML = createMockStream(['<html><body><div>Hello, world!</div></body></html>']);
+    const { railsContext } = setupTest(mockRSC);
+
+    const result = injectRSCPayload(mockHTML, railsContext);
+    const resultStr = await collectStreamData(result);
+
+    expect(resultStr).toContain(
+      `<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-123"]||=[]).push("{\\"test\\": \\"data\\"}")</script>`,
+    );
+    expect(resultStr).toContain(
+      `<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-123"]||=[]).push("{\\"test\\": \\"data2\\"}")</script>`,
+    );
+  });
+
+  it('should add all ready html chunks before adding RSC payloads', async () => {
+    const mockRSC = createMockStream(['{"test": "data"}', '{"test": "data2"}']);
+    const mockHTML = createMockStream([
+      '<html><body><div>Hello, world!</div></body></html>',
+      '<div>Next chunk</div>',
+    ]);
+    const { railsContext } = setupTest(mockRSC);
+
+    const result = injectRSCPayload(mockHTML, railsContext);
+    const resultStr = await collectStreamData(result);
+
+    expect(resultStr).toEqual(
+      '<html><body><div>Hello, world!</div></body></html>' +
+        '<div>Next chunk</div>' +
+        '<script>(self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-123"]||=[]</script>' +
+        '<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-123"]||=[]).push("{\\"test\\": \\"data\\"}")</script>' +
+        '<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-123"]||=[]).push("{\\"test\\": \\"data2\\"}")</script>',
+    );
+  });
+
+  it('adds delayed html chunks after RSC payloads', async () => {
+    const mockRSC = createMockStream(['{"test": "data"}', '{"test": "data2"}']);
+    const mockHTML = createMockStream({
+      0: '<html><body><div>Hello, world!</div></body></html>',
+      100: '<div>Next chunk</div>',
+    });
+    const { railsContext } = setupTest(mockRSC);
+
+    const result = injectRSCPayload(mockHTML, railsContext);
+    const resultStr = await collectStreamData(result);
+
+    expect(resultStr).toEqual(
+      '<html><body><div>Hello, world!</div></body></html>' +
+        '<script>(self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-123"]||=[]</script>' +
+        '<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-123"]||=[]).push("{\\"test\\": \\"data\\"}")</script>' +
+        '<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-123"]||=[]).push("{\\"test\\": \\"data2\\"}")</script>' +
+        '<div>Next chunk</div>',
+    );
+  });
+
+  it('handles the case when html is delayed', async () => {
+    const mockRSC = createMockStream({
+      0: '{"test": "data"}',
+      150: '{"test": "data2"}',
+    });
+    const mockHTML = createMockStream({
+      100: ['<html><body><div>Hello, world!</div></body></html>', '<div>Next chunk</div>'],
+      200: '<div>Third chunk</div>',
+    });
+    const { railsContext } = setupTest(mockRSC);
+
+    const result = injectRSCPayload(mockHTML, railsContext);
+    const resultStr = await collectStreamData(result);
+
+    expect(resultStr).toEqual(
+      '<html><body><div>Hello, world!</div></body></html>' +
+        '<div>Next chunk</div>' +
+        '<script>(self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-123"]||=[]</script>' +
+        '<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-123"]||=[]).push("{\\"test\\": \\"data\\"}")</script>' +
+        '<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-123"]||=[]).push("{\\"test\\": \\"data2\\"}")</script>' +
+        '<div>Third chunk</div>',
+    );
+  });
+});
diff --git a/node_package/tests/registerServerComponent.client.test.jsx b/node_package/tests/registerServerComponent.client.test.jsx
new file mode 100644
index 000000000..70a209fe1
--- /dev/null
+++ b/node_package/tests/registerServerComponent.client.test.jsx
@@ -0,0 +1,253 @@
+/* eslint-disable no-underscore-dangle */
+
+// Mock webpack require system for RSC
+window.__webpack_require__ = jest.fn();
+window.__webpack_chunk_load__ = jest.fn();
+
+import { enableFetchMocks } from 'jest-fetch-mock';
+import { screen, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import * as path from 'path';
+import * as fs from 'fs';
+import { createNodeReadableStream, getNodeVersion } from './testUtils.js';
+import ReactOnRails from '../src/ReactOnRails.client.ts';
+import registerServerComponent from '../src/registerServerComponent/client.tsx';
+import { clear as clearComponentRegistry } from '../src/ComponentRegistry.ts';
+
+enableFetchMocks();
+
+// React Server Components tests are compatible with React 19
+// That only run with node version 18 and above
+(getNodeVersion() >= 18 ? describe : describe.skip)('RSCClientRoot', () => {
+  let container;
+  const mockDomNodeId = 'test-container';
+
+  beforeEach(() => {
+    // Setup DOM element
+    clearComponentRegistry();
+    container = document.createElement('div');
+    container.id = mockDomNodeId;
+    document.body.appendChild(container);
+    jest.clearAllMocks();
+
+    jest.resetModules();
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  it('throws error when React.use is not defined', () => {
+    jest.mock('react', () => ({
+      ...jest.requireActual('react'),
+      use: undefined,
+    }));
+
+    expect(() => {
+      // Re-import to trigger the check
+      jest.requireActual('../src/wrapServerComponentRenderer/client.tsx');
+    }).toThrow('React.use is not defined');
+  });
+
+  const mockRSCRequest = async (rscPayloadGenerationUrlPath = 'rsc-render') => {
+    const chunksDirectory = path.join(
+      __dirname,
+      'fixtures',
+      'rsc-payloads',
+      'simple-shell-with-async-component',
+    );
+    const chunk1 = JSON.parse(fs.readFileSync(path.join(chunksDirectory, 'chunk1.json'), 'utf8'));
+    const chunk2 = JSON.parse(fs.readFileSync(path.join(chunksDirectory, 'chunk2.json'), 'utf8'));
+
+    const { stream, push } = createNodeReadableStream();
+    window.fetchMock.mockResolvedValue(new Response(stream));
+
+    registerServerComponent('TestComponent');
+    const railsContext = {
+      rscPayloadGenerationUrl: rscPayloadGenerationUrlPath,
+      componentSpecificMetadata: {
+        renderRequestId: 'test-render-request-id',
+      },
+    };
+
+    // Execute the render
+    const render = () =>
+      act(async () => {
+        const Component = ReactOnRails.getComponent('TestComponent');
+        await Component.component({}, railsContext, mockDomNodeId);
+      });
+
+    return {
+      render,
+      pushFirstChunk: () => push(`${JSON.stringify(chunk1)}\n`),
+      pushSecondChunk: () => push(`${JSON.stringify(chunk2)}\n`),
+      pushCustomChunk: (chunk) => push(`${chunk}\n`),
+      endStream: () => push(null),
+    };
+  };
+
+  it('renders component progressively', async () => {
+    const { render, pushFirstChunk, pushSecondChunk, endStream } = await mockRSCRequest();
+
+    expect(screen.queryByText('StaticServerComponent')).not.toBeInTheDocument();
+
+    await act(async () => {
+      pushFirstChunk();
+      render();
+    });
+    expect(window.fetch).toHaveBeenCalledWith('/rsc-render/TestComponent?props={}');
+    expect(window.fetch).toHaveBeenCalledTimes(1);
+    expect(screen.getByText('StaticServerComponent')).toBeInTheDocument();
+    expect(screen.getByText('Loading AsyncComponent...')).toBeInTheDocument();
+    expect(screen.queryByText('AsyncComponent')).not.toBeInTheDocument();
+
+    await act(async () => {
+      pushSecondChunk();
+      endStream();
+    });
+    expect(screen.getByText('AsyncComponent')).toBeInTheDocument();
+    expect(screen.queryByText('Loading AsyncComponent...')).not.toBeInTheDocument();
+  });
+
+  it('replays console logs', async () => {
+    const consoleSpy = jest.spyOn(console, 'log');
+    const { render, pushFirstChunk, pushSecondChunk, endStream } = await mockRSCRequest();
+
+    await act(async () => {
+      render();
+      pushFirstChunk();
+    });
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining('Console log at first chunk'),
+      expect.anything(),
+      expect.anything(),
+      expect.anything(),
+    );
+    expect(consoleSpy).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      pushSecondChunk();
+    });
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining('Console log at second chunk'),
+      expect.anything(),
+      expect.anything(),
+      expect.anything(),
+    );
+    await act(async () => {
+      endStream();
+    });
+    expect(consoleSpy).toHaveBeenCalledTimes(2);
+  });
+
+  it('strips leading and trailing slashes from rscPayloadGenerationUrlPath', async () => {
+    const { render, pushFirstChunk, pushSecondChunk, endStream } = await mockRSCRequest('/rsc-render/');
+
+    await act(async () => {
+      render();
+      pushFirstChunk();
+      pushSecondChunk();
+      endStream();
+    });
+
+    expect(window.fetch).toHaveBeenCalledWith('/rsc-render/TestComponent?props={}');
+    expect(window.fetch).toHaveBeenCalledTimes(1);
+
+    expect(screen.getByText('StaticServerComponent')).toBeInTheDocument();
+  });
+
+  describe('preloaded RSC payloads', () => {
+    let chunk1;
+    let chunk2;
+    let railsContext;
+
+    beforeEach(() => {
+      // Setup test fixtures
+      const chunksDirectory = path.join(
+        __dirname,
+        'fixtures',
+        'rsc-payloads',
+        'simple-shell-with-async-component',
+      );
+      chunk1 = JSON.stringify(JSON.parse(fs.readFileSync(path.join(chunksDirectory, 'chunk1.json'), 'utf8')));
+      chunk2 = JSON.stringify(JSON.parse(fs.readFileSync(path.join(chunksDirectory, 'chunk2.json'), 'utf8')));
+
+      registerServerComponent('TestComponent');
+      railsContext = {
+        rscPayloadGenerationUrl: 'rsc-render',
+        componentSpecificMetadata: {
+          renderRequestId: 'test-render-request-id',
+        },
+      };
+
+      // Cleanup any previous payload data
+      delete window.REACT_ON_RAILS_RSC_PAYLOADS;
+    });
+
+    afterEach(() => {
+      // Clean up
+      delete window.REACT_ON_RAILS_RSC_PAYLOADS;
+    });
+
+    it('uses preloaded RSC payloads without making a fetch request', async () => {
+      // Mock the global window.REACT_ON_RAILS_RSC_PAYLOADS
+      window.REACT_ON_RAILS_RSC_PAYLOADS = {
+        'TestComponent-{}-test-render-request-id': [`${chunk1}\n`, `${chunk2}\n`],
+      };
+
+      await act(async () => {
+        const Component = ReactOnRails.getComponent('TestComponent');
+        await Component.component({}, railsContext, mockDomNodeId);
+      });
+
+      // Verify no fetch request was made
+      expect(window.fetch).not.toHaveBeenCalled();
+
+      // Verify the component rendered correctly
+      expect(screen.getByText('StaticServerComponent')).toBeInTheDocument();
+      expect(screen.getByText('AsyncComponent')).toBeInTheDocument();
+      expect(screen.queryByText('Loading AsyncComponent...')).not.toBeInTheDocument();
+    });
+
+    it('renders progressively when additional chunks are pushed to preloaded RSC payloads', async () => {
+      // Mock document.readyState to be 'loading'
+      const originalReadyState = document.readyState;
+      Object.defineProperty(document, 'readyState', { value: 'loading', writable: true });
+
+      // Mock the global window.REACT_ON_RAILS_RSC_PAYLOADS with only the first chunk initially
+      window.REACT_ON_RAILS_RSC_PAYLOADS = {
+        'TestComponent-{}-test-render-request-id': [`${chunk1}\n`],
+      };
+
+      await act(async () => {
+        const Component = ReactOnRails.getComponent('TestComponent');
+        await Component.component({}, railsContext, mockDomNodeId);
+      });
+
+      // Verify no fetch request was made
+      expect(window.fetch).not.toHaveBeenCalled();
+
+      // After first chunk, StaticServerComponent should be visible but AsyncComponent should be loading
+      expect(screen.getByText('StaticServerComponent')).toBeInTheDocument();
+      expect(screen.getByText('Loading AsyncComponent...')).toBeInTheDocument();
+      expect(screen.queryByText('AsyncComponent')).not.toBeInTheDocument();
+
+      // Now push the second chunk to the preloaded array and set document to complete
+      await act(async () => {
+        window.REACT_ON_RAILS_RSC_PAYLOADS['TestComponent-{}-test-render-request-id'].push(`${chunk2}\n`);
+
+        // Set document.readyState to 'complete' and dispatch readystatechange event
+        Object.defineProperty(document, 'readyState', { value: 'complete', writable: true });
+        document.dispatchEvent(new Event('readystatechange'));
+        document.dispatchEvent(new Event('DOMContentLoaded'));
+      });
+
+      // After second chunk, AsyncComponent should now be visible and loading indicator gone
+      expect(screen.getByText('AsyncComponent')).toBeInTheDocument();
+      expect(screen.queryByText('Loading AsyncComponent...')).not.toBeInTheDocument();
+
+      // Restore original readyState
+      Object.defineProperty(document, 'readyState', { value: originalReadyState });
+    });
+  });
+});
diff --git a/node_package/tests/streamServerRenderedReactComponent.test.jsx b/node_package/tests/streamServerRenderedReactComponent.test.jsx
index 4384428c0..6a2065833 100644
--- a/node_package/tests/streamServerRenderedReactComponent.test.jsx
+++ b/node_package/tests/streamServerRenderedReactComponent.test.jsx
@@ -6,10 +6,11 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import streamServerRenderedReactComponent from '../src/streamServerRenderedReactComponent.ts';
 import * as ComponentRegistry from '../src/ComponentRegistry.ts';
+import ReactOnRails from '../src/ReactOnRails.node.ts';
 
 const AsyncContent = async ({ throwAsyncError }) => {
   await new Promise((resolve) => {
-    setTimeout(resolve, 0);
+    setTimeout(resolve, 10);
   });
   if (throwAsyncError) {
     throw new Error('Async Error');
@@ -64,21 +65,21 @@ describe('streamServerRenderedReactComponent', () => {
   } = {}) => {
     switch (componentType) {
       case 'reactComponent':
-        ComponentRegistry.register({ TestComponentForStreaming });
+        ReactOnRails.register({ TestComponentForStreaming });
         break;
       case 'renderFunction':
-        ComponentRegistry.register({
+        ReactOnRails.register({
           TestComponentForStreaming: (props, _railsContext) => () => <TestComponentForStreaming {...props} />,
         });
         break;
       case 'asyncRenderFunction':
-        ComponentRegistry.register({
+        ReactOnRails.register({
           TestComponentForStreaming: (props, _railsContext) => () =>
             Promise.resolve(<TestComponentForStreaming {...props} />),
         });
         break;
       case 'erroneousRenderFunction':
-        ComponentRegistry.register({
+        ReactOnRails.register({
           TestComponentForStreaming: (_props, _railsContext) => {
             // The error happen inside the render function itself not inside the returned React component
             throw new Error('Sync Error from render function');
@@ -86,7 +87,7 @@ describe('streamServerRenderedReactComponent', () => {
         });
         break;
       case 'erroneousAsyncRenderFunction':
-        ComponentRegistry.register({
+        ReactOnRails.register({
           TestComponentForStreaming: (_props, _railsContext) =>
             // The error happen inside the render function itself not inside the returned React component
             Promise.reject(new Error('Async Error from render function')),
@@ -101,6 +102,11 @@ describe('streamServerRenderedReactComponent', () => {
       trace: false,
       props: { throwSyncError, throwAsyncError },
       throwJsErrors,
+      railsContext: {
+        componentSpecificMetadata: {
+          renderRequestId: '123',
+        },
+      },
     });
 
     const chunks = [];
@@ -170,17 +176,19 @@ describe('streamServerRenderedReactComponent', () => {
     });
 
     expect(onError).toHaveBeenCalled();
-    expect(chunks.length).toBeGreaterThanOrEqual(2);
+    expect(chunks).toHaveLength(2);
     expect(chunks[0].html).toContain('Header In The Shell');
     expect(chunks[0].consoleReplayScript).toBe('');
-    expect(chunks[0].hasErrors).toBe(false);
     expect(chunks[0].isShellReady).toBe(true);
     // Script that fallbacks the render to client side
     expect(chunks[1].html).toMatch(/the server rendering errored:\\n\\nAsync Error/);
     expect(chunks[1].consoleReplayScript).toBe('');
-    expect(chunks[1].hasErrors).toBe(true);
     expect(chunks[1].isShellReady).toBe(true);
-  });
+
+    // One of the chunks should have a hasErrors property of true
+    expect(chunks[0].hasErrors || chunks[1].hasErrors).toBe(true);
+    expect(chunks[0].hasErrors && chunks[1].hasErrors).toBe(false);
+  }, 100000);
 
   it("doesn't emit an error if there is an error in the async content and throwJsErrors is false", async () => {
     const { renderResult, chunks } = setupStreamTest({ throwAsyncError: true, throwJsErrors: false });
@@ -194,13 +202,15 @@ describe('streamServerRenderedReactComponent', () => {
     expect(chunks.length).toBeGreaterThanOrEqual(2);
     expect(chunks[0].html).toContain('Header In The Shell');
     expect(chunks[0].consoleReplayScript).toBe('');
-    expect(chunks[0].hasErrors).toBe(false);
     expect(chunks[0].isShellReady).toBe(true);
     // Script that fallbacks the render to client side
     expect(chunks[1].html).toMatch(/the server rendering errored:\\n\\nAsync Error/);
     expect(chunks[1].consoleReplayScript).toBe('');
-    expect(chunks[1].hasErrors).toBe(true);
     expect(chunks[1].isShellReady).toBe(true);
+
+    // One of the chunks should have a hasErrors property of true
+    expect(chunks[0].hasErrors || chunks[1].hasErrors).toBe(true);
+    expect(chunks[0].hasErrors && chunks[1].hasErrors).toBe(false);
   });
 
   it.each(['asyncRenderFunction', 'renderFunction'])(
@@ -250,12 +260,14 @@ describe('streamServerRenderedReactComponent', () => {
       expect(chunks.length).toBeGreaterThanOrEqual(2);
       expect(chunks[0].html).toContain('Header In The Shell');
       expect(chunks[0].consoleReplayScript).toBe('');
-      expect(chunks[0].hasErrors).toBe(false);
       expect(chunks[0].isShellReady).toBe(true);
       expect(chunks[1].html).toMatch(/the server rendering errored:\\n\\nAsync Error/);
       expect(chunks[1].consoleReplayScript).toBe('');
-      expect(chunks[1].hasErrors).toBe(true);
       expect(chunks[1].isShellReady).toBe(true);
+
+      // One of the chunks should have a hasErrors property of true
+      expect(chunks[0].hasErrors || chunks[1].hasErrors).toBe(true);
+      expect(chunks[0].hasErrors && chunks[1].hasErrors).toBe(false);
     },
   );
 
@@ -308,13 +320,18 @@ describe('streamServerRenderedReactComponent', () => {
 
   it('streams a string from a Promise that resolves to a string', async () => {
     const StringPromiseComponent = () => Promise.resolve('<div>String from Promise</div>');
-    ComponentRegistry.register({ StringPromiseComponent });
+    ReactOnRails.register({ StringPromiseComponent });
 
     const renderResult = streamServerRenderedReactComponent({
       name: 'StringPromiseComponent',
       domNodeId: 'stringPromiseId',
       trace: false,
       throwJsErrors: false,
+      railsContext: {
+        componentSpecificMetadata: {
+          renderRequestId: '123',
+        },
+      },
     });
 
     const chunks = [];
diff --git a/package.json b/package.json
index 2e4e5a9ed..9b4b1a7f2 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,13 @@
     "./registerServerComponent/server": {
       "react-server": "./node_package/lib/registerServerComponent/server.rsc.js",
       "default": "./node_package/lib/registerServerComponent/server.js"
-    }
+    },
+    "./wrapServerComponentRenderer/client": "./node_package/lib/wrapServerComponentRenderer/client.js",
+    "./wrapServerComponentRenderer/server": {
+      "react-server": "./node_package/lib/wrapServerComponentRenderer/server.rsc.js",
+      "default": "./node_package/lib/wrapServerComponentRenderer/server.js"
+    },
+    "./RSCRoute": "./node_package/lib/RSCRoute.js"
   },
   "directories": {
     "doc": "docs"
diff --git a/spec/dummy/client/app/components/RailsContext.jsx b/spec/dummy/client/app/components/RailsContext.jsx
index acfb01a41..83568b840 100644
--- a/spec/dummy/client/app/components/RailsContext.jsx
+++ b/spec/dummy/client/app/components/RailsContext.jsx
@@ -7,7 +7,7 @@ function renderContextRows(railsContext) {
   return _.transform(
     railsContext,
     (accum, value, key) => {
-      if (key !== 'serverSide') {
+      if (key !== 'serverSide' && key !== 'componentSpecificMetadata') {
         const className = `js-${key}`;
         accum.push(
           <tr key={className}>
diff --git a/spec/dummy/spec/helpers/react_on_rails_helper_spec.rb b/spec/dummy/spec/helpers/react_on_rails_helper_spec.rb
index b1e9f7d29..6aa1544b2 100644
--- a/spec/dummy/spec/helpers/react_on_rails_helper_spec.rb
+++ b/spec/dummy/spec/helpers/react_on_rails_helper_spec.rb
@@ -21,6 +21,8 @@ class PlainReactOnRailsHelper
         { "HTTP_ACCEPT_LANGUAGE" => "en" }
       )
     }
+
+    allow(ReactOnRails::ReactComponent::RenderOptions).to receive(:generate_request_id).and_return("123")
   end
 
   let(:hash) do
@@ -195,7 +197,7 @@ def helper.append_javascript_pack_tag(name, **options)
         <script type="application/json" class="js-react-on-rails-component" \
         id="js-react-on-rails-component-App-react-component" \
         data-component-name="App" data-dom-id="App-react-component"
-        data-force-load="true">{"name":"My Test Name"}</script>
+        data-force-load="true" data-render-request-id="123">{"name":"My Test Name"}</script>
       SCRIPT
     end
 
@@ -204,7 +206,7 @@ def helper.append_javascript_pack_tag(name, **options)
         <script type="application/json" class="js-react-on-rails-component" \
         id="js-react-on-rails-component-App-react-component" \
         data-component-name="App" data-dom-id="App-react-component"
-        data-force-load="true">{}</script>
+        data-force-load="true" data-render-request-id="123">{}</script>
       SCRIPT
     end
 
@@ -253,7 +255,7 @@ def helper.append_javascript_pack_tag(name, **options)
           <script type="application/json" class="js-react-on-rails-component" \
           id="js-react-on-rails-component-App-react-component" \
           data-component-name="App" data-dom-id="App-react-component"
-          data-force-load="true">{"name":"My Test Name"}</script>
+          data-force-load="true" data-render-request-id="123">{"name":"My Test Name"}</script>
         SCRIPT
       end
 
@@ -269,7 +271,7 @@ def helper.append_javascript_pack_tag(name, **options)
           <script type="application/json" class="js-react-on-rails-component" \
           id="js-react-on-rails-component-App-react-component-0" \
           data-component-name="App" data-dom-id="App-react-component-0"
-          data-force-load="true">{"name":"My Test Name"}</script>
+          data-force-load="true" data-render-request-id="123">{"name":"My Test Name"}</script>
         SCRIPT
       end
 
@@ -291,7 +293,7 @@ def helper.append_javascript_pack_tag(name, **options)
           <script type="application/json" class="js-react-on-rails-component" \
           id="js-react-on-rails-component-App-react-component" \
           data-component-name="App" data-dom-id="App-react-component"
-          data-force-load="true">{"name":"My Test Name"}</script>
+          data-force-load="true" data-render-request-id="123">{"name":"My Test Name"}</script>
         SCRIPT
       end
 
@@ -309,7 +311,7 @@ def helper.append_javascript_pack_tag(name, **options)
           <script type="application/json" class="js-react-on-rails-component" \
           id="js-react-on-rails-component-shaka_div" \
           data-component-name="App" data-dom-id="shaka_div"
-          data-force-load="true">{"name":"My Test Name"}</script>
+          data-force-load="true" data-render-request-id="123">{"name":"My Test Name"}</script>
         SCRIPT
       end
 
diff --git a/spec/dummy/spec/packs_generator_spec.rb b/spec/dummy/spec/packs_generator_spec.rb
index 29331470a..6322c2d97 100644
--- a/spec/dummy/spec/packs_generator_spec.rb
+++ b/spec/dummy/spec/packs_generator_spec.rb
@@ -24,7 +24,7 @@ module ReactOnRails
     before do
       stub_const("ReactOnRailsPro", Class.new do
         def self.configuration
-          @configuration ||= Struct.new(:enable_rsc_support, :rsc_payload_generation_url_path).new(false, nil)
+          @configuration ||= Struct.new(:enable_rsc_support).new(false)
         end
       end)
       ReactOnRails.configuration.server_bundle_js_file = server_bundle_js_file
@@ -216,15 +216,13 @@ def self.configuration
 
     context "when RSC support is enabled" do
       let(:components_directory) { "ReactServerComponents" }
-      let(:rsc_payload_generation_url_path) { "/rsc" }
 
       before do
         stub_packer_source_path(component_name: components_directory,
                                 packer_source_path: packer_source_path)
         allow(ReactOnRails::Utils).to receive(:react_on_rails_pro?).and_return(true)
         allow(ReactOnRailsPro.configuration).to receive_messages(
-          enable_rsc_support: true,
-          rsc_payload_generation_url_path: rsc_payload_generation_url_path
+          enable_rsc_support: true
         )
       end
 
@@ -240,9 +238,7 @@ def self.configuration
           expected_content = <<~CONTENT.strip
             import registerServerComponent from 'react-on-rails/registerServerComponent/client';
 
-            registerServerComponent({
-              rscPayloadGenerationUrlPath: "#{rsc_payload_generation_url_path}",
-            }, "#{component_name}")
+            registerServerComponent("#{component_name}");
           CONTENT
 
           expect(pack_content).to eq(expected_content)
@@ -276,9 +272,7 @@ def self.configuration
           expected_content = <<~CONTENT.strip
             import registerServerComponent from 'react-on-rails/registerServerComponent/client';
 
-            registerServerComponent({
-              rscPayloadGenerationUrlPath: "#{rsc_payload_generation_url_path}",
-            }, "#{component_name}")
+            registerServerComponent("#{component_name}");
           CONTENT
 
           expect(pack_content).to eq(expected_content)
diff --git a/spec/react_on_rails/configuration_spec.rb b/spec/react_on_rails/configuration_spec.rb
index 1c53b8041..d4d2bec7b 100644
--- a/spec/react_on_rails/configuration_spec.rb
+++ b/spec/react_on_rails/configuration_spec.rb
@@ -224,6 +224,103 @@ module ReactOnRails
       end
     end
 
+    describe "RSC configuration options" do
+      it "has default values for RSC-related configuration options" do
+        ReactOnRails.configure {} # rubocop:disable Lint/EmptyBlock
+
+        expect(ReactOnRails.configuration.rsc_bundle_js_file).to eq("")
+        expect(ReactOnRails.configuration.react_client_manifest_file).to eq("react-client-manifest.json")
+        expect(ReactOnRails.configuration.react_server_client_manifest_file).to eq("react-server-client-manifest.json")
+      end
+
+      it "allows setting rsc_bundle_js_file" do
+        ReactOnRails.configure do |config|
+          config.rsc_bundle_js_file = "custom-rsc-bundle.js"
+        end
+
+        expect(ReactOnRails.configuration.rsc_bundle_js_file).to eq("custom-rsc-bundle.js")
+      end
+
+      it "allows setting react_client_manifest_file" do
+        ReactOnRails.configure do |config|
+          config.react_client_manifest_file = "custom-client-manifest.json"
+        end
+
+        expect(ReactOnRails.configuration.react_client_manifest_file).to eq("custom-client-manifest.json")
+      end
+
+      it "allows setting react_server_client_manifest_file" do
+        ReactOnRails.configure do |config|
+          config.react_server_client_manifest_file = "custom-server-client-manifest.json"
+        end
+
+        expect(ReactOnRails.configuration.react_server_client_manifest_file).to eq("custom-server-client-manifest.json")
+      end
+
+      it "includes rsc files in webpack_generated_files when not blank" do
+        ReactOnRails.configure do |config|
+          config.rsc_bundle_js_file = "rsc-bundle.js"
+          config.webpack_generated_files = []
+        end
+
+        expect(ReactOnRails.configuration.webpack_generated_files).to include("rsc-bundle.js")
+      end
+
+      it "includes client manifest in webpack_generated_files" do
+        ReactOnRails.configure do |config|
+          config.react_client_manifest_file = "custom-client-manifest.json"
+          config.webpack_generated_files = []
+        end
+
+        expect(ReactOnRails.configuration.webpack_generated_files).to include("custom-client-manifest.json")
+      end
+
+      it "includes server-client manifest in webpack_generated_files" do
+        ReactOnRails.configure do |config|
+          config.react_server_client_manifest_file = "custom-server-client-manifest.json"
+          config.webpack_generated_files = []
+        end
+
+        expect(ReactOnRails.configuration.webpack_generated_files).to include("custom-server-client-manifest.json")
+      end
+
+      it "configures all RSC options together for a typical RSC setup" do
+        ReactOnRails.configure do |config|
+          config.rsc_bundle_js_file = "rsc-bundle.js"
+          config.react_client_manifest_file = "client-manifest.json"
+          config.react_server_client_manifest_file = "server-client-manifest.json"
+          config.webpack_generated_files = []
+        end
+
+        expect(ReactOnRails.configuration.rsc_bundle_js_file).to eq("rsc-bundle.js")
+        expect(ReactOnRails.configuration.react_client_manifest_file).to eq("client-manifest.json")
+        expect(ReactOnRails.configuration.react_server_client_manifest_file).to eq("server-client-manifest.json")
+
+        # All RSC files should be included in webpack_generated_files
+        expect(ReactOnRails.configuration.webpack_generated_files).to include("rsc-bundle.js")
+        expect(ReactOnRails.configuration.webpack_generated_files).to include("client-manifest.json")
+        expect(ReactOnRails.configuration.webpack_generated_files).to include("server-client-manifest.json")
+      end
+
+      it "allows nil values for RSC configuration options" do
+        ReactOnRails.configure do |config|
+          config.rsc_bundle_js_file = nil
+          config.react_client_manifest_file = nil
+          config.react_server_client_manifest_file = nil
+          config.webpack_generated_files = []
+        end
+
+        expect(ReactOnRails.configuration.rsc_bundle_js_file).to be_nil
+        expect(ReactOnRails.configuration.react_client_manifest_file).to be_nil
+        expect(ReactOnRails.configuration.react_server_client_manifest_file).to be_nil
+
+        # Nil values should not be included in webpack_generated_files
+        expect(ReactOnRails.configuration.webpack_generated_files).not_to include(nil)
+        # Only manifest.json should be in the list by default
+        expect(ReactOnRails.configuration.webpack_generated_files).to eq(["manifest.json"])
+      end
+    end
+
     it "changes the configuration of the gem, such as setting the prerender option to false" do
       ReactOnRails.configure do |config|
         config.server_bundle_js_file = "server.js"
diff --git a/spec/react_on_rails/utils_spec.rb b/spec/react_on_rails/utils_spec.rb
index 98fe24a50..226bdd2fc 100644
--- a/spec/react_on_rails/utils_spec.rb
+++ b/spec/react_on_rails/utils_spec.rb
@@ -577,6 +577,97 @@ def mock_dev_server_running
         end
       end
     end
+
+    describe ".react_server_client_manifest_file_path" do
+      before do
+        described_class.instance_variable_set(:@react_server_manifest_path, nil)
+        allow(ReactOnRails.configuration).to receive(:react_server_client_manifest_file)
+          .and_return("react-server-client-manifest.json")
+        allow(Rails.env).to receive(:development?).and_return(false)
+      end
+
+      after do
+        described_class.instance_variable_set(:@react_server_manifest_path, nil)
+      end
+
+      context "when in development environment" do
+        before do
+          allow(Rails.env).to receive(:development?).and_return(true)
+          allow(described_class).to receive(:generated_assets_full_path)
+            .and_return("/path/to/generated/assets")
+        end
+
+        it "does not use cached path" do
+          # Call once to potentially set the cached path
+          described_class.react_server_client_manifest_file_path
+
+          # Change the configuration value
+          allow(ReactOnRails.configuration).to receive(:react_server_client_manifest_file)
+            .and_return("changed-manifest.json")
+
+          # Should use the new value
+          expect(described_class.react_server_client_manifest_file_path)
+            .to eq("/path/to/generated/assets/changed-manifest.json")
+        end
+      end
+
+      context "when not in development environment" do
+        before do
+          allow(described_class).to receive(:generated_assets_full_path)
+            .and_return("/path/to/generated/assets")
+        end
+
+        it "caches the path" do
+          # Call once to set the cached path
+          expected_path = "/path/to/generated/assets/react-server-client-manifest.json"
+          expect(described_class.react_server_client_manifest_file_path).to eq(expected_path)
+
+          # Change the configuration value
+          allow(ReactOnRails.configuration).to receive(:react_server_client_manifest_file)
+            .and_return("changed-manifest.json")
+
+          # Should still use the cached path
+          expect(described_class.react_server_client_manifest_file_path).to eq(expected_path)
+        end
+      end
+
+      context "with different manifest file names" do
+        before do
+          allow(described_class).to receive(:generated_assets_full_path)
+            .and_return("/path/to/generated/assets")
+        end
+
+        it "returns the correct path for default manifest name" do
+          allow(ReactOnRails.configuration).to receive(:react_server_client_manifest_file)
+            .and_return("react-server-client-manifest.json")
+
+          expect(described_class.react_server_client_manifest_file_path)
+            .to eq("/path/to/generated/assets/react-server-client-manifest.json")
+        end
+
+        it "returns the correct path for custom manifest name" do
+          allow(ReactOnRails.configuration).to receive(:react_server_client_manifest_file)
+            .and_return("custom-server-client-manifest.json")
+
+          expect(described_class.react_server_client_manifest_file_path)
+            .to eq("/path/to/generated/assets/custom-server-client-manifest.json")
+        end
+      end
+
+      context "with nil manifest file name" do
+        before do
+          allow(ReactOnRails.configuration).to receive(:react_server_client_manifest_file)
+            .and_return(nil)
+          allow(described_class).to receive(:generated_assets_full_path)
+            .and_return("/path/to/generated/assets")
+        end
+
+        it "raises an error when the manifest file name is nil" do
+          expect { described_class.react_server_client_manifest_file_path }
+            .to raise_error(ReactOnRails::Error, /react_server_client_manifest_file is nil/)
+        end
+      end
+    end
   end
 end
 # rubocop:enable Metrics/ModuleLength, Metrics/BlockLength