use rsc payload to render server components on server

AbanoubGhadban · AbanoubGhadban · commit 746631cbddf7 · 2025-02-10T19:43:31.000+02:00
diff --git a/lib/react_on_rails_pro/request.rb b/lib/react_on_rails_pro/request.rb
@@ -26,18 +26,9 @@ def render_code_as_stream(path, js_code, is_rsc:)
         end
       end
 
-      # TODO: add support for uploading rsc assets
       def upload_assets
         Rails.logger.info { "[ReactOnRailsPro] Uploading assets" }
         perform_request("/upload-assets", form: form_with_assets_and_bundle)
-
-        return unless ReactOnRailsPro.configuration.enable_rsc_support
-
-        perform_request("/upload-assets", form: form_with_assets_and_bundle(is_rsc: true))
-        # Explicitly return nil to ensure consistent return value regardless of whether
-        # enable_rsc_support is true or false. Without this, the method would return nil
-        # when RSC is disabled but return the response object when RSC is enabled.
-        nil
       end
 
       def asset_exists_on_vm_renderer?(filename)
@@ -116,39 +107,52 @@ def perform_request(path, **post_options) # rubocop:disable Metrics/AbcSize,Metr
       def form_with_code(js_code, send_bundle, is_rsc:)
         form = common_form_data
         form["renderingRequest"] = js_code
-        populate_form_with_bundle_and_assets(form, is_rsc: is_rsc, check_bundle: false) if send_bundle
+        unless is_rsc
+          pool = ReactOnRailsPro::ServerRenderingPool::NodeRenderingPool
+          form["rscBundleTimestamp"] = pool.rsc_bundle_hash
+        end
+        populate_form_with_bundle_and_assets(form, check_bundle: false) if send_bundle
         form
       end
 
-      def populate_form_with_bundle_and_assets(form, is_rsc:, check_bundle:)
-        server_bundle_path = if is_rsc
-                               ReactOnRails::Utils.rsc_bundle_js_file_path
-                             else
-                               ReactOnRails::Utils.server_bundle_js_file_path
-                             end
+      def populate_form_with_bundle_and_assets(form, check_bundle:)
+        server_bundle_path = ReactOnRails::Utils.server_bundle_js_file_path
+        rsc_support_enabled = ReactOnRailsPro.configuration.enable_rsc_support
+        rsc_bundle_path = ReactOnRails::Utils.rsc_bundle_js_file_path
+
         if check_bundle && !File.exist?(server_bundle_path)
           raise ReactOnRailsPro::Error, "Bundle not found #{server_bundle_path}"
         end
 
+        if check_bundle && rsc_support_enabled && !File.exist?(rsc_bundle_path)
+          raise ReactOnRailsPro::Error, "RSC bundle not found #{rsc_bundle_path}"
+        end
+
         pool = ReactOnRailsPro::ServerRenderingPool::NodeRenderingPool
-        renderer_bundle_file_name = if is_rsc
-                                      pool.rsc_renderer_bundle_file_name
-                                    else
-                                      pool.renderer_bundle_file_name
-                                    end
         form["bundle"] = {
           body: get_form_body_for_file(server_bundle_path),
           content_type: "text/javascript",
-          filename: renderer_bundle_file_name
+          filename: pool.renderer_bundle_file_name
         }
 
-        add_assets_to_form(form, is_rsc: is_rsc)
+        if rsc_support_enabled
+          form["rscBundle"] = {
+            body: get_form_body_for_file(rsc_bundle_path),
+            content_type: "text/javascript",
+            filename: pool.rsc_renderer_bundle_file_name
+          }
+        end
+
+        add_assets_to_form(form)
       end
 
-      def add_assets_to_form(form, is_rsc:)
+      def add_assets_to_form(form)
         assets_to_copy = ReactOnRailsPro.configuration.assets_to_copy || []
-        # react_client_manifest file is needed to generate react server components payload
-        assets_to_copy << ReactOnRails::Utils.react_client_manifest_file_path if is_rsc
+        # react_client_manifest and react_server_manifest files are needed to generate react server components payload
+        if ReactOnRailsPro.configuration.enable_rsc_support
+          assets_to_copy << ReactOnRails::Utils.react_client_manifest_file_path
+          assets_to_copy << ReactOnRails::Utils.react_server_manifest_file_path
+        end
 
         return form unless assets_to_copy.present?
 
