[WIP] Use RSC payload to render server components on server

knip.ts

@@ -9,6 +9,7 @@ const config: KnipConfig = {
         'node_package/src/ReactOnRailsRSC.ts!',
         'node_package/src/registerServerComponent/client.ts!',
         'node_package/src/registerServerComponent/server.ts!',
+        'node_package/src/registerServerComponent/server.rsc.ts!',
         'node_package/src/RSCClientRoot.ts!',
         'eslint.config.ts',
       ],

lib/react_on_rails/configuration.rb

@@ -10,6 +10,7 @@ def self.configure
 
   DEFAULT_GENERATED_ASSETS_DIR = File.join(%w[public webpack], Rails.env).freeze
   DEFAULT_REACT_CLIENT_MANIFEST_FILE = "react-client-manifest.json"
+  DEFAULT_REACT_SERVER_CLIENT_MANIFEST_FILE = "react-server-client-manifest.json"
   DEFAULT_COMPONENT_REGISTRY_TIMEOUT = 5000
 
   def self.configuration
@@ -21,6 +22,7 @@ def self.configuration
       server_bundle_js_file: "",
       rsc_bundle_js_file: "",
       react_client_manifest_file: DEFAULT_REACT_CLIENT_MANIFEST_FILE,
+      react_server_client_manifest_file: DEFAULT_REACT_SERVER_CLIENT_MANIFEST_FILE,
       prerender: false,
       auto_load_bundle: false,
       replay_console: true,
@@ -66,7 +68,7 @@ class Configuration
                   :same_bundle_for_client_and_server, :rendering_props_extension,
                   :make_generated_server_bundle_the_entrypoint,
                   :generated_component_packs_loading_strategy, :force_load, :rsc_bundle_js_file,
-                  :react_client_manifest_file, :component_registry_timeout
+                  :react_client_manifest_file, :react_server_client_manifest_file, :component_registry_timeout
 
     # rubocop:disable Metrics/AbcSize
     def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender: nil,
@@ -82,7 +84,8 @@ def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender
                    i18n_dir: nil, i18n_yml_dir: nil, i18n_output_format: nil, i18n_yml_safe_load_options: nil,
                    random_dom_id: nil, server_render_method: nil, rendering_props_extension: nil,
                    components_subdirectory: nil, auto_load_bundle: nil, force_load: nil,
-                   rsc_bundle_js_file: nil, react_client_manifest_file: nil, component_registry_timeout: nil)
+                   rsc_bundle_js_file: nil, react_client_manifest_file: nil, react_server_client_manifest_file: nil,
+                   component_registry_timeout: nil)
       self.node_modules_location = node_modules_location.present? ? node_modules_location : Rails.root
       self.generated_assets_dirs = generated_assets_dirs
       self.generated_assets_dir = generated_assets_dir
@@ -112,6 +115,7 @@ def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender
       self.server_bundle_js_file = server_bundle_js_file
       self.rsc_bundle_js_file = rsc_bundle_js_file
       self.react_client_manifest_file = react_client_manifest_file
+      self.react_server_client_manifest_file = react_server_client_manifest_file
       self.same_bundle_for_client_and_server = same_bundle_for_client_and_server
       self.server_renderer_pool_size = self.development_mode ? 1 : server_renderer_pool_size
       self.server_renderer_timeout = server_renderer_timeout # seconds
@@ -301,12 +305,13 @@ def configure_generated_assets_dirs_deprecation
     def ensure_webpack_generated_files_exists
       return unless webpack_generated_files.empty?
 
-      self.webpack_generated_files = [
-        "manifest.json",
-        server_bundle_js_file,
-        rsc_bundle_js_file,
-        react_client_manifest_file
-      ].compact_blank
+      files = ["manifest.json"]
+      files << server_bundle_js_file if server_bundle_js_file.present?
+      files << rsc_bundle_js_file if rsc_bundle_js_file.present?
+      files << react_client_manifest_file if react_client_manifest_file.present?
+      files << react_server_client_manifest_file if react_server_client_manifest_file.present?
+
+      self.webpack_generated_files = files
     end
 
     def configure_skip_display_none_deprecation

lib/react_on_rails/helper.rb