@@ -175,9 +179,9 @@ def add_assets_to_form(form, is_rsc:)
         form
       end
 
-      def form_with_assets_and_bundle(is_rsc: false)
+      def form_with_assets_and_bundle
         form = common_form_data
-        populate_form_with_bundle_and_assets(form, is_rsc: is_rsc, check_bundle: true)
+        populate_form_with_bundle_and_assets(form, check_bundle: true)
         form
       end
 
diff --git a/lib/react_on_rails_pro/server_rendering_js_code.rb b/lib/react_on_rails_pro/server_rendering_js_code.rb
@@ -9,33 +9,41 @@ def ssr_pre_hook_js
 
       def render(props_string, rails_context, redux_stores, react_component_name, render_options)
         render_function_name = if render_options.rsc?
-                                 "serverRenderRSCReactComponent"
+                                 "'serverRenderRSCReactComponent'"
                                elsif render_options.stream?
-                                 "streamServerRenderedReactComponent"
+                                 "ReactOnRails.isRSCBundle ? 'serverRenderRSCReactComponent' : 'streamServerRenderedReactComponent'"
                                else
-                                 "serverRenderReactComponent"
+                                 "'serverRenderReactComponent'"
                                end
-        rsc_props_if_rsc_request = if render_options.rsc?
-                                     manifest_file = ReactOnRails.configuration.react_client_manifest_file
-                                     "reactClientManifestFileName: '#{manifest_file}',"
-                                   else
-                                     ""
-                                   end
+        request_specific_props = if render_options.rsc?
+                                   manifest_file = ReactOnRails.configuration.react_client_manifest_file
+                                   "reactClientManifestFileName: '#{manifest_file}',"
+                                 elsif render_options.stream?
+                                   client_manifest_file = ReactOnRails.configuration.react_client_manifest_file
+                                   server_manifest_file = ReactOnRails.configuration.react_server_manifest_file
+                                   <<-JS
+                                     reactClientManifestFileName: '#{client_manifest_file}',
+                                     reactServerManifestFileName: '#{server_manifest_file}',
+                                   JS
+                                 else
+                                   ""
+                                 end
         <<-JS
         (function() {
           var railsContext = #{rails_context};
         #{ssr_pre_hook_js}
         #{redux_stores}
           var props = #{props_string};
-          return ReactOnRails.#{render_function_name}({
+          return ReactOnRails[#{render_function_name}]({
             name: '#{react_component_name}',
             domNodeId: '#{render_options.dom_id}',
             props: props,
             trace: #{render_options.trace},
             railsContext: railsContext,
             throwJsErrors: #{ReactOnRailsPro.configuration.throw_js_errors},
             renderingReturnsPromises: #{ReactOnRailsPro.configuration.rendering_returns_promises},
-            #{rsc_props_if_rsc_request}
+            rscResult,
+            #{request_specific_props}
           });
         })()
         JS
diff --git a/packages/node-renderer/src/worker.ts b/packages/node-renderer/src/worker.ts
@@ -191,13 +191,16 @@ export default function run(config: Partial<Config>) {
     //   await delay(100000);
     // }
 
-    const { renderingRequest } = req.body;
+    const { renderingRequest, rscBundleTimestamp } = req.body;
     const { bundleTimestamp } = req.params;
     let providedNewBundle: Asset | undefined;
+    let providedNewRscBundle: Asset | undefined;
     const assetsToCopy: Asset[] = [];
     Object.entries(req.body).forEach(([key, value]) => {
       if (key === 'bundle') {
         providedNewBundle = value as Asset;
+      } else if (key === 'rscBundle') {
+        providedNewRscBundle = value as Asset;
       } else if (isAsset(value)) {
         assetsToCopy.push(value);
       }
@@ -210,7 +213,9 @@ export default function run(config: Partial<Config>) {
             renderingRequest,
             bundleTimestamp,
             providedNewBundle,
+            providedNewRscBundle,
             assetsToCopy,
+            rscBundleTimestamp: rscBundleTimestamp as string | undefined,
           });
           await setResponse(result, res);
         } catch (err) {
diff --git a/packages/node-renderer/src/worker/handleRenderRequest.ts b/packages/node-renderer/src/worker/handleRenderRequest.ts
@@ -29,9 +29,14 @@ import { buildVM, hasVMContextForBundle, runInVM } from './vm';
 async function prepareResult(
   renderingRequest: string,
   bundleFilePathPerTimestamp: string,
+  rscBundleFilePathPerTimestamp?: string,
 ): Promise<ResponseResult> {
   try {
-    const result = await runInVM(renderingRequest, bundleFilePathPerTimestamp, cluster);
+    let rscResult;
+    if (rscBundleFilePathPerTimestamp) {
+      rscResult = await runInVM(renderingRequest, rscBundleFilePathPerTimestamp, cluster);
+    }
+    const result = await runInVM(renderingRequest, bundleFilePathPerTimestamp, cluster, rscResult);
 
     let exceptionMessage = null;
     if (!result) {
@@ -84,7 +89,7 @@ async function handleNewBundleProvided(
   providedNewBundle: Asset,
   renderingRequest: string,
   assetsToCopy: Asset[] | null | undefined,
-): Promise<ResponseResult> {
+): Promise<void> {
   log.info('Worker received new bundle: %s', bundleFilePathPerTimestamp);
 
   let lockAcquired = false;
@@ -100,7 +105,7 @@ async function handleNewBundleProvided(
         errorMessage,
         `Failed to acquire lock ${lockfileName}. Worker: ${workerIdLabel()}.`,
       );
-      return Promise.resolve(errorResponseResult(msg));
+      throw new Error(msg);
     }
 
     try {
@@ -123,28 +128,13 @@ async function handleNewBundleProvided(
 to ${bundleFilePathPerTimestamp})`,
         );
         log.error(msg);
-        return Promise.resolve(errorResponseResult(msg));
+        throw new Error(msg);
       }
       log.info(
         'File exists when trying to overwrite bundle %s. Assuming bundle written by other thread',
         bundleFilePathPerTimestamp,
       );
     }
-
-    try {
-      // Either this process or another process placed the file. Because the lock is acquired, the
-      // file must be fully written
-      log.info('buildVM, bundleFilePathPerTimestamp', bundleFilePathPerTimestamp);
-      await buildVM(bundleFilePathPerTimestamp);
-      return prepareResult(renderingRequest, bundleFilePathPerTimestamp);
-    } catch (error) {
-      const msg = formatExceptionMessage(
-        renderingRequest,
-        error,
-        `Unexpected error when building the VM ${bundleFilePathPerTimestamp}`,
-      );
-      return Promise.resolve(errorResponseResult(msg));
-    }
   } finally {
     if (lockAcquired) {
       log.info('About to unlock %s from worker %i', lockfileName, workerIdLabel());
@@ -173,33 +163,48 @@ export = async function handleRenderRequest({
   renderingRequest,
   bundleTimestamp,
   providedNewBundle,
+  providedNewRscBundle,
   assetsToCopy,
+  rscBundleTimestamp,
 }: {
   renderingRequest: string;
   bundleTimestamp: string | number;
   providedNewBundle?: Asset | null;
+  providedNewRscBundle?: Asset | null;
   assetsToCopy?: Asset[] | null;
+  rscBundleTimestamp?: string | undefined;
 }): Promise<ResponseResult> {
   try {
     const bundleFilePathPerTimestamp = getRequestBundleFilePath(bundleTimestamp);
+    const rscBundleFilePathPerTimestamp = rscBundleTimestamp && getRequestBundleFilePath(rscBundleTimestamp);
 
     // If the current VM has the correct bundle and is ready
-    if (hasVMContextForBundle(bundleFilePathPerTimestamp)) {
-      return prepareResult(renderingRequest, bundleFilePathPerTimestamp);
+    if (hasVMContextForBundle(bundleFilePathPerTimestamp) && (!rscBundleFilePathPerTimestamp || hasVMContextForBundle(rscBundleFilePathPerTimestamp))) {
+      return prepareResult(renderingRequest, bundleFilePathPerTimestamp, rscBundleFilePathPerTimestamp);
     }
 
     // If gem has posted updated bundle:
     if (providedNewBundle) {
-      return handleNewBundleProvided(
+      await handleNewBundleProvided(
         bundleFilePathPerTimestamp,
         providedNewBundle,
         renderingRequest,
         assetsToCopy,
       );
     }
 
+    if (providedNewRscBundle && rscBundleFilePathPerTimestamp) {
+      await handleNewBundleProvided(
+        rscBundleFilePathPerTimestamp,
+        providedNewRscBundle,
+        renderingRequest,
+        [],
+      );
+    }
+
     // Check if the bundle exists:
-    const fileExists = await fileExistsAsync(bundleFilePathPerTimestamp);
+    const fileExists = await fileExistsAsync(bundleFilePathPerTimestamp) &&
+      (!rscBundleFilePathPerTimestamp || await fileExistsAsync(rscBundleFilePathPerTimestamp));
     if (!fileExists) {
       log.info(`No saved bundle ${bundleFilePathPerTimestamp}. Requesting a new bundle.`);
       return Promise.resolve({
@@ -213,8 +218,11 @@ export = async function handleRenderRequest({
     // Another worker must have written it or it was saved during deployment.
     log.info('Bundle %s exists. Building VM for worker %s.', bundleFilePathPerTimestamp, workerIdLabel());
     await buildVM(bundleFilePathPerTimestamp);
+    if (rscBundleFilePathPerTimestamp) {
+      await buildVM(rscBundleFilePathPerTimestamp);
+    }
 
-    return prepareResult(renderingRequest, bundleFilePathPerTimestamp);
+    return prepareResult(renderingRequest, bundleFilePathPerTimestamp, rscBundleFilePathPerTimestamp);
   } catch (error) {
     const msg = formatExceptionMessage(
       renderingRequest,
diff --git a/packages/node-renderer/src/worker/vm.ts b/packages/node-renderer/src/worker/vm.ts
@@ -246,6 +246,7 @@ export async function runInVM(
   renderingRequest: string,
   filePath: string,
   vmCluster?: typeof cluster,
+  rscResult?: RenderResult,
 ): Promise<RenderResult> {
   const { bundlePath } = getConfig();
 
@@ -273,7 +274,14 @@ ${smartTrim(renderingRequest)}`);
     }
 
     let result = sharedConsoleHistory.trackConsoleHistoryInRenderRequest(
-      () => vm.runInContext(renderingRequest, context) as RenderCodeResult,
+      () => {
+        try {
+          context.rscResult = rscResult;
+          return vm.runInContext(renderingRequest, context) as RenderCodeResult
+        } finally {
+          context.rscResult = undefined;
+        }
+      },
     );
 
     if (isReadableStream(result)) {
diff --git a/spec/dummy/Gemfile.lock b/spec/dummy/Gemfile.lock
@@ -8,7 +8,7 @@ GIT
 
 GIT
   remote: https://github.com/shakacode/react_on_rails.git
-  revision: 544a93208d38d029be7810cd3f1f8468f9f5234c
+  revision: 6307be98c88d06550cffb046807ffb9ab2b8c9d6
   branch: abanoubghadban/pro362-add-support-for-RSC
   specs:
     react_on_rails (14.1.1)
diff --git a/spec/dummy/config/webpack/serverWebpackConfig.js b/spec/dummy/config/webpack/serverWebpackConfig.js
@@ -1,6 +1,7 @@
+const webpack = require('webpack');
 const { config } = require('shakapacker');
+const RSDWPlugin = require('react-server-dom-webpack/plugin');
 const commonWebpackConfig = require('./commonWebpackConfig');
-const webpack = require('webpack');
 
 function extractLoader(rule, loaderName) {
   return rule.use.find((item) => {
@@ -52,6 +53,11 @@ const configureServer = () => {
     minimize: false,
   };
 
+  serverWebpackConfig.plugins.push(new RSDWPlugin({
+    isServer: false,
+    clientManifestFilename: 'react-server-manifest.json',
+    ssrManifestFilename: 'react-server-ssr-manifest.json',
+  }));
   serverWebpackConfig.plugins.unshift(new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }));
   // Custom output for the server-bundle that matches the config in
   // config/initializers/react_on_rails.rb