@@ -358,10 +358,14 @@ def json_safe_and_pretty(hash_or_string)
     # second parameter passed to both component and store Render-Functions.
     # This method can be called from views and from the controller, as `helpers.rails_context`
     #
-    # rubocop:disable Metrics/AbcSize, Metrics/CyclomaticComplexity
+    # rubocop:disable Metrics/AbcSize, Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
     def rails_context(server_side: true)
       # ALERT: Keep in sync with node_package/src/types/index.ts for the properties of RailsContext
       @rails_context ||= begin
+        rsc_url = if ReactOnRails::Utils.react_on_rails_pro?
+                    ReactOnRailsPro.configuration.rsc_payload_generation_url_path
+                  end
+
         result = {
           componentRegistryTimeout: ReactOnRails.configuration.component_registry_timeout,
           railsEnv: Rails.env,
@@ -373,8 +377,11 @@ def rails_context(server_side: true)
           # TODO: v13 just use the version if existing
           rorPro: ReactOnRails::Utils.react_on_rails_pro?
         }
+
         if ReactOnRails::Utils.react_on_rails_pro?
           result[:rorProVersion] = ReactOnRails::Utils.react_on_rails_pro_version
+
+          result[:rscPayloadGenerationUrl] = rsc_url if ReactOnRailsPro.configuration.enable_rsc_support
         end
 
         if defined?(request) && request.present?
@@ -432,7 +439,7 @@ def load_pack_for_generated_component(react_component_name, render_options)
       append_stylesheet_pack_tag("generated/#{react_component_name}")
     end
 
-    # rubocop:enable Metrics/AbcSize, Metrics/CyclomaticComplexity
+    # rubocop:enable Metrics/AbcSize, Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
 
     private
 

lib/react_on_rails/test_helper/webpack_assets_status_checker.rb

@@ -52,6 +52,8 @@ def all_compiled_assets
           webpack_generated_files = @webpack_generated_files.map do |bundle_name|
             if bundle_name == ReactOnRails.configuration.react_client_manifest_file
               ReactOnRails::Utils.react_client_manifest_file_path
+            elsif bundle_name == ReactOnRails.configuration.react_server_client_manifest_file
+              ReactOnRails::Utils.react_server_client_manifest_file_path
             else
               ReactOnRails::Utils.bundle_js_file_path(bundle_name)
             end

lib/react_on_rails/utils.rb

@@ -122,6 +122,15 @@ def self.react_client_manifest_file_path
                                     end
     end
 
+    # React Server Manifest is generated by the server bundle.
+    # So, it will never be served from the dev server.
+    def self.react_server_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
+      @react_server_manifest_path = File.join(generated_assets_full_path, asset_name)
+    end
+
     def self.running_on_windows?
       (/cygwin|mswin|mingw|bccwin|wince|emx/ =~ RUBY_PLATFORM) != nil
     end

node_package/src/RSCClientRoot.ts

@@ -1,18 +1,26 @@
 'use client';
 
+/* eslint-disable no-underscore-dangle */
+
 import * as React from 'react';
 import * as ReactDOMClient from 'react-dom/client';
 import { createFromReadableStream } from 'react-on-rails-rsc/client';
 import { fetch } from './utils';
 import transformRSCStreamAndReplayConsoleLogs from './transformRSCStreamAndReplayConsoleLogs';
-import { RailsContext, RenderFunction } from './types';
+import { RailsContext, RenderFunction, RSCPayloadChunk } from './types';
 
 const { use } = React;
 
 if (typeof use !== 'function') {
   throw new Error('React.use is not defined. Please ensure you are using React 19 to use server components.');
 }
 
+declare global {
+  interface Window {
+    __FLIGHT_DATA: unknown[];
+  }
+}
+
 export type RSCClientRootProps = {
   componentName: string;
   rscPayloadGenerationUrlPath: string;
@@ -35,6 +43,45 @@ const fetchRSC = ({ componentName, rscPayloadGenerationUrlPath, componentProps }
   return createFromFetch(fetch(`/${strippedUrlPath}/${componentName}?props=${propsString}`));
 };
 
+const createRSCStreamFromPage = () => {
+  let streamController: ReadableStreamController<RSCPayloadChunk> | undefined;
+  const stream = new ReadableStream<RSCPayloadChunk>({
+    start(controller) {
+      if (typeof window === 'undefined') {
+        return;
+      }
+      const handleChunk = (chunk: unknown) => {
+        controller.enqueue(chunk as RSCPayloadChunk);
+      };
+      if (!window.__FLIGHT_DATA) {
+        window.__FLIGHT_DATA = [];
+      }
+      window.__FLIGHT_DATA.forEach(handleChunk);
+      window.__FLIGHT_DATA.push = (...chunks: unknown[]) => {
+        chunks.forEach(handleChunk);
+        return chunks.length;
+      };
+      streamController = controller;
+    },
+  });
+
+  if (typeof document !== 'undefined' && document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+      streamController?.close();
+    });
+  } else {
+    streamController?.close();
+  }
+
+  return stream;
+};
+
+const createFromRSCStream = () => {
+  const stream = createRSCStreamFromPage();
+  const transformedStream = transformRSCStreamAndReplayConsoleLogs(stream);
+  return createFromReadableStream<React.ReactNode>(transformedStream);
+};
+
 /**
  * RSCClientRoot is a React component that handles client-side rendering of React Server Components (RSC).
  * It manages the fetching, caching, and rendering of RSC payloads from the server.
@@ -53,7 +100,6 @@ const RSCClientRoot: RenderFunction = async (
   _railsContext?: RailsContext,
   domNodeId?: string,
 ) => {
-  const root = await fetchRSC({ componentName, rscPayloadGenerationUrlPath, componentProps });
   if (!domNodeId) {
     throw new Error('RSCClientRoot: No domNodeId provided');
   }
@@ -62,8 +108,10 @@ const RSCClientRoot: RenderFunction = async (
     throw new Error(`RSCClientRoot: No DOM node found for id: ${domNodeId}`);
   }
   if (domNode.innerHTML) {
+    const root = await createFromRSCStream();
     ReactDOMClient.hydrateRoot(domNode, root);
   } else {
+    const root = await fetchRSC({ componentName, rscPayloadGenerationUrlPath, componentProps });
     ReactDOMClient.createRoot(domNode).render(root);
   }
   // Added only to satisfy the return type of RenderFunction

node_package/src/RSCPayloadContainer.ts

@@ -0,0 +1,99 @@
+import * as React from 'react';
+
+type StreamChunk = {
+  chunk: string;
+  isLastChunk: boolean;
+};
+
+type RSCPayloadContainerProps = {
+  RSCPayloadStream: NodeJS.ReadableStream;
+};
+
+type RSCPayloadContainerInnerProps = {
+  chunkIndex: number;
+  getChunkPromise: (chunkIndex: number) => Promise<StreamChunk>;
+};
+
+function escapeScript(script: string) {
+  return script.replace(/<!--/g, '<\\!--').replace(/<\/(script)/gi, '</\\$1');
+}
+
+const RSCPayloadContainer = ({
+  chunkIndex,
+  getChunkPromise,
+}: RSCPayloadContainerInnerProps): React.ReactNode => {
+  const chunkPromise = getChunkPromise(chunkIndex);
+  const chunk = React.use(chunkPromise);
+
+  const scriptElement = React.createElement('script', {
+    dangerouslySetInnerHTML: {
+      __html: escapeScript(`(self.__FLIGHT_DATA||=[]).push(${chunk.chunk})`),
+    },
+    key: `script-${chunkIndex}`,
+  });
+
+  if (chunk.isLastChunk) {
+    return scriptElement;
+  }
+
+  return React.createElement(React.Fragment, null, [
+    scriptElement,
+    React.createElement(
+      React.Suspense,
+      { fallback: null, key: `suspense-${chunkIndex}` },
+      React.createElement(RSCPayloadContainer, { chunkIndex: chunkIndex + 1, getChunkPromise }),
+    ),
+  ]);
+};
+
+export default function RSCPayloadContainerWrapper({ RSCPayloadStream }: RSCPayloadContainerProps) {
+  const [chunkPromises] = React.useState<Promise<StreamChunk>[]>(() => {
+    const promises: Promise<StreamChunk>[] = [];
+    let resolveCurrentPromise: (streamChunk: StreamChunk) => void = () => {};
+    let rejectCurrentPromise: (error: 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.createElement(
+    React.Suspense,
+    { fallback: null },
+    React.createElement(RSCPayloadContainer, { chunkIndex: 0, getChunkPromise }),
+  );
+}